2

I have problem with two animation libraries(react-spring, framer-motion). I was trying to make simple animation in moment when component is first time visible. (it's simplify version)

<motion.div initial={{x: -25, opacity: 0}} animate={{x: 0, opacity: 1}} transition={{duration: 2.5}} className="App-logo">NAME</motion.div>

Github project

It looks very smooth on Chrome, Brave, Edge, but on Firefox it looks laggy in the end of animation. This example is based on framer-motion but in react-spring it looks the same. When transition-duration is shorter and translateX longer it looks better but still it's not smooth animation(and it's not solution for this problem to change properties which works on other browsers). Firefox(76.0.1)(OS Win10).

I tried to do the same animation using clear css and it looks smooth on each browser. I was searching for solutions to my problem but i didn't find any particural answears.

itsnotmikhael
  • 27
  • 4

1 Answers1

1

I think it is the difference int the rendering engine of Firefox and Chrome. Firefox just position the div pixel by pixel without subpixel rendering. If you add a slight rotation to the div it makes FF engine to skip optimization.

<motion.div initial={{x: -25, opacity: 0, rotation: 0.02}} animate={{x: 0, opacity: 1, rotation: 0.02}} transition={{duration: 2.5}} className="App-logo">NAME</motion.div>

Update: Based on your your git repo I add an example. If I add rotation for the first two line, the animation is noticeably smoother in Firefox than with the last line.

https://codesandbox.io/s/happy-cannon-tew1f

enter image description here

HoldOffHunger
  • 10,963
  • 6
  • 53
  • 100
Peter Ambruzs
  • 5,742
  • 3
  • 18
  • 26
  • I added this slight rotation but to be honest it doesn't change anything. It still looks like ragged animation. I wonder why the same animation but in clear css looks completely smooth but in framer-motion / react-spring completely laggy. – itsnotmikhael Jun 02 '20 at 09:24
  • https://www.dropbox.com/s/ag6h21yyzuuz9mr/2020-06-02%2013-53-45.mkv?dl=0 In this video i am showing that the same animation but in clear css can be smooth. I am not sure if it is problem with FF but maybe these libraries have some issues ? To animate in css i was using translateX. – itsnotmikhael Jun 02 '20 at 12:01
  • I'm not sure about the smoothness difference. For me both animation is smooth on your video. There is a slight difference in the easing. Framer motion starts a little quicker and slows down the css animation easing seems linear to me. But it must be browser independent. – Peter Ambruzs Jun 02 '20 at 12:45
  • Okey. Like you said "If you add a slight rotation to the the div it makes FF engine to skip optimization". Now i see that this really works smooth with this slight rotation. In my case it should be more than 0.01deg but less than 0.1 (about 0.06deg). Maybe in the future Firefox will change your rendering engine. Thanks for help Peter Ambruzs. – itsnotmikhael Jun 02 '20 at 14:52