Jump to content
Search Community

TimlinelineLite resets

isaballoon 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

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?

 

Link to comment
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

Link to comment
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});
Link to comment
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
Link to comment
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
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...