Jump to content
Search Community

Same object, different "timeline" for different properties

Gledsley Muller 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 text (blockquote) that should move from right to left constantly. It should start with opacity 0 then go to opacity 1 in 2 seconds. After that, it should keep moving constantly (same speed) for about 10 seconds and then fade out (back to opacity 0) but keep moving in the same speed.


I've tried this way, but it doesn't get the correct movement I want:


var tl = new TimelineLite();
tl.to('.quote1', 2, { opacity:1, right:"+=50px", delay:3 })
.to('.quote1', 10, { right:"+=150px" })
.to('.quote1', 3, { opacity:0, right:"+=50px" });
What I want to know is if it's possible to have a timeline for each property (e.g. "right" and "opacity") or if there is a better way to achieve the same result with only the object timeline...
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


By default each Tween has a Quad.easeOut ease applied. So since you have 3 tweens of various durations that change the right property you are probably getting un-wanted results of the object moving fast > slow, fast > slow, fast > slow.


One solution is to put all the motion in a single tween and handle the opacity separately. Timeline's make it easy to have the opacity tweens overlap with the motion tween like so:


var tl = new TimelineLite({})

tl.to("div", 1, {autoAlpha:1})
  //start the positional tween at time of 0
  .to("div", 3, {left:500, ease:Linear.easeNone}, 0)
  //begin fade out 1 second before positional tween ends
  .to("div", 1, {autoAlpha:0}, "-=1")



Instead of using 2 tweens for the autoAlpha (opacity and visibility) fade in and out effect you could also use a single TweenMax tween with repeat:1, yoyo:true, repeatDelay:1 OR a TweenLite using a SlowMo ease with yoyoMode:true. 


I wanted to make sure this was the general effect you were after though before providing a ton of options.


Let us know if the example above is close to what you needed.

Link to comment
Share on other sites

Hi Carl,


Thanks a lot for your answer, it works like a charm!


I didn't know there was a default value for the tween, but I kind of got that impression. 


I had used greensock for flash but this is the first time I'm using the js version of it. Pretty cool stuff!


Once again, thanks a lot for the help!

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...