Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jenda

ScrollTrigger with pinned year numbers

Go to solution Solved by akapowl,

Recommended Posts

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

Link to comment
Share on other sites

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



 

  • Like 6
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

  • Solution

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

 

 

  • Like 5
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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

 

  • Like 2
Link to comment
Share on other sites

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

 

Thank you.

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