Jump to content
GreenSock

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

get css method? (and other things)

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...

Just digging this old post to see if there is a .get() method or similar to get css properties set using the .set() method?

It would be really helpful.

 

Praney

Link to comment
Share on other sites

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

And if you're looking for transform-related properties, you can access those in the _gsTransform object that GSAP adds to elements whose transforms it affects. 

var rotation = element._gsTransform.rotation; //or scaleX, scaleY, x, y, etc.
  • Like 1
Link to comment
Share on other sites

Thanks Rodrigo and Jack,

 

Jack, that is great, but would it return 3d transform properties too?

 

As I was trying to get / set css values of an element and bind them to a scrubber.

 

Thanks,

Praney

Link to comment
Share on other sites

Sure, if the element has 3D transforms applied, you can get those properties too in the _gsTransform object. z, rotationX, and rotationY.

Link to comment
Share on other sites

Thanks Jack,

 

I thought I'll just play with the _gsTransform object. But eI keep getting this error "Uncaught TypeError: Cannot read property 'rotation' of undefined ".

Here is a codepen: 

See the Pen Krcqb by praneybehl (@praneybehl) on CodePen

 

Hope its just me doing something wrong.

 

Praney

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

Ok I figured out, I am using jQuery so need to use a1[0]._gsTransform .

 

Thanks.

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.
×