Animate element from being pinned to its original position

[emattias]

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 😕

[mvaneijgen]

Where is your

See the Pen by pen (@pen) on CodePen

 example? 

[emattias]

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

[mvaneijgen]

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

[emattias]

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?

[mikel]

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

[emattias]

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 😅)?

[mikel]

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

[emattias]

Thanks! For me the heading disappears before being moved to original position. 😕

[mikel]

 

Yes it disappears but i have no idea why.

[ZachSaucier]

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

[mikel]

 

Thanks, ZACH.