ScrollTrigger|Timelime

[portareset1]

Hello, i'm pretty new to this awesome community that i discovered very recently, today i saw this video : (1) Introducing ScrollTrigger for GSAP - YouTube

and i wanted to do the second 25 animation, an slide-in effect from left, right and bottom, problem is when i replicate the same code that this guy have the timeline only take the first element so when i finish scrolling the first element, the others are ignored and they dont continue the animation, i tried a tons of changes but that didnt helped at all:/

 

See the Pen mdOBExZ by portareset1 (@portareset1) on CodePen

[tailbreezy]

Here is the pen from the video, in case you want to deconstruct it.

Basically ScrollTrigger is scrubbing through the whole animation one tween at a time, since there are no overlaps set.

 

See the Pen qBdzqmR by GreenSock (@GreenSock) on CodePen

 

[portareset1]

52 minutes ago, tailbreezy said:

Here is the pen from the video, in case you want to deconstruct it.

Basically ScrollTrigger is scrubbing through the whole animation one tween at a time, since there are no overlaps set.

 

 

 

 

you deserve the heaven, that solved my problem

[tailbreezy]

No problem.

Also keep in mind that end value in this case is arbitrary and having a higher value just means more time to scroll to reach the end of the timeline.

[portareset1]

Just now, tailbreezy said:

No problem.

Also keep in mind that end value in this case is arbitrary and having a higher value just means more time to scroll to reach the end of the timeline.

i've added this to the end end: () => "+=" + innerWidth * sections.length

[portareset1]

41 minutes ago, tailbreezy said:

No problem.

Also keep in mind that end value in this case is arbitrary and having a higher value just means more time to scroll to reach the end of the timeline.

sorry for disturbing you again, ive added that function to the codepen, everything seems to work normally but the last section isnt displaying correctly

A Pen by portareset1 (codepen.io)

[GreenSock]

The main problem is that your pinned element has no height whatsoever, so everything is collapsed. Just set #main height to 100vh and it should resolve things. I noticed that you're animating a non-existent element at the end too. I assume you meant to animate the #red <div>?: 

See the Pen a1eee8d4600f57b8710a50aed8135038?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help? 

[portareset1]

13 hours ago, GreenSock said:

The main problem is that your pinned element has no height whatsoever, so everything is collapsed. Just set #main height to 100vh and it should resolve things. I noticed that you're animating a non-existent element at the end too. I assume you meant to animate the #red <div>?: 

 

 

 

Does that help? 

yeah, ive deleted it to fix the animation, that solved my issue but now im gonna try your method

 

EDIT: Your method worked but if i try to add more elements before the main container, the panel with the yPercent -100 animation is displayed before the green which is the first element, try adding some br's like this and you will see what i mean

 

 

  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

[ZachSaucier]

We can't make all of the changes necessary for you  

 

If you're still having trouble and want help debugging please use the "fork" button on CodePen to make a new version of your demo and then recreate whatever issue you are facing.