Jump to content
GreenSock

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

Timeline mixed usage of .to and .fromTo possible?

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

Hey all,

 

I'm currently playing with the timeline and setting up a sequence of animations.

So far i've used tl.to in my sequencing and all went good. I then wanted to implement .fromTo however that seemed to mess up my timeline.

 

My objective is fairly simple, summarized in the following steps.

 

1. I do some initial CSS tweening

2. I fade up some text

3. I tween my div to the outer right

4. I change up some text

5. ISSUE: I now want to re-position my div to the outer left and tween it into center again.

 

Ive set up an illustrative codepen example here:

See the Pen IeLrF by mrsgs (@mrsgs) on CodePen

 

Note: uncomment line 15 to see the issue apply

 

Share this post


Link to post
Share on other sites

Thanks so much for providing the codepen example along with your clear description.

 

The issue is that from() and fromTo() tweens have their immediateRender property set to true by default. 

 

To fix the issue just set immediateRender:false in the troublesome tween like so:

.fromTo("#html5-entry-timeline", 1.5, {left:-800}, {left:100, immediateRender:false});

fixed: http://codepen.io/GreenSock/pen/ChqvA

 

 

The short story of why immediateRender is set to true for from() and fromTo() tweens by default can be witnessed here: http://codepen.io/GreenSock/pen/Amnrc

 

In your case your fromTo() tween at the end had immediateRender set to true so the left position was set immediately, thus messing with your animation.

 

For the most part, immediateRender's default value of true only really becomes an issue if you are doing multiple from() tweens on the same properties of the same object.

  • Like 3

Share this post


Link to post
Share on other sites

Hi Carl - never got back to you on this one.

 

Thanks for contributing with your throughout description of the "issue", it makes sence to me and your "fix" got my timeline going as intended now - i'd probably never figured that out if you hadn't come a long :)

Again thanks - you're doing some overwhelming quick support here!

 

A good weekend to you sir!

  • Like 1

Share this post


Link to post
Share on other sites

Thank you Mr Sam. Its always good to know when our support is appreciated. 

Fortunately we have a strong community of folks that pitch in, help lighten the load, and provide world-class support. 

  • Like 2

Share this post


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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×