Jump to content
Search Community

Nested Timelines and Scrolltrigger

mokapot2000 test
Moderator Tag

Recommended Posts

A quick explanation of the obstacle

I want elements on the page to appear in a choreographed manner. For all elements that load in the viewport, I can just create a timeline. But as we scroll down, elements would transition when they hit the specified trigger point. So rather than choreographed to animate in a particular sequence, they just all load when they hit the trigger point.

 

Let's say that 10, 11, 12, 13 require a scroll down to see. I want to them to choreograph their transition from opacity 0 to 1, starting from left to right, top to bottom. Each component's elements fading in, one component after the other. Just as an example.

 

______


My initial thought was to make a master timeline for the template. Then use a if/else statement to determine whether a component is in the viewport. Components in the viewport would be added to that master timeline. Not sure if this would work.

I need heeelp

 

_______

 

ps, just consider this a wireframe. the squares stand in for div, img, p, h2, etc

 

See the Pen XWRNrLb?editors=1010 by uxoxox (@uxoxox) on CodePen

Link to comment
Share on other sites

okay, this looks like it would work for applying the same transition, staggered across all elements.


the next step is to trigger various sequences, not the same one. the example i gave seems to have a simpler solution, but the goal is to trigger all kinds of animations.

edit: i think the simplest explanation is i want to trigger timeline 1, then timeline 2, then timeline 3, etc... as long as they're in the viewport. when timeline 11,12, and 13 enter the viewport, i want to trigger them in a particular order also.

Link to comment
Share on other sites

7 hours ago, mokapot2000 said:

i want to trigger timeline 1, then timeline 2, then timeline 3, etc... as long as they're in the viewport. when timeline 11,12, and 13 enter the viewport, i want to trigger them in a particular order also.

Just to be clear, timelines aren't things that have locations in the browser (so it's a little odd to say "when timeline 11 enters the viewport"). I assume you mean particular elements. Like @Cassie said, that's precisely what ScrollTrigger is PERFECT for. You just add a ScrollTrigger to your animation, set its trigger to a particular element and BOOM, that timeline gets triggered when that element enters the viewport. Should be easy-peasy. Of course there's a TON more you can do with ScrollTrigger, but those are the basics. The docs have all the info including a video that walks you through it all. 

 

Have fun!

  • Like 2
Link to comment
Share on other sites

TLDR 🧠

Triggering an animation when an element enters the viewport - ScrollTrigger
Playing animations in a certain order - Timelines

Timelines are a way to sequence animations, you can add ScrollTrigger *to* timelines in order to control/trigger those sequences at a certain scroll point.

As Jack said - check out the docs - there's also loads of examples here to dig into once you've got the basic idea.

https://greensock.com/st-demos/

  • Like 4
Link to comment
Share on other sites

  • 1 year later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...