Jump to content
Search Community

SVG path animations messed up by UI tabs

jimthornton test
Moderator Tag

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

Hi party people, 

 

So I'm totally stumped on this. I've been building a series of animations and they work just fine on their own. But as soon as I put them in bootstrap tabs or ui-kit tabs, half of them start animating less precisely, or ignoring transformOrigin properties, and some elements even seem like they're rotating around the top left of the full svg.

 

To simplify:

 

this is what one is

See the Pen gmYyBX by jimthornton (@jimthornton) on CodePen

this is what it looks like in a bootstrap UI tab (second tab)

 

I found the issue when using getuikit.com v2 tabs and the same thing happened. So after isolating that the issue only happened to the animations within the tabs, I lazily switched the uikit to bootstrap, and drum roll - same issue. But without the tabs, there is no issue.

 

I don't think it's related to the bezier path, bc this is also happening on animations where i don't plot path points. It seems most common on tweens with transformOrigins declared. 

 

You can see the UI-Kit version of the issue on this page: http://apipro.io/#every-step and I can put that somewhere and update the link for posterity when it gets removed if it's worthwhile. 

 

Thanks for any thoughts or suggestions from the gsap community!

 

See the Pen pezBQG by jimthornton (@jimthornton) on CodePen

Link to comment
Share on other sites

  • Solution

It looks like the problem is that when you introduce bootstrap, it's hiding the elements in a way that causes the browser to incorrectly report their dimensions via the standard getBBox() method that's common to all SVG elements. Here's an example you can drop into your code:

console.log(document.getElementById("box").getBBox());

Notice that's returning x:0, y:0, width:0, height:0 which is why everything looks like its origin is in the top left corner. 

 

The only solution I know of is to make sure your tweens start when the element is actually in the DOM and not display:none. 

  • Like 4
Link to comment
Share on other sites

Yep Jack is right!

 

The SVG spec dictates that if an SVG element is hidden, meaning display:none, when the DOM is parsed, the SVG will be removed from the rendering tree.

 

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/display

  • A value of display="none" indicates that the given element and its children will not be rendered. Any value other than none or inherit indicates that the given element will be rendered by the browser.

:)

  • Like 2
Link to comment
Share on other sites

@greensock @jonathan it's like you guys know everything. thanks much!

They do know everything, which is why it's actually dangerous having them both replying in the same thread. That kind of brain power concentrated in one place could cause a disruption in space and time.

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