Jump to content
Search Community

Any way to know the destination Tweened Value before the Tween Start ?

artistsweb 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

Hello Guys,

I'd like to know if there is any way to get the destination value of a Tween before it start ?

Simplified example:

TweenMax.to(elem, 1, { width: '90%'});

Is there a way to get the width destination in pixel of 'elem' before the Tween start ? If elem is 1000px can I get 900 somehow in the tween Object maybe ?

I can't figure it out :(

Many Thanks,


Link to comment
Share on other sites

Hi and welcome to the GreenSock forums. 


If I understand correctly, you can advance the tween to its end (complete) state by setting its progress to 1. 

Then you grab the computedStyle (which will be in pixels)

And then set the tween back to the beginning progress(0) or play(0) 

var element = document.getElementById("demo");
var t = TweenMax.to(element, 1, {width:"50%"});
document.getElementById("message").innerHTML = window.getComputedStyle(element,null).getPropertyValue("width")


See the Pen NgRMxj?editors=0011 by GreenSock (@GreenSock) on CodePen


  • Like 4
Link to comment
Share on other sites

Thank you very much Carl, getComputedStyle() and getPropertyValue() were exactly what I needed! 
I was looking for those value in the TweenMax Object and didn't think to use basic javascript :)

Problem solved, thanks guys !

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