Jump to content
Search Community

Tweens with duration = 0 and timeline.

bokan 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 just notice an inconsistent behaviour.

 

Tweens with duration = 0 immediately sets final value. This is not consistent when queuing them in timeline.

 

I understand that it is an optimisation, but it should not do that when tween is queued.

Link to comment
Share on other sites

Hi,

 

Mhh, that's odd, the latest version does enqueue the set instances properly:

 

See the Pen raOEbg by rhernando (@rhernando) on CodePen

 

As you can see the blue box waits it's turn to move immeditely to the right of the container. Please fork and adapt the codepen to your scenario in order to get a better idea of what could be the issue.

 

Finally check that you're using the latest release of the engine. Go to the main page and click the download button or go to the CDNJS page to point to the latest release:

 

Home page: http://greensock.com/

 

CDNJS: https://cdnjs.com/libraries/gsap

  • Like 4
Link to comment
Share on other sites

When a tween is in a timeline, you are specifically telling them to run at a specific time (as Rodrigo illustrated).

If you create a tween on its own (outside of a timeline) with duration of 0, it is going to run immediately, as soon as it is created.

Perhaps I am misunderstanding your scenario, I'm sure a demonstration will clear things up. Thanks!

 

further note: using set() in a timeline automatically sets the tween's immediateRender property to false.

  • Like 4
Link to comment
Share on other sites

My code was like this

tl.add(some stuff here)  
.add(some stuff here)
.add([
     TweenMax.to(this.theclip,0, { alpha: 1 }),
     TweenMax.to(another tween)
])
.add(some stuff here)
...

I solved this by using set method of timeline object like in the codepen you gave me.

 

Thank you

Link to comment
Share on other sites

Ok, just to clarify what's going on here: it's as Rodrigo and Carl suspected. You were creating the 0 duration tweens "outside" of the timeline. When you create a TweenMax.to(), then .add() it to a timeline, that's two steps, and by the time the timeline is told to add() the tween, it's already been created and rendered the change (since it was 0 duration).

 

The solution as you've found is to use the inbuilt .to(), .from(), .set() etc functions of timelines (with the benefit of having to write much less code). You could also modify the tweens to use immediateRender:false, which is what the timeline's built-in methods does for you. i.e.

timeline.add(TweenMax.to(foo, 0, { bar: 1, immediateRender: false }))
// same as
timeline.set(foo, { bar: 1 })
  • 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.
×
×
  • Create New...