One element multiple trigger point

[Forg4t]

Hi guys!

 

First of all i would like to say that im totally impressed of this library, i've been reading the docs for a while, watching tutorial vids, reading forums etc... so congrats for the team. Ok so ofc i have some issue what i really cant figure it out... Im totally new here, so for me its a bit complex, and probs that complexity makes me confusing, that i cant see the transition in some certain points but i should just get use to it, anyway. So the issue is that code is a mess, and i really cant see how to merge all of these things into one piece.

So the page should be like this: (i gave ids to clear it up)

 

scroll down...

run #opacityScale then run #widthMove then run #long

 

I cant figure those things out that how make them to follow each others step by step. And when the page reaches the bottom, the width of the ".map" again 100%, and i would like to keep it on 50%!

 

Thanks, Marci

 

See the Pen vYWNYxj by marci-czebe (@marci-czebe) on CodePen

[OSUblake]

Welcome to the forums @Forg4t

 

It looks like you are animating your trigger, which will mess with ScrollTrigger's calculations, so I would animate a child element instead.

 

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

 

[Forg4t]

Hi OSUblake! Thx for ur answer, yeah that could fix one part of the story, the other issue was that i could't set up transition between the steps, anyway i found out. I extended the runtime by css, so i added margin-top:50vh then in the script just i mean i aligned the script for that extra margin, and i used the paused method. Seems that it does the thing. if u have any suggestion or a code review let me know pls. Thanks again, Forg4t

 

See the Pen GROpjOg by marci-czebe (@marci-czebe) on CodePen