Jump to content

Justin Erswell

Scene Building with GSAP & Pinning

Recommended Posts

Hi there GSAP crew!


I have two elements that I want to use ScrollTrigger on in the demo here. However I need to slow the process down so that the user sees the logo shrinking and the zoom effect is smooth through to the next content. I have tried to Pin


var tl2 = gsap.timeline({});

But when I do this it stops the scroll animation completely.


Also I am not sure I am chaining the sections correctly, any advise here would be great, thanks

See the Pen ExvpdEg by erswelljustin (@erswelljustin) on CodePen

Link to comment
Share on other sites

Hey there @Justin Erswell,

There's a lot going on here and I'm not really certain what you're aiming for?

Could you maybe explain step by step? Or maybe we can help explain a concept to you if somethings happening that you're not expecting?

Link to comment
Share on other sites

Hey @Cassie 


Sure thing and apologies for not being totally clear!


These are the steps I am hoping to go through:

  1. User is presented with grey screen and logo (purple)
  2. Starts scrolling
    1. The purple logo's width reduces to only show the white 'LINK'
    2. The section fades away to show the mask 'LINK'
    3. Link scales, as if 'flying through' 
    4. User then scrolls through an array of images, like a 'Flip book' with text coming in and out at various points

2.4 isn't an issue however 2.1 - 2.3 happens too quickly and we don't see the full effect. What I am trying to achieve is the stepped process with the scroll and that it is slowed enough to create the feeling of control with the scroll and for the user to clearly see each animation / transition.


I hope that clarifies things, again many thanks for your help!

Link to comment
Share on other sites

I'm not sure I totally get what you're going for here, but if you want a scrubbed scroll-linked animation to last longer, you simply adjust the "end" value. You can use a relative value like end: "+=2000" to make it last 2000px, for example. Also, you might want to consider using ExpoScaleEase for your zoom so that it spreads things more evenly: 

See the Pen QWMZKWK?editors=0010 by GreenSock (@GreenSock) on CodePen


I hope that helps. 

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.