Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Svg transform origin intermittent bug

Recommended Posts

Hi, there's a strange bug I've been coming across and not sure how to fix, it only happens very occasionally, but does always happen eventually if you keep refreshing. Seems like it's something to do with a wrong 'xPercent' calculation?


I'm animating every svg elements y position from bottom to top, fine


Then I am animating some elements to 'wiggle' their x and y positions. Sometimes the x axis seems to be wrong and they move much too far


I originally thought the problem was because I was trying to animate the wiggle from the start, at the same time as moving everythings 'y' position. But I delayed any 'y' position animations until the first 'move up' animation was finished


Funnily enough I can't seem to get the codepen to reproduce this bug... Making me think maybe it's network related, something trying to calculate before the svg is fully loaded...?


Anyone seen something similar before, any idea what's going on?


Is there a less troublesome way to achieve the same effect? I tried using 'x' instead of 'xPercent' but this made a jump in the animation and also xPercent is preferable as the image resizes a quite lot


Thanks ?





See the Pen dLBENq?editors=1011 by bananafarma00 (@bananafarma00) on CodePen

Link to comment
Share on other sites

Hello @vektor and Welcome to GreenSock Forum!


If your seeing render issues with SVG origin, can you please let us know the following:

  • What Browser and Browser version?
  • What OS and OS version?

Thank you for any additional info you can provide.


But you can also make it so you only run your animation when the DOM is ready and the window is fully loaded. So your code only runs when all web assets and markup have been fully ready and loaded.


// wait until DOM is ready (html and svg)
document.addEventListener("DOMContentLoaded", function(event) {
  // wait until window is fully loaded (css, js, fonts, links, and other media assets)
  window.addEventListener("load", function(event) {
      // GSAP custom code goes here
  }, false);


Happy Tweening :)

  • Like 3
Link to comment
Share on other sites

Found the fix! 


This animation is within a Magento 2 project, which uses requirejs for everything, I switched from jQuery's $(function() {}) doc ready to require js 'domReady!' and the bug is not happening anymore :)


So now looks something like 


require(['jquery', 'TweenMax', 'CustomEase', 'domReady!'], function ($) {
    // ANIMATE ?


  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.