Jump to content
GreenSock

PonyBoy

TweenMax (GSAP HTML/JS) Animation slow / non-existent in Safari only

Recommended Posts

Hola forum... first time posting... please note I'm about 6 months new to using the JS version of TweenMax and I still am very much learning. I was a TweenMax user over in Flash for YEARS and am VERY grateful for what you've created in JS. You have created a wonderful tool!

 

However, I've got a prob. :)

 

I haven't put this in codepen as what I'm trying to get working seems to work just fine in straight HTML by itself... including in Safari, my problem browser (link below).

 

A quick description of what I'm doing:

I'm using a WP theme ('The Ken' created by Artbees) w/a fullscreen slideshow plugin. The slideshow is primarily images with the exception of one or two slides I'd like to add animated content to (all SVG). The way I load my animation is simply by placing an <iframe> in my slide content. This works beautifully in both Chrome and Firefox... but Safari and any browser in IOS renders my animation painfully choppy (nearly non-existent unless you stare at it closely... so I know it is 'working'!).

 

This is a URL to the actual source being loaded up in the <iframe>... you'll see this runs wonderfully in any browser (including IOS browsers): 

http://aztacofestival.com/wp-content/themes/ken-child/main-slide-logo.html

 

Here is the final Dev page in question:

http://aztacofestival.com/arizona-taco-festival-2016/

There are four slides in the slideshow at the moment. Please click to slide 2—this is the slide in question.

 

This page I'm developing uses TweenMax all over the place and it's working brilliantly (ie: top right 'We <3 Our Sponsors" is TweenMax. The testimonial roll in the boilerplate / footer area when the pages loads is TweenMax, and all the rollovers below the main slideshow (scroll down) are using TweenMax (again, working beautifully in all browsers).

 

Please note that all my animations are triggered via their own functions. I've tried whittling back all my animation to just the main logo scaling and still have the issue (There is a lot going on. I figured the issue may have been that the animations combined are processor intensive... doesn't seem to be the issue as I have reduced this animation to 1 simple item and still have the issue).

 

I'm worried this may come down to a theme issue... it's just that it's only occurring on Safari (and any IOS browser) that has me confused.

 

Something strange you'll encounter in Safari: When you inspect the source via Safari's 'web inspector' the animations all begin to move / work. But only when in the inspector / rolling over the SVG items markup).

 

Thank you in advance for taking a moment!

Link to comment
Share on other sites

Hi PonyBoy, the animation works fine when it's loaded in an iframe:

 

See the Pen 17aa3c40c9107e9266e10464c3221116 by ihatetomatoes (@ihatetomatoes) on CodePen

 

Try to disable the slider that you are using or add your iframe to the first slide and see if the animation is still slow.

 

You have definitely quite a lot going on on that page, but this might help with isolating the issue.

 

Cheers

Petr

  • Like 1
Link to comment
Share on other sites

Very difficult to guess what the problem is with so much going on.

 

I suggest you remove the large skull logo from the SVG and try to animate a PNG instead. Do this just as a test to see if it is the SVG that Safari is struggling with. 

  • Like 1
Link to comment
Share on other sites

PonyBoy Also to add my two cents.

 

I tested this on Windows 7 and Windows 10 in latest Chrome and Firefox. And i saw that your animations were still choppy. But that is due to a lot of SVG DOM elements being animated. But that is expected since animating many SVG elements, and or large SVG elements at the same time will give you those type of performance choppy issues, whether they be animated with JS or CSS, since they are still DOM elements.

 

Also you can remove force3D:true from your tweens that are animating SVG child elements. Since SVG 1.1 does not support CSS 3D transforms on <svg> child elements, only 2D transforms are supported.

 

:)

  • Like 1
Link to comment
Share on other sites

I really appreciate all the feedback! Thank you, everyone.

 

I will test all these suggestions except for the "add your iframe to the first slide" suggestion only because I actually originally had the iframe on the first slide when I discovered the issue then moved it to another slide to see if being on slide 1 was causing the clunkiness. :)

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