HTML / JS / Wordpress help

  • Started
  • Last post
  • 5 Responses
  • PonyBoy

    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

  • oey0

    Ah! Tacos!

    I read it all but I don't have enough knowledge to help you out.
    Good luck!

    • 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) :)
    • I'm learning JavaScript right now, and after nine days I'm a bit lost :/ Probably because of the teaching method so I decided to do something about it.oey
    • how are you learning? type stuff?PonyBoy
    • no, i'm doing a training financed by the unemployment center. e-learning in an academie. in german: weiterbildung.oey
  • spmitch0

    Seems to be a documented issue with Safari and TweenMax, try achieving same results with css transforms and javascript.

    • actually I just learned TM 'chooses' which transform method based on the browser it's being used in—you call TM and the engine 'decides' the best method (coo!)PonyBoy
  • gonzalle0
  • dee-dubs0

    have you tried playing with force3D settings in GSAP? ie trying both force3D: true or force3D: false to see if it effects how it is rendering in browser?

    have you optimised all your SVG code to try get it as small as possible?


    • ha... did all this! Found out not necessary though as svg 1.1 doesn't support css 3D transforms... great link to good info though... thank you!PonyBoy
    • great link to good optimiser (I meant)PonyBoy
  • PonyBoy-4

    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!