Vue.js : JS-Animation-Hooks with GSAP - leave animation not working

Question

I want to use enter/leave transitions in vue.js, using the built in javascript hooks for transitions: https://v2.vuejs.org/v2/guide/transitions.html#JavaScript-Hooks

My animation library of choice is GSAP: https://greensock.com/

Both, my enter function enter: function(el, done) {} and my leave function leave: function(el, done) {} are called correctly.

The enter animation works just fine — but the leave animation doesn't do anything.

I guess it is a GSAP related thing I do not understand yet. I tried resetting the animation and clearing the inline styles of the animated element. Didn't help.

Here is the codepen: https://codepen.io/Sixl/pen/oGwOKW?editors=0011

Answer 1

Here's a fixed version: https://codepen.io/GreenSock/pen/veJGmR?editors=0010

I noticed a few problems:

1. You were calling done() immediately instead of waiting for the animation to complete. I just moved it to an onComplete callback.
2. You created a single timeline that you were adding all your animations to, but that isn't very appropriate in this case because it's not a linear thing - the clicks could happen anytime. So the playhead on the timeline reaches the end of the first animation, and then when you place a new one at the end (much later, when someone clicks), the playhead would already be way past that spot where you're placing it, causing it to jump to the end on the next render (appropriately). It's cleaner to simply use a TweenMax here instead. Or you could create a new TimelineLite each time there's a click (don't worry - it's fast).

--

TweenMax.to(el, 0.5, {
  x: 150,
  autoAlpha: 0,
  scale: 0.5,
  onComplete: done
});

If you have any more questions, don't hesitate to swing by the GreenSock forums. https://greensock.com/forums/ where there's a great community focused on helping people with GSAP questions.

Happy tweening!