arfdev

I have element (a plane) positioned in the middle Y axis of the page which is set as sticky. I need to animate (using a motion path) this element across the screen X axis from offscreen left to offscreen right. The problem I am experiencing is that the offscreen positions are creating a hroizontal scrollbar in the browser (allows scrolling to overflow positions). If I add "overflow-x:hidden" to hide and prevent the horizontal scrolling it breaks the sticky positioning. I tried overflow-x: clip but it did not eliminate the scrollbar. Is there some method to animate element across the screen beyond the viewport width without the triggering the overflow on the x axis?

I am new to Greensock and have read that GSAP is the best solution for animating my SVG elements. I am trying to use GSAP to animate a PIN on a SVG game map/board. My site is a HTML5 PWA Bingo Game App and uses SVG Images for the Game Map. On the Game MAP are PINs that indicate the levels the user has achieved and is able to play at. Each PIN is an SVG <image> element. Each of the larger SVG map sections contain references to these PINs (which are common) by using <use tag to reduce asset size. I want to use Greensock highlight the users current level PIN by toggling is scale. I used the following: TweenMax.to($level_element, 0.7, { scaleX: 1.3, scaleY: 1.3, transformOrigin: "50% 50%", yoyo: true, repeat: -1 }); After reading your forum posts I also tried: TweenMax.to($level_element, 0.7, { scaleX: 1.3, scaleY: 1.3, transformOrigin: "50% 50%", force3D: false, immediateRender: false, yoyo: true, repeat: -1 }); Both the above appeared work initially, however it is inconsistent on Chrome and Firefox browsers and in particular Safari, where the center is sometimes way off position. The problem appears to be related how the browser or Greensock calculates the center of my svg <image> using transformOrigin: "50% 50%" What happens after a browser reload is the center point defaults the top left corner my SVG <image> instead of its center, which causes an undesirable offset-stretch effect instead of shrink/expand toggle effect. I have no css animations on the PIN or other svg elements. Once I have resolved this issue, I would like to add many other animations, for example: I would like to animate the clouds so they appear from the left and float across the map and off the screen to reappear again on the left. However, I am concerned that something is messing with the animations positionings. These svg PIN images use xlink:href="data:img/png;base64 so they are huge strings that likely won't work in an CodePen example. We just did a soft launch of the game site, so if needed you can see the PINs live at www.bingotreasure.com I have had to revert to a simple opacity toggle on my Pins in the meantime using: TweenMax.to($level_element, 0.5, { opacity: 0.75, force3D: false, immediateRender: false, yoyo: true, repeat: -1 }); Any suggestions on how to resolve this centering problem using transformOrigin: "50% 50%"? Many thanks.