Jump to content
Search Community

get css method? (and other things)

bawwb 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 know you can set css props with the TweenLite.set method, but was curious if there was somethin similar to a get property, like if you wanted to get a css prop of an element while it was tweening during an onUpdate or something?

 

it doesn't bother me that much to use a jquery.css method or getComputedStyle method, i was just wonderin this since (even though this is my first project working with tweenlite) i'm tending to set css props with set(), animate them as needed with to() or from() or whatever, but wasn't sure if there was a method for get(). ya know, to keep it all the css manipulation in the same family sorta speak.....

 

or on that note, is it beneficial to use TweenLite's set() method over jquery.css() if you have both libraries loaded?

 

_bob

Link to comment
Share on other sites

Hi, 

 

Thanks for the question. Currently there isn't a get. The methods you are using with jQuery and getComputedStyle are fine to use. 

 

As for setting those values (without a tween) I would recommend TweenLite's set() as it offers many conveniences like:

 

 

 

TweenLite.set(element, {rotationY:360, transformPerspective:300, borderRadius:"20px"})
 
Link to comment
Share on other sites

 

or on that note, is it beneficial to use TweenLite's set() method over jquery.css() if you have both libraries loaded?

 

I'd probably stick with TweenLite.set() because it gives you more properties. For example, autoAlpha, individual 2D or 3D transforms, etc. I'm not aware of any that jQuery handles but GSAP doesn't (if you stumble across any, let us know). 

 

Happy tweening!

Link to comment
Share on other sites

Hi,

 

In order to get the properties being animated you could use this:

var div1 = $("div#div1"),
log = $("div#log");

TweenMax.to(div1, 2, {top:400, left:400, onUpdate:updateFn, onUpdateParams:['{self}']});

function updateFn(tween)
{
    log.html('top: ' + tween.target.css('top') + '  //  ' + 'left: ' + tween.target.css('left'));
}

You can see it working here:

 

http://jsfiddle.net/rhernando/rLDTu/1/

 

Cheers,

Rodrigo.

  • Like 2
Link to comment
Share on other sites

  • 1 year later...

Hi Praney,

 

Just like the code posted above.

 

Keep in mind that you could also add an onComplete callback to a set instance so it'd basicaly be like this:

var div1 = $("div#div1"),
    t = TweenLite.set(div1, {top:300, left:300, onComplete:updateFn});

function updateFn()
{
    console.log('top: ' + div1.css('top') + '  //  ' + 'left: ' + div1.css('left'));
}

That should do it.

 

Rodrigo.

Link to comment
Share on other sites

a1 is not a DOM element, it's a jQuery collection. You can get the actual element a few ways, but a pretty easy one is a1[0] (a jQuery collection is just a fancy array).
 
Also, just remember that _gsTransform won't exist until you've used GSAP to apply a transform to the object (tweening something like color or left is not enough), so for safety you might want to do something like this:


if (a1[0]._gsTransform) { // check if its undefined first
  a1[0]._gsTransform.rotation; // etc
}
  • 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.
×
×
  • Create New...