Travel through timeline

[LukeDavison]

Hi!

 

The website https://2018.craftedbygc.com/ uses GSAP and scrollmagic seems to use a timeline that you scroll inwards through the months, with it's own space to click objects and i wondered what kind of animation you would call this so i can learn how to do the same as I want to create the same timeline and it would be really handy but i'm not sure where to start!

 

Are there any videos/similar codepen tutorials that display the same function!

 

Thanks for your help!

[ZachSaucier]

Hey Luke. There's not a particular name for every type of effect. You could use a series of words to describe this, like "scroll in Z direction", but there's no one way to describe it.

 

How it's made based on a cursory glance:

• Uses WebGL to render a bunch of content, placing that content at set locations at different depths
• Places the camera in the middle and animates the camera in the z direction on scroll
• Rotates the camera based on the mouse position
• Uses some method of detecting clicks on content (perhaps a line from the camera to the mouse position - if it hits content then zoom into that content? That approach is called ray tracing)

Most the content are videos rendered with WebGL.

 

It doesn't use ScrollMagic nor would ScrollMagic be helpful in this context.

[ZachSaucier]

Side note: that site's navigation is pretty terrible (it's very hard to get to specific content and almost 0 context is given about how much content there is on a page, etc.). So unless your site is focused on some exploratory experience, it likely isn't a good fit. Even if it is exploratory, there very well may be better ways to do it. At the very least, this approach could be improved by giving users more control and context.

[LukeDavison]

@ZachSaucier thanks for getting back to me so quickly! Yeah you're correct there was a better way to achieve this sort of style! I searched the scroll in z axis direction like you said and a bunch of things came up and found a decent example 

See the Pen NJEwwo by vinceumo (@vinceumo) on CodePen

 

Thanks so much!

[ZachSaucier]

Happy to help. I would not recommend using straight DOM for this - it lacks the performance capacity that something like Canvas/WebGL does especially for a lot of content. I also recommend limiting the depth of field and fading content in like the site you linked to does.