ScrollTrigger - Unable to animate element in bottom and out of top of page

[sixtillnine]

I'm trying to animate an element when it enters into the page, and animate it as it's about to leave - I'd like each to scrub (so the element disappears and reappears accordingly).

 

The entrance animation works on it's own, and the exit animation works on it's own - however when I apply the two the 'exit' animation doesn't work, it simply disappears.

 

Any ideas?

 

 

See the Pen QWKQxdw by sixtillnine (@sixtillnine) on CodePen.

[akapowl]

Hey  @sixtillnine

 

Since you are using .from()-tweens, their states interfere due to how GSAP records things beforehand.

 

Simply adding immediateRender: false to your seccond tween resolves the issue

 

See the Pen 7d3132c93e3ef6e2c0539fdb2af1ad34 by akapowl (@akapowl) on CodePen.

 

 

You can read more about that in the docs

[sixtillnine]

Thanks, that's done the trick.