Jump to content
GreenSock

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

How to get the calculated styles data of TimelineLite().progress?

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 all,


 


I am new to GreenSock and the forum. It's really amazing. I love it so much.


 


I am trying to use TimelineLite in my new project, but I have encountered a problem about getting the calculated styles of function progress.


 


For example, I have set 'x' from '0' to '200', and when I use the function progress(0.5),I want to get the data '100' of 'x'.


I know maybe I can just get the data from inline styles of DOM, but some properties  such as 'transform',which has transferred to matrix, can not be gotten independently.So I want to know if there is a better way to get the accurate styles data object.


 


Any tips for me?


I am sincerely looking forward to your reply.


Thank you very much.


Link to comment
Share on other sites

GSAP places an object with all the transform values on the element.

var element = document.querySelector("#foo");
var rotation = element._gsTransform.rotation;
var x = element._gsTransform.x;
var y = element._gsTransform.y;

Just make sure GSAP has done a transform on the element before trying to access that object, or you will get an error. You can initialize it like this.

TweenLite.set(element, { x: "+=0" });

And if you're using jQuery you need to unwrap it first.

var x = $("#foo")[0]._gsTransform.x;
  • Like 5
Link to comment
Share on other sites

Hi Sophia  :)

 

Welcome to the forums.

 

Just to add my 2 cents worth to Blake's great answer.

 

In your example, it sounds like you're expecting x to always be at 100 when the timeline progress is at 50%. You have to remember that the only time that would be true would be with a Linear.easeNone applied to the tween. Easing will make a big difference in the x position when the timeline progress is at 50%.

 

Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

 

GSAP places an object with all the transform values on the element.

var element = document.querySelector("#foo");
var rotation = element._gsTransform.rotation;
var x = element._gsTransform.x;
var y = element._gsTransform.y;

Just make sure GSAP has done a transform on the element before trying to access that object, or you will get an error. You can initialize it like this.

TweenLite.set(element, { x: "+=0" });

And if you're using jQuery you need to unwrap it first.

var x = $("#foo")[0]._gsTransform.x;

Thank you very much.It's really helpful to me.

 

But I would also want to know if there is any way to get the calculated data object in the progress only of variable properties.

 

For example, if I just set 'width' and 'borderRadius' in the animation, I want to get the calculated styles data which only include these two properties.

var tl = new TimelineLite();
            document.getElementById('play').onclick = function(){
                //initial width = 0, borderRadius = 0;
                tl.to(box1, 2, {
                    width: '50px',
                    borderRadius: '10px'
                })
            }

            document.getElementById('pause').onclick = function(){
                tl.progress(0.5).pause();
                //if the tween is Linear.easeNone
                //I want to get the object below when the timeline process is at 50%
                //{width: '25px', borderRadius: '5px'}
            }

I'm sorry that my English is not very well, I hope the codes and notes can help to illustrate my question.

 

Thank you very much.

Link to comment
Share on other sites

Hi Sophia  :)

 

Welcome to the forums.

 

Just to add my 2 cents worth to Blake's great answer.

 

In your example, it sounds like you're expecting x to always be at 100 when the timeline progress is at 50%. You have to remember that the only time that would be true would be with a Linear.easeNone applied to the tween. Easing will make a big difference in the x position when the timeline progress is at 50%.

 

Happy tweening.

:)

 

Hi Point C :)

 

Thank you for reminding me of this point.I will work hard to learn more about Tween.

 

I love this forum very much, and you are so friendly.

 

I am trying to use the gsap in my new project, and it runs well on the computer.

But I don't know if it can also runs well on the mobile phone and if I should do something else to improve the performance.

Do you have any advices and suggestions for me in the aspect?

 

Thank you very much.  :)

  • Like 3
Link to comment
Share on other sites

Hi Diaco,

 

That's really a good way to pick value between 2(css) values using TweenLite.

 

But I want to know if there is any more simpler way to get value at some point in the progress of TimelineLite.

 

Because TimelineLite is a container for tweens and other timelines, which manages the sequence and timing, some values(css) may not start changing at the beginning,especially when I want to do some animation seem like the keyframes in css3 animation.

 

For example , see the below pseudo code:

var tl = new TimelineLite();
tl.to(element, 1, {left:100})
.to(element, 1, {top:50})
.to(element, 1, {opacity:0,top 0})
.to(logo,1, {x:50}),
.to(logo,1, {x:0})

I want to get  accurate css changed values of 'logo' and 'element' when the timeline progress is at 75%, include the values of left,top,opacity and x.

 

For my new project is developed with React, I want to get the accurate styles data of variable css styles at some point in the progress to render the virtual DOM.

 

Thanks for your advice, much appreciated.

 

I'm sincerely looking forward to your reply.

Link to comment
Share on other sites

as blake suggested before , you can use _gsTransform object for most of css transform properties ,

 

and for other properties like left ,width , ...etc you can use one of these methods :

 

1- elem.style['propery name'] , like this : elem.style['width']

 

2 - CSSPlugin.getStyle() ,  like this : CSSPlugin.getStyle( elem , "width" );

 

3 - getComputedStyle(elem) , like this : var style = getComputedStyle(elem); console.log( style['width'] )

 

don't forget every TweenLite instance handles tweening of js objects as raw data ( whithout css prefixes , unit of measurement ) and getting/setting of css properties is CssPlugin's duty . actually you can get raw values from GSAP engine , but it's too deep and needs some really unnecessary functions when you can simply get data with above methods .

  • Like 5
Link to comment
Share on other sites

Thank you all for your help , blake, Point C and Diaco.

 

You are all so friendly and professional. Your advice helps me a lot.

 

I think the solution can solve my problem perfectly. :D

  • Like 3
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.
×