leode5a7 Posted May 6, 2021 Share Posted May 6, 2021 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 More sharing options...
Solution akapowl Posted May 6, 2021 Solution Share Posted May 6, 2021 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 3 Link to comment Share on other sites More sharing options...
leode5a7 Posted May 6, 2021 Author Share Posted May 6, 2021 Thank you! This gets me on the right track 1 Link to comment Share on other sites More sharing options...
Dj.Sunrise Posted November 8, 2021 Share Posted November 8, 2021 @akapowl hi, have issue with static content after overlapping sections. Static goes beging overlaping section. Is there way to fix it? See the Pen XWaqbaa by AlibekKulseitov (@AlibekKulseitov) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted November 8, 2021 Share Posted November 8, 2021 Hello @Dj.Sunrise Have you seen this recent thread? I'd just use Cassie's solution for this. See the Pen e76593366cc841a7ef7b3fae38bea5e6 by akapowl (@akapowl) on CodePen 2 Link to comment Share on other sites More sharing options...
Dj.Sunrise Posted November 8, 2021 Share Posted November 8, 2021 10 hours ago, akapowl said: Hello @Dj.Sunrise Have you seen this recent thread? I'd just use Cassie's solution for this. ah sorry thanks!) Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now