Jump to content
GreenSock

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

Scrolltrigger pin help

Go to solution Solved by akapowl,

Recommended Posts

Hi everyone! I've just started out using ScrollTrigger and just trying to wrap my head around this one animation. I would greatly appreciate any help. So I have a main pinned element that scrubs through and animation in a timeline, after the animation ends I'd like the main intro element to remained pinned and the rest of the content to scroll on top. To this effect I've positioned the initial element as fixed. However, as you can see in the codepen demo, at the end of the timeline animation the first element abruptly translates down. Though it seems to be getting the translateY value from the "end" property, I don't completely understand why it doesn't just keep the value it had and if there's something in the animation that's having this effect.

See the Pen ExWxvzN by leode5a7 (@leode5a7) on CodePen

Link to comment
Share on other sites

  • Solution

 

Hey @leode5a7

 

That is probably because of a change of context for the position fixed when the pin is released.

I wouldn't recomment pinning fixed elements (usually that doesn't make much sense anyway).

 

Here's how you could go about that effect you described with the .splash section remaining postion relative.

 

Set up two ScrollTriggers; one that handles the animation for whatever amount of scroll you want, and one that only handles the pinning for the amount of the animation's ScrollTrigger's 'duration' plus the window's height. Additionaly you set a margin-top of -100vh to your .content and you should be good. Maybe something like this:

 

See the Pen 274c3f7a269a327db37dcd069fd6ed20 by akapowl (@akapowl) on CodePen

 

 

On a different note: 

  • end: 600 is not a proper declaration for an end value. You probably want to use something like end: '+=600px" or 'top 600px'
  • also the ease you defined in your defaults is not valid - it should be 'power1.out' instead of 'power1.easeout'. But since that is the default ease applied by GSAP anyway, there is no actual need to define it as a default.

 

Hope this helps.

Cheers

 

  • Like 3
Link to comment
Share on other sites

Thank you! This gets me on the right track :)

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

×