Viktor Borítás

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

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:https://codepen.io/iwanwilaga/pen/poaNKpm Thank you so far! Best wishes

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