Skip to content

A fix for jerky/janky HTML5 animation in browser while using GSAP JavaScript library.

Notifications You must be signed in to change notification settings

Cmaxster/greensockJerkyAnimationFix

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

greensockJerkyAnimationFix

A fix for jerky/janky HTML5 animation in browser while using GSAP JavaScript library.

I found while using GSAP, specifically in Chrome on Mac, there was a distinct jittery quality to the image rendering while scaling down an image slowly.

I did some digging around to find ways to reduce this effect and create a smoother transition..

These were the options I found:

• use x,y values instead of absolute top,left in TweenLite tweens. • use the 'will-change' property to indicate the property will animate. (seems to work best) • try using the 'perspective', 'translateZ', and 'force3D' property to force 3D rendering, specifically on the container element of the image. (however, it should be noted, I've had limited success with this last one.

About

A fix for jerky/janky HTML5 animation in browser while using GSAP JavaScript library.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published