Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
lateek35

Tween in my timeline doesn't reverse

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 !

 

I've created a timeline and add this specific tween. Everything work well when I fired 

myTimeline.play();

The problem is when I fired the reverse() function, open var doesn't decrease and stay at 31.

Here the part of the code which doesn't reverse

 

var tweenValues = { open : 1 };
myTimeline.fromTo(tweenValues, 2, { open: 1}, { open: 31, onUpdate:function(){
    var srcCeil = Math.ceil(tweenValues.open);
    target.src = './img/img'+ srcCeil +'.png';
});

 

If any of you have an idea ? :)

Thanks !

Link to post
Share on other sites

Hi lateek35 :)

 

Welcome to the forums.

 

Are you reversing after you play like this:

var myTimeline = new TimelineMax( {paused:true, onComplete: function() {myTimeline.reverse()}});
myTimeline.play();

or did you mean that you just want to reverse the tween without playing it first. If you want to do that, you could try this:

// reverse from two seconds
myTimeline.reverse(2);

// or you could set the timeline to reversed and then just a reverse() should work
var myTimeline = new TimelineMax( {paused:true,reversed:true});
myTimeline.reverse();

Hopefully that helps a bit. For future questions or more detailed answers, a CodePen example will get you the best information. Please check out this link to learn more about creating one:

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Happy tweening and welcome aboard.

:)

  • Like 3
Link to post
Share on other sites

Ok I finally found the problem !
In fact, I didn't gave you the part of code where the problem was.
I was creating the timeline in a for loop, and using "i" for select some object etc. Use a closure was the key to solve the scope state problem of "i" :)

Link to post
Share on other sites

Hi lateek35  :)

 

at first you don't need to use Math.ceil() , you just need to add roundProps : ' property ' to your tweens ;

 

pls check RoundPropsPlugin Doc :  http://greensock.com/docs#/HTML5/Plugins/RoundPropsPlugin/

 

and pls check this out : 

See the Pen adLBQK by MAW (@MAW) on CodePen

 

pls fork above codepen demo with simple shape of your code , if still have any problem .

  • Like 3
Link to post
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.

×