Creating personal projects can be a great way to practice our knowledge and demonstrate it to potential clients. Our agency decided to work on one, to improve on scrolly-telling mechanics. After realizing this project, we would not only acquire knowledge that we can apply to new ones but also have an easy way to show new clients what we can do. Thus the project Wind City was born.
It also represents our agency’s values since Figures aims to work on ethical projects. For example, one of the services that our agency offers is creating websites for the annual review of ecological footprint. Therefore it only made sense to base the concept on green energies, educating the public on how much electricity a wind turbine can produce.
The first new mechanic concerns scrolling. Most of our website designs resemble a slideshow, (it’s a very convenient mechanic, since there’s only one graphic or illustration visible at a time, so the user can focus on it). This time, the camera moves around the 3D object and shows it in different states relevant to the current text. The new scroll mechanic improves the transitions between the website’s sections and makes sure the main content is centered.
The first concept was to have the website’s entire content in a fixed position and switch opacity based on the scroll position. This did not work so well, since it was easy to skip content. To counter that, I augmented the time the user needs to scroll to switch between content. Unfortunately, this was not a good option either, since longer scrolling time gave a bad User Experience. It’s generally very hard to reproduce existing mechanics like scroll since we’re used to how it works by default and anything different will not feel great to use.
Based on my previous experiences with scroll mechanics, I knew using CSS is generally more performant and issue-proof. After discussing with the design team and agreeing that the priority was animating smoothly between “slides” and not following exactly the original animation concept, I had more freedom to look for diverse solutions. I found the scroll-snapping mechanic, which corresponds quite nicely to the project’s needs, and ended up working great. You can find here an article I wrote on how to use it.
This mechanic also has the advantage that it switches rapidly between states, so instead of animating the camera position on every scroll, it gets animated only once, when it switches between sections (which is better for performance). In the beginning, I tried to trigger the animation based on waypoints, but this did not give reliable results (they did not always get triggered) so I switched to detecting the scroll position with JavaScript.
import { useScroll } from "react-use"
const ref = useRef(null)
const { y } = useScroll(ref)
useEffect(() => {
if (window) {
const windowHeight = window.innerHeight
const percent = Math.abs(y) / windowHeight
const newValue = Math.round(Math.abs(percent))
dispatch(setScrollProgress(newValue))
}
}, [y])
// controls the 3D state
useEffect(() => {
if (cameraSettings[scrollProgress]) {
setCameraInteractivity(cameraSettings[scrollProgress].interactivity)
setCameraX(round(cameraSettings[scrollProgress].position.x(width)))
setCameraY(round(cameraSettings[scrollProgress].position.y(width)))
setCameraZ(round(cameraSettings[scrollProgress].position.z(width)))
setCameraRotationX(
round(cameraSettings[scrollProgress].rotation.x(width))
)
setCameraRotationY(
round(cameraSettings[scrollProgress].rotation.y(width))
)
setCameraRotationZ(
round(cameraSettings[scrollProgress].rotation.z(width))
)
}
}, [scrollProgress, width])
The other new feature of this website is that it’s in 3D. This was not the first time that I worked on a 3D project since Heavens of Mankind has a 3D tool, but this project made it easier for clients to visualize what their project would look like. Thanks to this, we were able to create more projects in 3D for the Rundfunk Sinfonieorchester Berlin, to show the stories of 2 buildings of historical importance for their 100-year anniversary.