Jump to content
Search Community

Vue callback done doesn't work correctly with TweenMax onComplete

Irine_pospeliri test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello, everyone who like GreenSock animation :)

I have a problem with Vue callback done and TweenMax onComplete.

When click on step, the animation on the next step start before,  animation end on previous step.(pls check the link https://codepen.io/anon/pen/qMOGKV).

The animation is overlay of each other.

I expected, when you click on step is to see animation step by step, becouse i use callback done.

 

Please help, maybe i do something wrong :)

See the Pen qMOGKV by anon (@anon) on CodePen

Link to comment
Share on other sites

Hi Irine,

 

Welcome to the forums!

 

I am finding a bit difficult to understand your description of the issue here so, forgive me if it is not what you meant.

 

I would say you have over eningeneered your setup a bit. You don't need all those different <transition> tags. And that's pretty much the reason why your animation is overlaping. Because all those <transition> tags are independent and they do not have the means to talk to each other.

 

To achieve what, I believe, you intend, you need to have all your elements inside the same <transition> tag.

 

See the bellow fork of your pen:

 

See the Pen mGVJZa by dipscom (@dipscom) on CodePen

 

You might want to go over Vue's transition documentation, if you haven't already, they will explain all the key concepts in detail there.

 

https://vuejs.org/v2/guide/transitions.html

 

  • Like 5
Link to comment
Share on other sites

Yep. Less code.

 

The key is so that Vue will know they are different components. The single transition tag is so that it knows when the component has left or finished animating.

 

You can't have two transition tags talking to each other. I have a ton of headeache whenever I forget this and end up nesting two transition tags.

  • Like 1
Link to comment
Share on other sites

Dipscom, i have one more question, how you change animation on media screen in vue use GreenSock.

I mean if i use CSS animation in Vue, it is pretty simple i just use a media screen for current animation class.

something like this:

.step-leave-to

  transform: translateX(100%)

  @madia only screen and (max-width: 767px)

      transform: translateY(-100%)

but how i can "switch" animation on media < 767px in GreenSock ?

 

   

 

 

Link to comment
Share on other sites

For that you will want to use the Window.matchMedia() method.

 

if (window.matchMedia("(min-width: 400px)").matches) {
  /* the viewport is at least 400 pixels wide */
  TweenMax.to(el, 2, { x: '-100%', ease:Power1.easeInOut, onComplete: done });
} else {
  /* the viewport is less than 400 pixels wide */
  TweenMax.to(el, 2, { x: '-400px', ease:Power1.easeInOut, onComplete: done });
}

 

  • Like 3
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...