- Last post
- 5 Responses
Hi... I'm battling something odd that's owned me for 2+ days.
Note: this is in development and is embarrassingly unfinished in terms of design and content.
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):
Here is the final Dev page in question:
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).
Thanks if you took a moment to read that... and thank you if you're able to take a peak and perhaps shed some light. <3
I read it all but I don't have enough knowledge to help you out.
- when I click "home" it shows this "http:///#" in the second link you posted. probably cause you're not finished right?oey
- who doesn't love tacos?
(yes, to your Q... nothing is linked-up) :)PonyBoy
- how are you learning? lynda.com type stuff?PonyBoy
- no, i'm doing a training financed by the unemployment center. e-learning in an academie. in german: weiterbildung.oey
I'm thinking it's because I've overwhelmed the processor w/SVG DOM tweens... I'm going to scale back some of these vectors and see what happens.
Still concerned the theme may have something to do with it as the animation runs smoothly outside of the theme.
I've asked help directly from the GSAP folks (TweenMax):
thanks for the help, all!