As someone with previous experience in whole page animation, I was tasked with building the shiny new homepage for IDBS. You can see the site here https://www.idbs.com/ in its full glory, but we had to get over a few challenges to get it up and running.
The design process
Firstly is the design. Our website designs are built in photoshop which is a great creative tool. The problem is you end up with still images. So, we also need a way to get across the animation. Consequently, we worked through a workflow process describing everything that was going to happen as the user scrolls, to create the perfect user journey for exploring the company.
The development process
With that all sorted, it’s time to start coding but that’s much easier said than done. As with most coding we start with the easy bit’s and go from there, so everything that doesn’t move was built first including the general page layout, text, links and images. So, now we’ve got something to work with, it’s time to look at the trickier bit breaking down each part:
– Content fading in as you scroll.
– Fixed side navigation highlighting the related dot.
– Clouds appearing and coming out of the screen.
– Explore area moving sideways.
– Industries popping up as the explore area moves sideways.
– Finally The light bulb following a specific path.
The first 2 are quite common so I created these first. Then I came to tackling the clouds. This is where the maths that you had no idea why you were doing it at school comes in. The clouds need to come in slowly and accelerate out wide as they get bigger so they don’t cover the cloud below. By multiplying the distance scrolled by 2 you can make the clouds move twice as fast as your scrolling speed. But, to make it accelerate you’ve got to think to those curved graphs made using powers. With a bit of trial and error, the position ended up equalling (‘the scroll distance’ ÷ 500) ^ 6 using various other functions to calculate the blur, opacity, and size.
For the sideways scrolling, I was happy to say a plugin came to my rescue, though it wasn’t completely straightforward. The plugin I used was called ScrollMagic and you can see this example shows slides moving sideways as you scroll down the page.
I, therefore, modified the example and was able to recreate what you can now see on the site.
To tackle the industries popping up, yet another plugin came into use, this one called scrollr but I had to use to use some custom code to get all the timings right.
Then finally with the light bulb, we ended up using ScrollMagic again but this time it was even more complicated. Which I don’t think I’ll be able to go into in this article.
Hopefully, as you can see by tackling these things one at a time and breaking it all down we’re able to create a full user journey displaying content in new and exciting ways.
if you’re interested in website development or website design, get in touch with us today here.