Jump to content
Search Community

Retrieving GSAP current value of css property

Rob test
Moderator Tag

Go to solution Solved by jamiejefferson,

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

I'm doing a simple tween on a score bar which tweens the width of a div from 0% to 0-100% depending on the users score in a game.

I want to play a sound when the bar animates and passes various points.

 

I'm struggling to get the % value back out of my tween instance during the onUpdate callback.

 

tween.target is an array containing my div.

 

I can call:

onUpdate: function() {
    # get a numeric percentage value 
    val = parseFloat(this.target[0].style.width)
    if(val > 0 && !played_one) {
       soundManager.play('sfx','score_1');
       played_one = true;
    } else if(val > 50&& !played_two) {
       soundManager.play('sfx','score_2');
       played_two = true;
    } else if(val > 90 && !played_three) {
       soundManager.play('sfx','score_3')
       played_three = true;
    }
}

This solution isn't the most elegant I know.

 

But something really doesn't feel right about "this.target[0].style.width"

I'm not 100% that this is going to give me the current percentage value correctly in all browsers.

I thought there might be a GSAP to give me this value reliably.

Link to comment
Share on other sites

  • Solution

Why don't you feel that value will be accurate? It is the correct way to read style values in javascript.

this   // the tween
target // whatever was passed as the animation target e.g. if it a jQuery object was used that will be returned
[0]    // first element in the jQuery object
style  // javascript object for element styles
width  // the value of the style you want

GSAP does add a _gsTransform property to DOM elements it is tweening if transforms are used so that the transform values don't need to be manually extracted from a matrix. For all other values the style property is used. If you're using something like jQuery etc you could use their methods to access values if you prefer e.g. $(foo).css('width'), but the style property is also fine. The only values that can be wonky to extract from the style property are vendor prefixed styles.

  • Like 3
Link to comment
Share on other sites

Cool thanks guys.

I did try $(target).css('width') but that always returns a px value. 

I recall that element.style.width will not always return the value exactly as it was set in IE. However I've just tried it and it seems OK.

 

So I'll stick with using the style object then.

Thanks for your input guys.

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