emattias Posted August 20, 2020 Share Posted August 20, 2020 Is it possible to have an element be pinned to the bottom of the viewport while scrolling and then after a certain time (or reaching end position) animate it to its original position in the dom? I tried doing: scrollTrigger: { pin: false, }, it the .to() of the pinned target but that did not work 😕 Link to comment Share on other sites More sharing options...
mvaneijgen Posted August 20, 2020 Share Posted August 20, 2020 Where is your See the Pen by pen (@pen) on CodePen example? Link to comment Share on other sites More sharing options...
emattias Posted August 20, 2020 Author Share Posted August 20, 2020 heres it is: See the Pen gOrwypQ by emattias (@emattias) on CodePen I would like the "GSAP Starter Template" to animate to its original position instead of ending in the `end` position Link to comment Share on other sites More sharing options...
mvaneijgen Posted August 20, 2020 Share Posted August 20, 2020 You can use the `onLeave` hook to do something. Check the docs here Example See the Pen gOrwyXy?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen 3 Link to comment Share on other sites More sharing options...
emattias Posted August 20, 2020 Author Share Posted August 20, 2020 nice, thanks! Is it possible to make the end be a certain amount of seconds after the start was triggered rather than a scroll position? Link to comment Share on other sites More sharing options...
mikel Posted August 20, 2020 Share Posted August 20, 2020 Hey @emattias, Welcome to the GreenSock Forum. You could use a delayedCall and e.g. disable the scrollTrigger See the Pen LYNRoEM?editors=1010 by mikeK (@mikeK) on CodePen Happy scrolling ... Mikel 2 Link to comment Share on other sites More sharing options...
emattias Posted August 20, 2020 Author Share Posted August 20, 2020 thanks @mikel but how do I make the move from the pinned state be animated to the original position ( and have the animation work while the user keeps scrolling 😅)? Link to comment Share on other sites More sharing options...
mikel Posted August 20, 2020 Share Posted August 20, 2020 Hey @emattias, I'm not sure if this is a good solution, but it works. See the Pen rNeMgKQ?editors=1010 by mikeK (@mikeK) on CodePen Happy scrolling ... Mikel Link to comment Share on other sites More sharing options...
emattias Posted August 20, 2020 Author Share Posted August 20, 2020 Thanks! For me the heading disappears before being moved to original position. 😕 Link to comment Share on other sites More sharing options...
mikel Posted August 20, 2020 Share Posted August 20, 2020 Yes it disappears but i have no idea why. Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 20, 2020 Share Posted August 20, 2020 The jump in position is caused by the change in position from fixed to relative. This is a good use case of doing the FLIP animation technique. GSAP has a helper function to make it easier: See the Pen poyNgPj?editors=0010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
mikel Posted August 20, 2020 Share Posted August 20, 2020 Thanks, ZACH. 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