Jump to content
GreenSock

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

TimlinelineLite resets

Recommended Posts

I have a TimelineLite tween sequence that has an element tweening in the from the right, then later tweening off to the left with the opacity tweening to 0. Once the element's opacity tweens to 0 (on the way out) I'd like to reset the element's position to it's original position. 

 

Here's how I'm attempt to do so, which isn't working:

var tl = new TimelineLite();
tl.to("#element", 1, {left: "-=50px", autoAlpha:1})
.add("elementOutLabel", "+=2")
.to("#element", 0.5, {left: "-=50px", autoAlpha:0}, "elementOutLabel+=1")
.set("#element", {left: "+=50px"});
}

Can someone explain to me why this position reset isn't working for me?

 

Share this post


Link to post
Share on other sites

Hi

 

Perhaps the issue is that you're subtracting 50px twice and adding 50px just once.

 

Also keep in mind that you're using a zero duration tween, which is a tricky business inside a timeline, try adding immediateRender:false to the vars.

 

Best

Rodrigo

Share this post


Link to post
Share on other sites

Mid point is reached after the first 50px shift. That's not the issue. You did give me the idea however to add an onComplete function taking the reposition outside of the tween. 

 

In terms of your "immediateRender" idea, does that look like this?

.set("#element", {left: "+=50px"}, {immediateRender: false});

Share this post


Link to post
Share on other sites

Hi,

 

The immediateRender goes in the vars object like properties, callbacks and easing functions, no need to add another object to the constructor, like this:

.set("#element", {left:"+=50px", immediateRender:false});

Also it seems that you're aiming to a content slider, isn't it?. Perhaps you could check this codepen by Chrysto for some inspiration:

 

See the Pen LckBh by bassta (@bassta) on CodePen

 

You could customize that code to fit your needs.

 

Best,

Rodrigo.

  • Like 1

Share this post


Link to post
Share on other sites

I have to agree with Rodrigo's assessment. If you subtract 50 from the left position twice, you will need to add 100 to get it back to its original position.

 

Your final set() only returns the element to what you are describing as the mid point. 

 

Like always it helps to actually see what is happening, so please take a look at this codepen:

http://codepen.io/GreenSock/pen/b0a595d937a1fe9669b9a5cff14dddd3

 

I removed the autoAlpha:0 so that you can see that the last set() only moves the element +50px to the right, but the timeline moves it -50px left twice.

 

The logo (element) starts at a left position of 200. Moving it -50px twice is going to subtract 100 from its original position and leave it at a left of 100. Your last set() puts it at a left of 150. 

 

2 good solutions:

 

1) simply change the last set() to left:"+=100". 

 

2) remove the "left" inline style that TweenLite created using clearProps:"left"

.set("#logo", {clearProps:"left"}); 

 

You can see the second solution here: 

http://codepen.io/GreenSock/pen/982deed627ce0607b52d80ed5ae6b9c8

 

If this doesn't help feel free to fork one of the codepen demos so that we can better see exactly what the problem is. It very well may be that both of us are missing something.

 

 

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×