Jump to content


Consecutive pins

Moderator Tag

Recommended Posts

Hi, is it possible to have consecutive scrolltriggers where the first uses pinspacing?


The effect I am trying to achieve is the following:


Pin the #hero element (with pinspacing) for the duration of the timeline. When that has finished, pin the #hero element (without pinspacing) so that the #content element scrolls over the top of the #hero element



See the Pen GRXmywz by sleelss (@sleelss) on CodePen

Link to comment
Share on other sites

Hi there!


So I'd probably just make the hero position:fixed and then pin the second section for a while

Something like this? Is that what you're after?

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

  • Like 1
Link to comment
Share on other sites



You have a syntax issue in your ScrollTrigger configuration:

// Wrong
pinspacing: false,
// Correct camelCase
pinSpacing: false,

Also instead of creating two consecutive ScrollTrigger instances, which certainly opens a can of worms, just create one with no pinspacing, add an extra DOM element that is empty and transparent (you can even play with the z-index in order to have it behind the hero section just in case) and add an extra dummy tween in the timeline. Here is a live example:

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


Happy Tweening!

Link to comment
Share on other sites

Thank you both! Both options worked but I needed more pins in the #content div so went with the second one.


I like the dummy tween technique. I've been looking for something like that for a while. Is there any documentation about it?

Link to comment
Share on other sites

1 hour ago, longstoryshort said:

Is there any documentation about it?

Not really, is just one of the ways to add some extra time at a specific point of a Timeline. You can add a label x seconds after the last instance or use a call method to call a function that does nothing or add a dummy tween. I fyou get creative you can definitely come up with more ways, but the main objective is, in this particular case, to extend the duration of the timeline to give extra scrolling space after the rotation animation is completed.


Hopefully this clear things up.

Happy Tweening!

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.