Tween in my timeline doesn't reverse

[lateek35 2 Likes (Newbie)]

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 !

[PointC 8,599 Likes (Superhero)]

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.

[Jonathan 5,176 Likes (Superhero)]

Great Answer Craig!

[lateek35 2 Likes (Newbie)]

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"

[Diaco 1,948 Likes (Superhero)]

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 .