Animation problem only on iPhone, iOS

[Viktor Borítás 2 Likes (Newbie)]

Hello good People!

 

I have an issue with (apparently)`transform:rotate()` css in an animation where i use ScrollMagic which uses GSAP 2.x

I can't reproduce exactly this on CodePen, yet can't add the 2.x version gsap js.

 

Here is the current dev site: https://legopd22.iwanwilaga.com/

Please check the robot animation on scroll (with orange background)  especially on iOS / apple devices.

 

 

 

So it breaks on my old iphone6. Other android phone and desktop doing well on any browser i checked.

 

Do you have hints please why this happens?

I applied these css but didn't fix it.

transform-origin:center!important;

  transform-box:fill-box!important;

Using TweenMax(). and nested timelines

 

function SVG_Vernie_Robot_Anim(){

        let ctrl = new ScrollMagic.Controller();

        var timeline_robot_inner_elements = new TimelineLite();

        var timeline_robot_slide = new TimelineLite();

        var timeline_master = new TimelineLite();

 

        var robot = document.querySelector("svg#robot-vernie");

        var robot_head = document.querySelector("g#Head_Vernie");

        var robot_eyebrow_left = document.querySelector("g#Eyebrow_Left");

        var robot_eyebrow_right = document.querySelector("g#Eyebrow_Right");

 

        timeline_robot_slide

        .add(TweenMax.to(robot, 1, {transform:`translateX(${is_mobile ? 100 : 250}px) translateY(${is_mobile ? 25 : 0}px) rotate(-10deg) scale(1.5)`},0))

        .add(TweenMax.to(robot_head, 1, {transform:'rotate(15deg)'},0))

        ;

 

        timeline_robot_inner_elements

        .add(TweenMax.to(robot_eyebrow_left, 1, {transform:'rotate(-25deg)'},1))

        .add(TweenMax.to(robot_eyebrow_right, 1, {transform:'rotate(25deg)'},1))

        ;

 

        timeline_master

        .add(timeline_robot_slide,0)

        .add(timeline_robot_inner_elements,2)

        ;

 

        new ScrollMagic.Scene({

            triggerElement: ".wp-block-getwid-section.szekcio-terkep",

            duration: 200, //px

        })

        .setTween(timeline_master)

        .addTo(ctrl);

 

    }

    SVG_Vernie_Robot_Anim();

To me seems the problem is with rotation.  Other `translate` properties work ok.

 

Can you reproduce the same issue? Thank you so much!

Best, Wiktor

 

[PointC 14,017 Likes (Superhero)]

Hi @Viktor Borítás

 

Welcome to the forum.

 

We can't troubleshoot a full site like that and ScrollMagic is not a GreenSock product so we can't offer support for it.

 

GreenSock has its own scroll plugin which does everything ScrollMagic can do and whole lot more.

 

I also noticed your site is using GSAP 1.19. You'll definitely want to migrate to the latest syntax. Here's a handy guide to help.

 

If you have GSAP related problems, we'd like to see a minimal demo so we we can offer the best assistance.

 

Happy tweening and welcome aboard.

 

[Viktor Borítás 2 Likes (Newbie)]

Thanks!

I migrated to GSAP 3, phone issue fixed ^^ . I still have issue to fix, namely:

 

The head is still bit weirdly rotating. How to best set it's origin position for rotation? (now set in css). Bonus question: do you know some best/fun practices or tools to figure out the perfect rotation/origin point for an element?

 

In the below linked dev site, if in Firefox, you may also notice an unwanted motion (artifact?) of the robot head near the end of the animation, after it rotates, it kinda slides back left on the x axis. We don't need that. (and i don't know what causes it). In other browsers it looks fine. (Firefox is newest version)

 

site:https://legopd22.iwanwilaga.com/

Demo:

See the Pen poaNKpm by iwanwilaga (@iwanwilaga) on CodePen

 

Thank you so far! Best wishes

[PointC 14,017 Likes (Superhero)]

If I'm animating it with GSAP, I always use GSAP to set everything so we don't encounter any CSS problems. In this case, I think it'll be easier to use SVG origin for the head group rotation point.

 

See the Pen 3563d3883888a9bb19bc96e7fb6a9774 by PointC (@PointC) on CodePen

 

2 hours ago, Viktor Borítás said:

in Firefox, you may also notice an unwanted motion (artifact?) of the robot head

I'm not seeing that in any browser.

 

Happy tweening. 

[Viktor Borítás 2 Likes (Newbie)]

Alright, it seems the transform:'rotate(25deg)' older syntax caused the firefox glitch, now with

rotation() works as expected..  so now i really understand, it's WORTH to 'facelift' all the older syntaxes to the newest.. possible 

[PointC 14,017 Likes (Superhero)]

Yes - it's a good practice to use the most up-to-date version of GSAP and syntax. Sometimes a bug may have been squashed or a cool new feature was added so it's something to watch. 

 

Happy tweening.