ScrollTrigger with pinned year numbers

[jenda]

Hello, 

 

I'm quite new here and I would like to pin and show every year number as soon as the container with the year and text appears next to the main number which is already pinned. Both effects shall end at the scrolled bottom of each content. 

 

I've already used the method forEach bute it seems that I didn't use it propertly. Does anybody know how I can solve this issue? 

See the Pen RwZWKyX by jankout (@jankout) on CodePen

[Cassie]

Hi there Jenda,

Welcome. ☺️

I'm not quite certain what you were trying to achieve with your first loop? Looks like you're looping through multiple containers but pinning the main one? I've removed that until you can tell me what your goal was!

Here's a simplified loop pinning the numbers, is that what you were looking for? Positioning the first number would be down to styling things differently and pinning it for the duration - but again, I wasn't really sure what you were after.

 

Hopefully this helps!

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

 

[jenda]

Hello Cassie, thank you very much for your helpful response.

 

In general I would like to pinn the first year and just to pinn the others as soon they reach the same level of the main year. The pinned effect of the main year should end as soon as the container with the contents comes to its scrolled end. 

What if I would like to fade out each number after the pinned effect finishes? Should I use onLeave() or something else? Is it possible to use autoAlpha, rotate etc. there or isn’t possible and I need to define a timeline?

[akapowl]

Hello @jenda

 

2 hours ago, jenda said:

In general I would like to pinn the first year and just to pinn the others as soon they reach the same level of the main year. The pinned effect of the main year should end as soon as the container with the contents comes to its scrolled end. 

 

In that case you could just set up an extra ScrollTrigger for the pinning of the "19" with an endTrigger set alongside of the end to easily tell where it is supposed to stop pinning, and let the ScrollTriggers within the loop handle the rest.

 

The pen below shows how you you handle the ScrollTriggers in the loop it 'timingwise', dependent on the height of each .content

 

 

 

2 hours ago, jenda said:

What if I would like to fade out each number after the pinned effect finishes? Should I use onLeave() or something else? Is it possible to use autoAlpha, rotate etc. there or isn’t possible and I need to define a timeline?

 

You can certainly do that in the onLeave callback as to be seen in the pen below - but don't forget do fade them back in onEnterBack. Happy scrolling!

 

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

 

 

[jenda]

Hello @akapowl, thank you very much for your quick and helpful response.

 

I'm just curious how I can tell to the .main-number to finish the pinning effect at the end of .contents or at the begining of the follow HTML element in DOM - let's say something very common like .contents + *.

 

At the moment you use as endTrigger section.two. Is it possible to use it I would like to (.contents + *)? I've already tried it but it didn't work. 

[akapowl]

Looks like you could do that...

 

See the Pen 828080bdab8763ab9ea4ef53c0aca3e4 by akapowl (@akapowl) on CodePen

 

 

 

...you might just want to refresh your knowledge about CSS selectors & combinators a bit.

 

.contents > * would actually select all elements that are direct children of .contents.

 

What your probably looking for is contents + *

 

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors

 

See the Pen 852325f2af19a0b2d7c3c3d76782ff2d by akapowl (@akapowl) on CodePen

 

 

 

But you could also just spare the endTrigger, leave it based on the trigger and adjust the end to when the bottom of that .contents section hits a certain spot up top. For more info please check the ScrollTrigger documentation.

 

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

 

[jenda]

@akapowl yes, you are right. I ment .contents +, of course 

 

Thank you.

[jenda]

Hello, 

 

unfortunatelly, we have a problem with playing videos that dynamically change their height althought they have a height value from the begining so that this GSAP animation change its start constantly. Is there a trick to avoid this behaviour? 

[OSUblake]

No, you will probably need to call ScrollTrigger.refresh() when they change the height.