Jump to content
Search Community

How does the GreensockJS works while use X params?

WW 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

Hi, all

 

There's a stupid problem stuck me few hours already, ><"

 

 

here's the problem :

I try to get the X value of a element called 'GW' after I tweened it,

 

whether I use "_gsTransform.x"  or  "css('margin-left')" or  something else...

 

the console just shows 0.

 

so, how does the x axis tweening works in greensockJS? ues position? or use offset?

becuse i don't know how to get the "GW" X axis value ><"

 

 

my codepen as below :

See the Pen gxGfp by WW (@WW) on CodePen

 

 

Thanks a lot !!

 

PS: sorry about my suck English,

      so... i'm afraid u guys don't know what I'm talking about = ="

      but, I'll be vary grateful for ur help. Thanks again. ^^

Link to comment
Share on other sites

Hello WW, and Welcome to the GreenSock Forums!

 

By default from() tweens have immediateRender set to true.

 

Working example:

See the Pen oABnu by jonathan (@jonathan) on CodePen

 

immediateRender : Boolean - Normally when you create a tween, it begins rendering on the very next frame (update cycle) unless you specify a delay. However, if you prefer to force the tween to render immediately when it is created, set immediateRender to true. Or to prevent a from() from rendering immediately, set immediateRender to false. By default, from() tweens set immediateRender to true.

 

So if you set immediateRender to false you will see the x value.

TweenMax.from('#gw', 0.5, {
	opacity:0, 
	x:50, 
	ease:Elastic.easeInOut, 
	onStart:onStart, 
	onStartParams:["{self}"], 
	onComplete:onComp, 
	onCompleteParams:["{self}"],
        immediateRender: false // add this
});

If you look in the TweenMax Docs you can see what immediateRender does:

 

Hope this helps! :)

Link to comment
Share on other sites

Yup, and another part of the issue is that from() tweens end at the values you had before the tween began, so the values you are logging at the end are really the "natural" start values the object had before any tweening occurred.

 

Change your tween to to() tween. You will see that that onComplete you will get the new values.

Link to comment
Share on other sites

Hi, Johnnathan & Carl

Thanks u guys for helping.   :)

 

To Johnnathan:

Let me get this straight.

so, it means the x i got in onStart() is GW's original x that before tweening occurred?

and, after setting the immediateRender to false, 

the onStart() running later than tween's that can get tween's begining x?

 

To Carl:

Is this a synchronous problem?

especially in from()?

 

one more question,

I click GW in crazy fast speed,

( i know it's unnormal testing, but my boss told me had to do that  :? )

at last, 

the tween x became 50 to 49.999xxxxx,(it looks like no moving)

not 50 to 0 anymore

why?

if everything's normal, 

shouldn't it just always from 50 to 0 position?

(codepen here: 

See the Pen gxGfp by WW (@WW) on CodePen

 )

 

sorry for so many question,

Thanks again  :)

Link to comment
Share on other sites

I'm getting a little lost in the series of questions.

 

Consider the following:

 

A from() tween will always end at the values that existed at the time the tween was created.

 

If an element has css left:0 and you create this tween

TweenLite.from(element, 1, {left:200})

When you used your onComplete function to get the values, there wasn't a problem at all. You were seeing the elements "normal" or "native" css properties that existed before the tween animated from some other values.

 

---

 

When you animate the x or y axis GSAP creates a transformMatrix which technically combines x, y, scale, and skew values. The ._gsTransform.x is just a convenience way of storing the individial transforms in an easier to read fashion. 

 

Create a tween that is 40 seconds long and changes the x, or y. Use dev tools to inspect the item that is animating and you will see the matrix set in that element's inline style.

 

---

 

If you create a new from() tween every time you click you will run into trouble, but it is not a flaw in the engine.

 

Remember, when you create a from() tween, the end values are the current values.

 

So if you have an element with x:0 and you create this tween on click

TweenLite.from(element, 1, {x:100, ease:Lineear.easeNone})

Your element will move from 100 to 0 for 1 second.

 

If you click again at 0.5 seconds, the element will have an x of 50 at that time. So when you create A NEW tween it will tween from

 

x:50 to x:0 over the course of another second.

 

if you keep doing this the animation will slow down as each new tween is going a shorter distance with the same 1-second duration.

 

To avoid this situation, create 1 tween once and just restart() it like so:

 

http://codepen.io/GreenSock/pen/zEIcr

 

Hopefully this helps clear some things up.

 

Happy tweening!

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