Jump to content
GreenSock

friendlygiraffe

Using .set in a timeline

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

Hi,

 

For some reason, using .set within a timeline doesn't trigger. (see codepen)

 

However, if I move the .set command to the start of the timeline, it does work:

tl.set("#circle1", {autoAlpha:1})
.from("#circle1", 2.5, {scale:0.5, autoAlpha:0, ease:Power4.easeOut})

Any ideas why?

 

Thanks

See the Pen RRwbRN by friendlygiraffe (@friendlygiraffe) on CodePen

Link to comment
Share on other sites

Thanks for the demo.

 

A little tip: Give the elements that you are tweening descriptive IDs so that we don't have to study the css. For instance: #redCircle and #greenCircle much better than #circle1 and #circle2. 

 

I'm guessing the problem has to do with how immediateRender is working (properly).

 

If you remove the last from() tween, you will see the set() works fine

 

var tl = new TimelineMax({repeat:-1, repeatDelay:1})
tl.from("#circle2",1, {autoAlpha:1})
.set("#circle1", {autoAlpha:1})
//.from("#circle1", 2.5, {scale:0.5, autoAlpha:0, ease:Power4.easeOut})

however, when you add the from() tween back in remember that from() tweens will immediately render and record starting and ending values.

 

Your css says that #circle1 (RED) should have an opacity:0 and your from tween says tween from autoAlpha:0 so basically you are creating a tween that animates the opacity from 0 to 0 (does nothing).

 

Your set() is working but the problem is that you set autoAlpha:1 and then immediately start your tween from opacity:0 to autoAlpha:0 (hiding the element from view).

 

Test this code that moves the from() tween to the 2-second position

 

var tl = new TimelineMax({repeat:-1, repeatDelay:1})
tl.from("#circle2",1, {autoAlpha:1})
.set("#circle1", {autoAlpha:1})
.from("#circle1", 2.5, {scale:0.5, autoAlpha:0, ease:Power4.easeOut}, 2)

you will notice that you do see the red circle with autoAlpha:1 for 1 second before the "nothing" tween sets the opacity back to 0.

 

my guess is that you want immediateRender:false on the from tween:

var tl = new TimelineMax({repeat:-1, repeatDelay:1})
tl.from("#circle2",1, {autoAlpha:1})
.set("#circle1", {autoAlpha:1})
.from("#circle1", 2.5, {scale:0.5, autoAlpha:0, ease:Power4.easeOut, immediateRender:false})

This is probably one of the trickier concepts in the platform. Check out the immediateRender video: 

 

  • Like 3
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.
×