Jump to content
Search Community

Animation Flicker Chrome when Changing Position

ExtremeTwix test
Moderator Tag

Go to solution Solved by Jonathan,

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

Hi, 

 

I am having this weird issue on google chrome when I change the position of my element, it starts flickering a bit before taking action (like it goes to the right a bit before it follows the animation).

 

The issue does not exist on any other browser though, even Edge. 

 

The exact code I'm using is in the codepen, but apparently the issue is non-existent there too. 

See the Pen Bjqyox by anon (@anon) on CodePen

Link to comment
Share on other sites

Hello ExtremeTwix and Welcome to the GreenSock Forum!

 

im not near my computer but just by looking at your codepen. I can see that in your last tween that you are animating CSS position offsets like bottom and left.

 

As a rule of thumb, it best not to animate the position offsets top, bottom, left, or right. This is due to those properties not being able to animate on a sub-pixel level. And they wont animate on the GPU for hardware acceleration. Animating CSS position offsets will cause jank, jitter, jumps, and force layout changes of the page which can cause bad and not smooth animations.

 

So you should change left to use x (translateX) and instead of bottom use y (translateY)

 

Here is an article by GreenSocks Jack on using CSS transforms x and y over animating position offsets.

 

https://css-tricks.com/myth-busting-css-animations-vs-javascript/

 

Just keep in mind CSS position offsets (top, left, bottom, and right) are only good for setting the initial position of your elements. But when you animate your elements you want to use CSS transforms like x and y.

 

Hope this helps! :)

Link to comment
Share on other sites

Very tough to say since I can't see it happening in the demo. 

My only advice is to remove some properties and see if it is related to any particular property. 

This really sounds like its some sort of rendering bug in Chrome as all GSAP is doing is changing the values. 

Anything you can do to re-create it would be helpful. Perhaps start adding in other elements and animations from your real site / app until you can force the glitch.

  • Like 1
Link to comment
Share on other sites

Regarding the Translate property, my only issue with that is the game I am making resizes on window resize and keeps a ratio of 16:9 for the main container. So I am using em to position my elements inside the container such that they keep their positions and sizes relative to the container. I don't know of a way to translate them in a way they keep the same position even after screen resize.

 

Now for the main issue, it appears it only happens when I change the left property of the element AND when the unit is em. Tried pixels and it worked just fine but unfortunately that won't work well.

Link to comment
Share on other sites

GSAP also offers a xPercent and a yPercent property for responsive animations

 

http://greensock.com/gsap-1-13-1

 

xPercent and yPercent are part of the CSSPlugin.

 

Taken from the CSSPlugin Docs:

  • To do percentage-based translation use xPercent and yPercent (added in version 1.13.0) instead of x or y which are typically px-based. Why does GSAP have special properties just for percentage-based translation? Because it allows you to COMBINE them to accomplish useful tasks, like perhaps you want to build your own "world" where everything has its origin in the very center of the world and then you move things in a px-based fashion from there - you could set xPercent and yPercent to -50 and position:"absolute" so that everything starts with their centers in the same spot, and then use x and y to move them from there. If you set x or y to a percent-based value like 50%", GSAP will recognize that and funnel that value to xPercent or yPercent appropriately as a convenience. Our 1.13.1 Release Notes have some great demos showing how xPercent and yPercent can help with responsive layouts.

 

I hope this helps! :)

  • Like 1
Link to comment
Share on other sites

Well, I uploaded gifs for the issue if that helps at all:

https://i.gyazo.com/eba96a1d03551aa8148b7fd735b4da8b.gif

https://i.gyazo.com/dda6ca37fc7b38fa6fba1350b1832300.gif

 

Also, for translating, this is a gif for my issue with them 

https://i.gyazo.com/0ca5460b875e3c9368e9927da8e7300d.gif

https://i.gyazo.com/c78843876f293eab7c27a34409a55b28.gif

 

I think the main issue comes from me using ems and resizing the main container to fit a 16:9 while manipulating font size to keep elements in shape, as I tried isolating the code outside the project and it worked just fine too. 

Link to comment
Share on other sites

  • Solution

What does your GSAP JS code and CSS look like for the font-size you are animating / manipulating?

 

Ems are relative to their immediate parent. And can have varied rendering results cross browser, especially when resized.

 

Have you tried maybe using root ems (rems) which are relative to the root html element <html>?

 

http://snook.ca/archives/html_and_css/font-size-with-rem

https://j.eremy.net/confused-about-rem-and-em/

 

:)

  • Like 1
Link to comment
Share on other sites

Well thanks for the help! I changed my sizings to percents and the issue seems to have vanished!

And regarding the ems, I noticed that when I specify both from and to, the issue doesn't happen. 

 

Thanks for your time :)

 

Also now I can use translateX and Y without issues too   :mrgreen:

  • Like 2
Link to comment
Share on other sites

Glad you got it figured out, ExtremeTwix

 

Also keep in mind that if you didn't use the fromTo() tween. And say you want to use a to() tween. You can use the GSAP set() method to set your initial CSS property before your to() tween runs. Using the set() method GSAP will take care of any cross browser vendor prefixes as well.

 

set()

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/set/

  • A TweenMax instance (with a duration of 0) which can optionally be inserted into a TimelineLite/Max instance (although it's typically more concise to just use the timeline's set() method).

Just an example of using the set() method with a to() tween:

TweenMax.set(myObject, {x:100, y:50, opacity:0});
TweenMax.to(myObject, 0, {x:100, y:50, opacity:0});

So by using set() before your to() tween you can make sure your initial property is set before your tween runs. Its just another way.. since sometimes if you don't have your initial CSS property in your CSS style-sheet GSAP might not know what the default / initial ? or starting value might be, if it is not defined. So using GSAP set() method can help in that regard!

 

Happy Tweening!

  • Like 2
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.
×
×
  • Create New...