Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Kurrent Kurt

Best Practice for Setting Vars in the Timeline

Recommended Posts

Hi. With using sprite sheets I wanted to just set the width, height and background-position properties in CSS and set the rest in javascript with TimelineLite or TimelineMax.


Is there a best practice for this?


I want to do something like in the following example:

I set all the images to hidden to start then animate with fromTo as needed.


I made an example here with 3 different colored boxes, which works great on all browsers.

See the Pen jbKWJg by anon (@anon) on CodePen


The issue I am having is that on a DoubleClick banner example using the same technique I am having problems when I restart the timeline just in IE10. When I call tl.restart, any of the fromTo images with immediateRender:false are visible from the beginning instead of having autoAlpha:0.


Thanks in advance,




Link to comment
Share on other sites

I saw a couple of problems with that demo: 

  1. You're setting immediateRender in the wrong place (the "from" vars instead of the "to" vars). Any special properties like onComplete, immediateRender, etc. should always be in the "to" vars object. 
  2. You mentioned that just the blue one has immediateRender:false...but the code shows that ALL of them have it. 

I also tried it in IE10 and it seemed to work exactly the way it did in Chrome (or any browser) which I guess you did say in your post (that it works great across browsers). Do you have an example that doesn't work?

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.