Jump to content
Search Community

IE problems

OODNX 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 

I'm working on this robot animation (see Codepen) all was going swimmingly until it was pointed out to me some odd behaviours that were occurring in IE Edge. I'm having no luck debugging this and wondered if anyone could shed any light? Any help would be appreciated.

 

Also frustrating, but something i'll probably work out eventually, on the second loop through (the second time the German box is picked up) the rotation of all the boxes is not right, i'm not sure why this is? 

 

Lastly, this is by far the most complicated timeline I have have attempted and i'm sure there are better/more efficient ways of achieving the same outcome. I'm always keen to learn so if there are any obvious GSAP features different structures I should be taking advantage of i'd appreciate the input.

 

Many thanks in advance.  

See the Pen jaRObg by AlexFarminer (@AlexFarminer) on CodePen

  • Like 1
Link to comment
Share on other sites

Cool animation!

 

I believe the issue has to do with the fact that Microsoft browsers won't accurately report getBBox() on an SVG element that's display:none, thus the transformOrigin isn't able to get set properly. So all you need to do is flip-flop these two lines: 

 

TweenMax.set([usabox, japanbox, ukbox], {display:"none"})
TweenMax.set([germanybox, usabox, japanbox, ukbox], {rotation:0});

 

The way it's shown above, you're setting display:none and then a transform property, so Microsoft inaccurately reports the bounds. See what I mean? 

 

Also, I'd strongly recommend updating to the latest version of GSAP, 1.20.3 as of now. Your codepen is using the "latest" which ironically is significantly out of date because CDNJS has refused to support "latest" for quite some time. We pleaded with them, but they just won't do it. Frustrating, I know. 

 

Happy tweening!

  • Like 5
Link to comment
Share on other sites

Quote

Also, I'd strongly recommend updating to the latest version of GSAP, 1.20.3 as of now. Your codepen is using the "latest" which ironically is significantly out of date because CDNJS has refused to support "latest" for quite some time. We pleaded with them, but they just won't do it. Frustrating, I know. 

 

Explains why it wasn't playing in Firefox.

  • Like 2
Link to comment
Share on other sites

Hello @OODNX and Welcome to the GreenSock Forum!

 

As a rule of thumb, Its best to not use display:none on SVG child elements, and just set the SVG child elements visibility attribute or use the CSS property visibility property. Since the spec dictates that any SVG child element that uses CSS display none will cause that element to not be created in the render tree. So that will make sure you follow the SVG spec and have cross browser compatibility, when working with SVG.

Quote

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.

 

Happy Tweening!

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