Jump to content
GreenSock

erikb

tween x as %, then x as number...

Go to solution Solved by GreenSock,

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 don't think this is a bug, but rather it is an issue which caused me to scratch my head.  If I tween x first as a percent (100%) it slides over. Then later if I tween the element's x as a number (0), the element does not slide back.  Tweening back to 0% does what I wanted to accomplish.  This small discovery might be helpful to other developers?  

See the Pen Cegjo by jedierikb (@jedierikb) on CodePen

Link to comment
Share on other sites

Hi erikb  :)

 

this is what i think about that ; GSAP tween elements with css matrix , but matrix doesn't accept the percentages values ( only num ) . with percentages , element ill animate with css transform translate .

after first tween we have this : translate(100%, 0%) matrix(1, 0, 0, 1, 0, 0) , so with matrix logic the element x = 0 , and this mean you should tween with x:'0%' to back .

at least that's my understanding .

  • Like 1
Link to comment
Share on other sites

  • Solution

Excerpt from the CSSPlugin docs: 

 

If you set x or y to a percent-based value like 50%", GSAP will recognize that and funnel that value to xPercent or yPercent appropriately as a convenience.

 

Remember, there are dedicated "xPercent" and "yPercent" properties which is actually a very powerful thing because you can COMBINE them with normal px-based x/y translation. 

 

So in your case, you were setting the regular x and y to percentage-based values, so the plugin thought "oh, he's setting a percent value...as a convenience we'll just funnel those values to xPercent and yPercent...", thus x and y ended up being untouched/unanimated. If you want to animate percentage-based values, use the xPercent and yPercent properties and you'll be golden. 

  • Like 2
Link to comment
Share on other sites

yup, as Diaco noted, when you set x as a percentage it uses a translation but if you use px it uses a matrix. 

 

To make your code work you could just specify the units as % in your second tween

var t1 = new TweenMax( '#a', 3, {
  x: '100%',
  onComplete: function( ) {
    var t2 = new TweenMax( '#a', 3, {
      x: "0%"
    });
  }
});

And yes, that can be all be a little confusing if you aren't expecting it. We have separate xPercent and yPercent properties specifically for when you want to do x and y translations as percentages. It can be very useful for instance to set an element xPercent and yPercent to -50 (for centering) and then use x and y for offsetting from center. This is explained in this post here: http://greensock.com/gsap-1-13-1 

 

Be sure to study and click through all the steps in the second demo on that page. 

 

Let us know if you need more clarification.

 

 

  • Like 3
Link to comment
Share on other sites

  • 4 months later...

GSAP/Jack - Could you please define what xPercent and yPercent is a percent of?  I have seen the codepens and explanations of how it works, but I'm having trouble applying it because I haven't seen a definition anywhere.  

 

For example, I see you have to set top and left first, then xPercent and yPercent work, otherwise it moves things outside the div.  Why?  Just need to know the actual definition.  Could definitely be my lack of overall CSS knowledge.  Thanks!

 

Have already looked here:

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

http://greensock.com/gsap-1-13-1

Link to comment
Share on other sites

Ah... is its xPercent of itself? 

 

Many thanks for a great tool!

Link to comment
Share on other sites

Yes indeed. The CSS spec indicates percentage-based transforms are always in relation to their own native size (before transforms are applied). This can actually be very useful, especially for centering things. Let us know if you need any more help. Happy tweening!

  • Like 2
Link to comment
Share on other sites

Thank you very much -

 

Can you explain the difference between y:-25 and y:"-=25"?  I noticed different behavior especially when moving multiple objects.  In the former, multiple objects moved different amounts.

 

Should I be reading the CSS spec to find out out how to use these things or is there a place in your API that explains each?  

Link to comment
Share on other sites

Hi cbslt  :)

 

y : -25  > tween from current value to -25

 

y : " -=25 " > define relative values , decrease 25 unit from current value 

 

y : " +=25 " > increase 25 unit from current value 

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