Jump to content
Search Community

ScrollTrigger - Timing Question with multiple Timelines within one Pin

F.D.C.H test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

Hello Everybody,

i got a little timing Problem, when using multiple Timelines with dynamic end Values on one pinned Element.

The Problem is, that the duration of the first two timelines should always be the same, but the duration of the last timeline is dynamic. 

The scenario should be:
-> green box fades in before Element is pinned

-> Element is pinned - following steps are always limited in duration, for example 50% scrolldepth.

    -> red box translates in

    -> blue box fades in
-> Element is still pinned - following steps have a dynamic duration time.
    -> red box fades out
    -> blue box animates. 

is there any elegant way for an exact timing? 
Thank you very much for any help!
Best Regards

See the Pen zYRmemp by FDCH (@FDCH) on CodePen

Link to comment
Share on other sites

Hey @Cassie thank you for your quick reply – sorry for my bad english skills, i will try to explain it a little better :) 

Basically i need the third timeline to start animation after the second timeline is complete.

i forked a new codepen, where you can see, what it should look like. The red box should be visible, while the blue box fades in. 

See the Pen abqRgKx by FDCH (@FDCH) on CodePen



Unfortunately i cant use it that way, because the scroll distance for the blue box animation will always be different. 
If i put everything in one timeline, the different scroll distance would affect the complete timeline, like i did it (extreme) in the forked example on the second pinned element.

Only the blue box should have different durations, the red and green box should always have one consistent duration/scroll distance
That's why i separated the timelines, like in the first codepen, but the timelines are overlapping and i cant get the correct timing for the third timeline to start, when the second one ist done. 

Hope i could explain it a little better.
Thank you very much. 

  • Like 1
Link to comment
Share on other sites

Hello @Cassie,
i think previous could be the right approach, thank you very much!! :)
Unfortunately, the last timeline pins the wrapper, so if it waits for the previous timeline to end, the pin happens to late 🤔
If i pin the wrapper in the second und third timeline it kinda works, but the second Wrapper scrolls too early into place.

Am i missing something?
Thank you for your help.

single Pin

See the Pen BaYGjNm by FDCH (@FDCH) on CodePen



double Pin

See the Pen GRQwpbr by FDCH (@FDCH) on CodePen

Link to comment
Share on other sites

Hello @akapowl

thank you very much for your quick answer and help! Creating the pinning ScrollTrigger first works much better.

 

If I increase the endpoint of the second timeline to, for example, 500%, the first animation is broken, the second and last work perfectly.
I don't know why this little code is so screwed up.
Do you got any advice?

If that are too many questions in one topic, please let me know.

 

See the Pen rNJopYb by FDCH (@FDCH) on CodePen



Another small question:
since i need to create the pinning ScrollTrigger first, how can i deal with sections that are displayed on pageload "above the fold"? The element gets immediately pinned and the second timeline isn't executed on same time.

appreciate your help a lot!

See the Pen vYdvdKW by FDCH (@FDCH) on CodePen

Link to comment
Share on other sites

 

55 minutes ago, F.D.C.H said:

If I increase the endpoint of the second timeline to, for example, 500%, the first animation is broken, the second and last work perfectly.

 

On your very last ScrollTrigger in that forEach loop you have the start set to the end of the previous ScrollTrigger - which would be '500%' - but the end of that very last ScrollTrigger is what you have in that data-attribute in your HTML - which is 250% for the first element that is being looped over.

 

So the end would be passed way earlier then the start - see the problem? You will have to tweak the 'timings' if you want that timeline to last longer. 

 

 

1 hour ago, F.D.C.H said:

since i need to create the pinning ScrollTrigger first, how can i deal with sections that are displayed on pageload "above the fold"? The element gets immediately pinned and the second timeline isn't executed on same time.

 

I see what you mean - a quick workaround would be to just add a small element - maybe just 1 pixel in height tall - before that first trigger element.

 

See the Pen xxYmWqz by akapowl (@akapowl) on CodePen

 

Link to comment
Share on other sites

 

One more thing - I was actually a bit baffled by how your pen works, especially with the neccessity for that workaround I suggested - while the way you are handling things does appear to mostly work, I think technically it is not 100% correct.

 

So here is how I would approach this to make sure you do not run into problems like that with the trigger that is being pinned:
 

  • create a wrapping element around that .trigger - that way you can pin the trigger inside.
    Since the .trigger will get pinned, it might create problems like the one you just noticed yourself when it is being used as the trigger, whereas that surrounding wrapping element will continue scrolling and can thus be used as a trigger for the subsequent ScrollTriggers just fine.

    This also does eliminate the need for that workaround with the 1px tall element I mentioend above.

     
  • I would also suggest moving away from using absolute values for the ends - like data-end="250%". This had me confused a bit in your pen.
    Better just set things to use relative values like '+=250%' - this way you can easily control for how long the element should be pinned. In the demo below if you set it to something like data-end="+=150%" in your HTML now the pinning/animations would just happen 'quicker' than with something as data-end="+=1000%" This should be more convenient because you wouldn't have to estimate where to end things but could let ST handle that for you as you instead just define for how long you want things to run.

    This doesn't eliminate the need for the 'timings' in those other STs to still be fitting though - so be careful with those (this is with regard to the first part I mentioned in my previos reply).

 

 

Here's a pen with the suggested tweaks in place.

 

See the Pen WNMLJZz by akapowl (@akapowl) on CodePen

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Hello @akapowl

Thank you very very much for your time and effort to help me!
I really appreciate that, like in another topic from me, you came back to update and optimize your answer even more! that is awesome!  
 

Quote

On your very last ScrollTrigger in that forEach loop you have the start set to the end of the previous ScrollTrigger - which would be '500%' - but the end of that very last ScrollTrigger is what you have in that data-attribute in your HTML - which is 250% for the first element that is being looped over.


you're totally right, that was a dumb question.
I was believing, that the end of the last ScrollTrigger would be added to the 500% of the previous Scrolltrigger. So that the End would be at 750% and not being passed way earlier, like you pointed out. 

 

Quote

- create a wrapping element around that .trigger - that way you can pin the trigger inside.
- I would also suggest moving away from using absolute values for the ends


Alright, thank you very much. I changed all this points in my Project

(3 from 5 Times the first animation seems broken, the blue box dosn't expand - is this a Codepen bug? Need to look in my Project, if its the same)

It's very embarrassing for me, but  i ran into another Problem which i reproduced on the Codepen. 
The wished animation, this whole Topic is about, isn't like in the Codepen one after another. Its more like a chapter and there are multiple other Scrolltriggers and Timelines happening on the site, which seem to interfere with "previous()"
I forked a new Codepen, where you can see after the image tween, the blue box animation is broken and it just snapps to the scale factor.

can't say it often enough, I am and will always be very thankful for any kind of help or advice! 

See the Pen zYReYXL?editors=1010 by FDCH (@FDCH) on CodePen


 

Link to comment
Share on other sites

1 hour ago, F.D.C.H said:

you're totally right, that was a dumb question.

 

It really wasn't a dumb question - you simply just didn't notice that you were creating some sort of conflict there, that's it - things like these happen to everyone at some point.

 

Moreover, the people helping in this forum will not judge any question of yours like that - this place is very different from other tech forums. So don't feel dumb or embarrassed if something doesn't work for you and you run into issues somewhere. As long as it is directly about GSAP, we love to help with it.

 

 

 

1 hour ago, F.D.C.H said:

I forked a new Codepen, where you can see after the image tween, the blue box animation is broken and it just snapps to the scale factor.

 

I think this problem's origin is, that in general, you should be creating your ScrollTriggers in order of appearance on the page.

 

Since you are creating all your STs in forEach loops, all the STs for the '.trigger-wrap' will be already created with their starts and ends 'set in stone' when you come to creating the ST for the '.reveal' in that other forEach loop. So now when that '.reveal' ST is being created you add some extra space by pinning it which throws off the positions set before for that last '.trigger-wrap'.

 

Usually if you can not create your STs in order of appearance, you are going to want to have a look at ScrollTrigger.sort() and/or refreshPriority (which is explained in the general ST docs but also in the docs for .sort() that I linked before )

 

refreshPriority number - it's VERY unlikely that you'd need to define a refreshPriority as long as you create your ScrollTriggers in the order they'd happen on the page (top-to-bottom or left-to-right)...which we strongly recommend doing. Otherwise, use refreshPriority to influence the order in which ScrollTriggers get refreshed to ensure that the pinning distance gets added to the start/end values of subsequent ScrollTriggers further down the page (that's why order matters). See the sort() method for details. A ScrollTrigger with refreshPriority: 1 will get refreshed earlier than one with refreshPriority: 0 (the default). You're welcome to use negative numbers too, and you can assign the same number to multiple ScrollTriggers.

 

 

 

But since you are using multiple forEach-loops this can become kind of tricky. What you could do instead, which could be a bit easier, is to adjust the logic for how to create the ScrollTrigger.

 

Instead of creating multiple forEach loops for different scroll-effects, just create one, that loops over the elements for all of those effects - and e.g. after a conditional check on the class of the element that is being looped over, create the effect of choice then. This way you could guarantee that the ScrollTriggers would get created for the elements top to bottom and each would know about the pinning of the previous.

 

After you mentioned it, I too noticed that the first blue box wasn't animating every time (for me it was more like 4 out of 5). I'm not exactly sure why, but interestingly enough, now with this new approach it looks like it is working 100% every time. At least I didn't get to reproduce it not animating anymore.

 

See the Pen VwQgYbL by akapowl (@akapowl) on CodePen

 

  • Like 2
Link to comment
Share on other sites

Hello @akapowl

again, thank you very much for your help! - it solves the problem creating the STs in the way you described. 
Even though I understood the problem, that the new pinning ST creates new space and throws of the other STs positions, I couldn't understand, why even STs without a pin causes the same Problem - not so drastic like in the example but the longer i scrolled, the more the ST positions where off little by little. Couldn't find out why.

love the help in this forum!
 

  • Like 1
Link to comment
Share on other sites

 

6 hours ago, F.D.C.H said:

I couldn't understand, why even STs without a pin causes the same Problem - not so drastic like in the example but the longer i scrolled, the more the ST positions where off little by little. Couldn't find out why.

 

That doesn't sound like it should be the case. Could you put up a minimal demo of a scenario, where that is the case?

 

  • Like 1
Link to comment
Share on other sites

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...