ScrollTrigger with multiple timelines with sticky position

[Alonso Antunez]

Hi everyone!.

Im a relative ScrollTrigger and Gsap new user, also I'm not a deep knowledge javascript developer. So here goes my main issue.

 

I'm creating a project with bootstrap, jquery, ScrollTrigger and Gsap.

 

I have two columns. The left one contains a sticky element where there's multiple elements that are gouing to be animated, the right one has multiple rows with many text descriptions (texts are nost important for the purpose). What im triying to accomplish is, when scrolling along the document height, multiple animations are being fired and the triggers are the multiple sections on the right column, for example:

 

- on the first (with id first) container on the right (the one that shows when the document loads), the video scale is 1, the image and the shadow start with opacity 1

- on the second container (with id second) container on the right, on the left the video scale doubles, the image and the shadow turns their opacity to 0

- on the third (with id third) container on the right,   the video turns its opacity to 0 and the image and shadow opacity turns to 1.

 

This is a small excerpt of the original project, in total are 13 containers on the right that fires multiple animations along the height of the scroll (multiple videos, multiple images, opacitys, filters, etc) on the left column. I'm using timelines to fire the multiple animations. 

 

My main problem is, when the document loads, all the contents on the sitcky column show up, and then hide as the timeline of the first right container hides them. I had to create a timeline where all the other elements are hidden and only the elements that must be shown are visible. Also, the timeline that hides all the elements had to be put at the very end of the js document, since it seems like the timelines are taking the last status/settings that are being declared. I'm not really sure why is this happening, but this is the main (major) issue, Also, if i scroll very fast (up or down) all the elements that are being animated show up and they have not enough time to show/hide and dont "obey" the propper animations. Also, when resizing, animations seem to be triggering and the result is the same, all elements end up beeing shown/hidden and not "obeying" their timeline. Also, as a minor issue, duration time declared on the timeline seems to be taking places, like first fires one animation and then, when the first animation fires, the second starts and I want the elements to be animated at the same time when the right element (the trigger that fires the animations) shows up.

 

I'm not really sure if timelines are the correct approach to this, but this is pretty much the result that came up to my mind since (as i was saying) im not a deep javascript knowledge developer. Also, i can provide a link to my test project (i understand you guys check only codepen urls, i was just mentioning this detail in case its better for the viewing purposes).

 

What am i Doing wrong? 

See the Pen wvjoVBb by iVicodin (@iVicodin) on CodePen

[Rodrigo]

Hi @Alonso Antunez and welcome to the GreenSock forums!

 

I hope that I was able to follow your issue correctly, but this seems to be working as you expect?

See the Pen gOzRbaX by rhernando (@rhernando) on CodePen

 

Basically what I did was remove the fromTo instances in the final timeline. Those are not necessary, since the previous timeline that will be called by ScrollTrigger will handle the opacity on those elements, setting it to zero. So there is no need to animate the opacity from zero to one, if it is already zero by the time the ScrollTrigger instance starts.

 

Finally since version 3.8 ScrollTrigger has the preventOverlaps and fastScrollEnd config options to keep the animations in sync with the scroll position when it changes too fast (faster than 2500px per second by default). The codepen demo has preventOverlaps, but you should check fastScrollEnd as well and see which one fits better for your needs. @Carl made a really great video explaining how these options work and a ton of other GSAP related content that you should definitely check:

Happy Tweening!!!

[Alonso Antunez]

Thanks Rodrigo for the quick reply!

 

Unfortunately, i'm using version 3.11.1 (for both gsap and scrolltrigger) in my project and i'm unable to find the 3.8 version of Gsap.

 

By any chance, is there a cdn available where i can get them? 

 

[Alonso Antunez]

1 hour ago, Rodrigo said:

preventOverlaps and fastScrollEnd

Nevermind @Rodrigo! That did the trick! 

 

Thanks a lot for the help and Quick response!

[Rodrigo]

No problemo!!!

 

Just to clarify GSAP 3.11 has all the tooling 3.8 has and some other stuff and bug fixes as well, so no need to downgrade your version.

 

Happy Tweening!!!