Jump to content

Alain Nobilito

[ScrollTrigger] How to keep element pinned after end of scroll trigger

Recommended Posts

I made that pen : i want my 2nd half of my cat to go at the top, meet the first half and then go to the left of the screen and stay here. But I don't really know how to keep the 2nd part of my cat pinned after the end of scroll trigger evenement.


Does anyone know how to do that ? Thank you a lot ;) 


(My first solution was to put the end of the trigger far far away the start :) it kinda works but when i reverse scroll, the reverse animation starts immediately and it's not what i want :( )

See the Pen jOYMreO by alain-nobilito (@alain-nobilito) on CodePen

Link to comment
Share on other sites

Hello Alain,


Here's how I would approach that task:


create two different ScrollTriggers:

  • one that only handles the tweening for whatever scroll-length you want it to be scrubbed
  • and one that only handles the pinning of that second cat, extended to last over the whole length of the page-scroll



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




Some more notes on that:

  • avoid tweening on the element you use as a trigger if your tweens are going to change the dimensions of that element - this will likely throw things off with the start/end calculations of ScrollTrigger. Instead you could use the .cat as the trigger and tween on the img inside.
  • Scrub and toggleActions don't work side by side - they are different ways for ScrollTrigger to control a connected tween. So if you set both, scrub will always take the control over the tween/timeline connected.
  • I made a couple of changes to the HTML markup / CSS styling of things for my example here, as it made things a bit more concise (for me) - and having some solid base layout is one of the most important things for scrollbased animations in particular.


On a different note:

You will notice, when scrolling down and then back up to the top (even in a rather usual speed), that the scrolling back into place of the 2nd cat will start before the tweens/timeline attached to the ScrollTrigger have finished. That is because of the scrub being set to 1, so it will take the tweens/timeline 1 econd to catch up to the actual scroll-position.


If you want it to be smooth like that but still synced, you would have to use a 'scrub: true' alongside some sort of smooth-scrolling. Here is that same example with the ScrollTrigger-native smoothScroll() helper function included, to show the difference. You can find that helper function in the .scrollerProxy() docs (1st example in there).


I hope all this will help a bit.


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

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

WOW, very nice. Thank you a lot.


It will help me a lot : it's exactly what i need.

I'm going to dive into your code to understand deeper the usage of ScrollTrigger.


Again, thanks a lot for your detailed answer ;) 


(oh, and sorry if my english is not perfect : i try my best 😋)

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