start scrolling list inside pined element after mask animation is finished

[gregor]

Hi, I have an animation where a circled mask reveals some content. After the mask animation is finished, I want the list to scroll to the end, then remove the pin and continue scrolling the whole module. My problem is that scrolling through the list starts too early or too late.... I played around with the start value, but 'center' starts too early and if I use something else like '60%', the start is completely off compared to the 'center' value.

See the Pen VwqOgQw by destroy90210 (@destroy90210) on CodePen

[mvaneijgen]

Hi @gregor

 

I've edit your pen. Personally I've found that you hardly need more then one ScrollTrigger, also here, I've combined your 3 ScrollTriggers in to a timeline with just one! I've also posted some comments in your JS be sure to read through them.

 

It works here, so you don't need to fix it, but animating width and height is not so performant, I would make your mask 142vmax units and then scale it from 0 to 1, check out this awesome tutorial from our own @Carl https://www.creativecodingclub.com/pages/free-lesson-vmax

 

Hope it helps and happy tweening! 

 

See the Pen ExGzJpb?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[gregor]

wow thank you so much for this great support

[gregor]

hi @mvaneijgen

hope it's ok to ask you again

 

How can I pin the left box after the mask animation is over? I tried it but I failed So that the right column scrolls to the end only with the standard scroller. that would work better later with my mobile version.  And if it's not a timeline for both animations I have more control of how much time the mask effect should take

 

this was my attempt 

See the Pen bGzBEgx?editors=1010 by destroy90210 (@destroy90210) on CodePen

[mvaneijgen]

I don't know what the question is. In my demo the box is pinned, so I don't know what it is you're doing now. 

 

If you want things differently on mobile devices check out https://gsap.com/docs/v3/GSAP/gsap.matchMedia() with it you can build media like queries, voor GSAP/JS

[gregor]

Sorry, I wasn't precise enough. First I want to split the animation from one timeline to individual scroll triggers because then I have more control over the individual durations. Or is this also with your solution possible? because now the duration is 

end: "bottom+=100% center"

but I can't controll how much of this +100% should take the mask effect and how much the y scrolling of the list.

 

The second part is why I want to pin the black box after the end of the mask animation instead of the whole module is that the list can then be scrolled with the natural scroller instead of moving it with yPercent.

 

[mvaneijgen]

20 hours ago, gregor said:

First I want to split the animation from one timeline to individual scroll triggers because then I have more control over the individual durations.

That is not that easy, it could be done, but that requires a lot of thinkering. Feel free to go that route. 

 

20 hours ago, gregor said:

Or is this also with your solution possible?

Sure it is possible, the only thing is that ScrollTrigger maps the whole timeline duration to the scroll distance. Lets say you have a scroll distance of 750px and you want one thing to animate over 250px and the other thing over 500px. You will have to set up the duration on the timeline that something equals one unit eg 1 second  and the other 2 units eg 2 seconds. 

 

Here is your demo, where the scroll distance some value set it to 2.74 times the window height, but as you can see you can make it what ever you want. The grow animation takes 10 seconds and the scroll takes 1 second so 1/10th the duration. As you can see the first tween is really slow and the second tween really fast, with the explanation above this is how you can tweak your ScrollTrigger to time everything exactly how you want.

 

See the Pen yLZVwEj?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

 

Quote

The second part is why I want to pin the black box after the end of the mask animation instead of the whole module is that the list can then be scrolled with the natural scroller instead of moving it with yPercent.

That is possible, but probably requires a rewrite of your HTML structure, you're using tailwind of which I'm not a fan and have no knowledge, so I can't easily thinker with your HTML and CSS. I've removed some of your HTML and CSS and as you cans see the el_list element is bigger than it can now scroll with yPercent: -100, I have the feeling this is because you're giving it a height with some tailwind class that is not correct. 

 

[gregor]

thank you for your reply.

 

I have used different values for the duration but it won't see have any effects on the animations.  It looks for me the same if I replace 10 with 50 or 100.

 

Other question the value 2.74 should just show that I can use any value? Or is this a magic number ?

[GSAP Helper]

I'd strongly recommend that you read this: 

https://gsap.com/docs/v3/Plugins/ScrollTrigger/#how-does-duration-work-with-scrub-true

 

When you have scrub enabled, it just has to fit the whole animation between the start and end scroll positions. So if you want it to last longer, you need to make the distance between those greater.