Jump to content
GreenSock

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

Animating x with percentage

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 think there is a bug where animating the CSS with this:

{ x: '-100%' }

leads to this (I am in Chrome):

{ -webkit-transform: translate3d(-100px, 0px, 1px); }

However, if I set the CSS manually to "-100%" it works beautifully. Is this a bug or is there something I need to do differently?

Link to comment
Share on other sites

Hi,

 

X and Y transforms are performed by matrices and they use absolute values. I had similar problem, so when I needed to translate with percentages, I calculated that percentage based on parent width. Here is codepen: 

 

See the Pen bysgL by burnandbass (@burnandbass) on CodePen

  • Like 2
Link to comment
Share on other sites

Yep, percentage-based translations aren't supported. To do it accurately, it'd likely be very costly performance-wise since every update would require analyzing the element's size and then convert % into px for the matrix. Remember, it's technically possible for the element's size to change during the tween - hence the need to keep running the analysis on each update (typically 60 times per second). Plus it'd cost extra kb. Since it's extremely uncommon for folks to use %-based transforms and because they can use top/left with percentages, plus the performance and file size concerns, this doesn't seem like a good capability to add to GSAP. As bassta said, you can get the behavior by doing the conversion yourself or use an onUpdate or by building your own plugin.

  • Like 1
Link to comment
Share on other sites

  • 11 months later...

What's the most efficient and prettiest way to tween a modal dialog from the center, where it scales up? I'm basically trying to scale a box to like 500,500 to the center of the browser window?

 

Thanks,
Patrick

Link to comment
Share on other sites

Hi reduxdj,

 

I don't have time to do a full modal demo, but I think our recent update that allows you to do percent-based translation tweens through xPercent / yPercent will really help.

 

Here is the 1.13.1 release article that has an interactive demo showing exactly the steps to center elements of any size: http://www.greensock.com/gsap-1-13-1/

 

I think that will give you exactly what you need. If you need more help let us know.

  • Like 2
Link to comment
Share on other sites

  • 2 years later...

Is there any way to disable matrix transformation in the engine?

Percentage is a must-have in adaptive design (adaptive banners in my case).

Yes, I can change x/y with left/top properties, but when I need to tween rotation or scale

and I already have some transforms assigned to my div through css,

that transforms become overridden with the tween matrix.

Link to comment
Share on other sites

Hello danissimo

 

GSAP can do percentage x and y transforms by using the properties xPercent and yPercent for responsive animations.

Please see the following article and codepen examples:

Percentage-based transforms using xPercent and yPercent:

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

Codepen example of interactive responsive use of xPercent and yPercent:

See the Pen axzmb by GreenSock (@GreenSock) on CodePen



See the Pen rAetx by GreenSock (@GreenSock) on CodePen



xPercent and yPercent are part of the CSSPlugin:

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

Happy Tweening!

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