Jump to content
GreenSock

piyush walia

Interchanging classes doesn't clear previous tween values

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

I am working on some sort of animation so I have prepared a demo which relates exactly to the task. I am inter-changing the classes after the first timeline completes and running another timeline when the user clicks the second time.  The problem is when the second timeline is played, the tween adds the previous tween values to the element which I am tweening on the second click.  If you look at the codepen example, when running second timeline i.e home_slide_2, the block_1 element is taking x value from the previous tween making animte both x and y values. Can anyone guide me on this that what I am doing wrong here.

See the Pen gzKPXX by piyushwalia (@piyushwalia) on CodePen

Link to comment
Share on other sites

Hi @piyush walia :)

 

If I understand your question correctly, I'd recommend using clearProps rather than jQuery's removeAttr() method. I think if you change your reset function a bit, you should see the desired behavior. Please try this:

 

function reset(){
  TweenLite.set(".block_1, .av2", {clearProps:"all"});
  $(".block_1").addClass('block_2').removeClass('block_1'); 
  $(".av2").addClass('block_1').removeClass('block_2');
};  

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 4
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.
×