Jump to content
GreenSock

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

SVG and xPercent animation

Recommended Posts

Hi,

I've created SVG animation which you can see below.

 

1. Demo with animated <g id="tomato"> element

 

 

This works great in Chrome, but not in FF & IE because I didn't realize that <g> can not be animated because it doesn't have x/y coordinates. 

 

2. Demo with animated <svg id="tomato"> element

 

So I've created svg out of that group and animated that instead. You can see it here:

 

See the Pen xbZzXp by ihatetomatoes (@ihatetomatoes) on CodePen

 

Again, this works as expected in Chrome, and FF also bounces the tomato, but some reason the xPercent values are not applied in FF & IE. Any idea why?

tl.set(tomatoLeft, {xPercent: 23.6});
tl.set(tomatoLeaves, {xPercent: 41});

3. Demo with animated <svg id="tomato"> and animating x

 

When I change the xPercent offset to x, everything seems to be working fine also in FF & IE, but I wanted to keep the animation responsive.

 

All I've changed is the xPercent to x like this:

 

tl.set(tomatoLeft, {xPercent: 23.6});
tl.set(tomatoLeaves, {xPercent: 41});
// Became
tl.set(tomatoLeft, {x: "+=26px"});
tl.set(tomatoLeaves, {x: "+=26px"});

.to([tomatoLeft, tomatoLeaves], 0.2, {xPercent: 0},"split")
// Became
.to([tomatoLeft, tomatoLeaves], 0.2, {x: "-=26px"},"split")

Here is the updated Codepen, which works fine in FF & IE.

 

See the Pen XJXYZa by ihatetomatoes (@ihatetomatoes) on CodePen

 

Questions

 

How do I keep the xPercent offsets and make this work in FF & IE? Maybe I am missing something simple, after staring at the tomato too long.

 

Keep up the great work with GSAP Carl and the team.

 

Cheers

Petr

 

 

See the Pen VYLMrJ by ihatetomatoes (@ihatetomatoes) on CodePen

Link to comment
Share on other sites

Hello Ihatetomatoes, and Welcome to the GreenSock Forum!

 

Great SVG animation! .. Thanks for the codepen examples.. super helpful.

 

Regarding your SVG animation. I had some questions to better understand your issue:

  • Is your animation supposed to change size when the browser resizes, or does it stay the same size but just centers the animation within the viewport?

Also here is a modification of the GSAP xPercent example, but i added an SVG element (zebra head) to resize instead of text.

 

Modified Example:

 

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

 

But in that example it is using xPercent on the SVG parent, which is a div tag. I dont know if this helps in your situation.. to just use xPercent on a <div> tag instead of an SVG or SVG child element directly? To make a SVG fill 100% of its parent width, you will probably need to remove the width and height off of your SVG tag.

 

And here is the GSAP blog post that covered Responsive animation with xPercent and yPercent

 

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

 

Thanks again for any additional info! :)

  • Like 1
Link to comment
Share on other sites

Unfortunately, SVGs don't support %-based transforms across the board, and I'm pretty confident it'd be impossible to achieve even with the workarounds we're doing to make px-based stuff work across browsers. To make it work in IE/Firefox/Opera, we have to calculate a matrix() value and feed that into the "transform" attribute, but that value cannot recognize percentages. Again, it's not a flaw in GSAP - it's a fundamental incompatibility in the spec itself. CSS transforms are supposed to recognize percentages but IE/Opera don't recognize CSS transforms on SVG elements, and Firefox has a major limitation with regard to how it handles transform-origin values, so we tuck the values into the "transform" attribute instead and handle the origin stuff ourselves. 

 

If anyone has ideas to solve this, I'm all ears, but as far as I know it'd simply be impossible to accommodate xPercent/yPercent on SVG elements. 

  • Like 3
Link to comment
Share on other sites

Thanks for the suggestions Jonathan and for the clarification Jack. 

 

I guess I have to just stick to pixel based SVG animations for the time being.

Link to comment
Share on other sites

  • 2 years later...

Bumping this as I came across similar issue, trying to make a responsive scene work in IE11. Is it still not possible to use percentage values on SVG child elements?  This works in Chrome: 

 

<g id="chicken-whole">...</g>
chickenMoveLeft = new TimelineMax({repeat: -1,transformOrigin:"50% 50%"});
chickenMoveLeft
  .to("#chicken-whole", 2, {x: "-80%", ease: Power0.easeNone})
  .to("#chicken-whole", 5, {x: "-80%", ease: Power0.easeNone})
  .to("#chicken-whole", 1.2, {x: "0%", ease: Power0.easeNone})
  .to("#chicken-whole", 2.5, {ease: Power0.easeNone});

 

but it doesn't work in IE11. If I use xPercent - it still won't do anything in IE11. Is there a workaround for this? Do I really have to wrap everything in individual div's?

Link to comment
Share on other sites

Hi @Varinator

 

Using xPercent works fine for me in IE11.

 

See the Pen pWKbdK by osublake (@osublake) on CodePen

 

Make sure you're using the latest version of GSAP. If you need anymore help, open a new topic and provide a demo that shows the issue.

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