mokapot2000
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by mokapot2000
-
-
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. -
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
Nested Timelines and Scrolltrigger
in GSAP
Posted
I'll take a close look.
Maybe it's obvious, but I miss obvious things all the time
Thank you Cassie