Jump to content


Flicker effect on Edge browser.

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I am dealing with a bug that seems be present only on Microsoft Edge < 15.

Someone here know how resolve it or what is causing this?


Chrome, Safari, Firefox, IE 11.



Edge < 15


Here is the code for the animations.

function scaleAndShrinkAnimation($element, maxWidthPercentage, durationSeconds) {
  var widthHalf = maxWidthPercentage / 2;
  return TweenMax.to($element, durationSeconds, {
    width: maxWidthPercentage + '%',
    top: '-=' + widthHalf + '%',
    left: '-=' + widthHalf + '%',
    repeat: 1,
    yoyo: true


See the Pen d91be8899582064151804a5108557ca5 by bv-design (@bv-design) on CodePen

Link to comment
Share on other sites

Is there any particular reason you're not just using scale instead of width/top/left? It'd probably perform much better too. Transforms are faster for the browser to render. Your code would be simpler too. 


As for why Edge is rendering it oddly, that's tough to say without seeing it in the browser - do you have a reduced test case, perhaps in codepen? 

  • Like 1
Link to comment
Share on other sites

@GreenSock Thanks for your fast answer!


Scale was my first option for the animation, but safari show an issue where the Icon Dollars not appear.


I just have included an codepen example to original post above.


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.