Jump to content

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

correct fromTo with css plugin

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 gs forums I'm having a lot of trouble with the css plugin. Hoping you can help. I have an absolute positioned element and I need to use fromTo on top, left and rotate. Where am I going wrong?


TweenLite.fromTo(photo, 1, css:{left: '50', top:'100', rotation:0}, css:{left: '55', top:'382', rotation:7, ease:Expo.easeOut, onComplete:function(){}});

  • Like 1
Link to comment
Share on other sites



Sorry to hear you are having trouble. You just have a few innocent syntax errors.


For a fromTo() tween there are a few nested objects which makes keeping track of the {} a bit difficult at first. Once you understand it, you will be fine.


First, a JavaScript object typically looks like this:


{someProperty:someValue, someOtherProperty:SomeOtherValue}


{name:'carl', favoriteColor:'green'}


When you do most GSAP tweens you pass in a "vars" object which holds information on the properties being tweened, and special properties that apply to the tween itself. The vars object is wrapped in {} because it is well, an object:)


TweenLite.to(elem, 1, { width:200, height:200, ease:Bounce.easeOut, delay:1 })

//note width and height can be dir ectly tweened on an <img> but not a <div>



Note, the object above contains properties that are being tweened, like width and height BUT also other properties like delay and ease which are specific to the tween.


When you use the css plugin, you have to further nest the css properties in an object inside the vars object like so:


TweenLite.to( elem, 1, { css: { left:200, top:200 }, ease:Bounce.easeOut, delay:1 } )


Note, the css object is now inside the vars object, after the css object is closed with } you then add the rest of the special properties like ease, delay, callbacks, etc.


When you do a fromTo() tween it gets more complicated because now there are 2 vars objects:


TweenLite.fromTo(elem, 1, {startingVars}, {endingVars});


Without the css plugin it would look like this:


TweenLite.fromTo(elem, 1, {width:100, height:100}, {width:200, height:200, ease:Bounce.easeOut, delay:1});


With the css plugin, each vars object will have a css object inside it.


TweenLite.fromTo(elem, 1, {css:{left:0, top:100}}, {css:{left:200, top:200}, ease:Bounce.easeOut, delay:1});


The red brackets denote the startingVars and endingVars. Notice, that only the ending vars have the ease and delay.


Hopefully this will help you understand a bit better how the nesting works.


Here is a working example of your code: http://jsfiddle.net/geekambassador/WLkJE/ (hit run)

TweenLite.fromTo(photo, 1, {css:{left: 50, top:100, rotation:0}}, {css:{left:55, top:382, rotation:180}, ease:Expo.easeOut}); ​


So in a nutshell, fromTo() has a bunch of {} to manage. You missed 1 or 2 which happens to the best of us.



  • Like 2
Link to comment
Share on other sites

Carl, thats twice in two days you've saved my butt!!! I'll try to get in a jam tomorrow so you can make it a hat-trick :). Thanks a million - where can I buy you a virtual beer?

  • Like 1
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.