Search Hashnode

Search posts, tags, users, and pages

Comment by Kelvin M on "How I Created a Typing Text Animation with Framer Motion" | Hashnode

Kelvin M

Oct 14, 2023

This freezes on the first load of the animation. And also I see an infinite " console.log(latest)" in the update method. My machine is hot and I think that is the culprit. Definitely could be happening to users when they land on your page. How can i get around this

Noël Cserépy

I build animated web apps with NextJS and Framer Motion.

Oct 14, 2023

Can't reproduce the error. Are you talking about the covercraft.io or the codesandbox? Also, what browser are you using?

Kelvin M

Oct 14, 2023

This is chrome. When you open the sandbox do a console.log in this lines "repeatDelay: 1, onUpdate(latest) { // log here below console.log(latest);" and you'll see it happening, a constant infinite loop from 0-60 then 0-60 again per second. I am suggesting the same issue could be happening on covercraft.io

Kelvin M

Oct 14, 2023

Also can you help me debug the animation on this sandbox? "codesandboxio/s/peaceful-bohr-y63vvj" put the dot in codesandbox. i have implemented it the same way from your sandbox, but it loads the animation then stops. Next sentence is not called. Another update on the previous issue, my browser keeps saying page is unresponsive an issue I wasn't getting before. Switched it off, the machine, went cold, turned it back on, started debugging the code and now its warm near hot

Kelvin M

Oct 15, 2023

After much debugging, I got it to work, upgraded framer motion. Nice work with this 👍🏽. I'll keep an eye on the performance too

Noël Cserépy

I build animated web apps with NextJS and Framer Motion.

Oct 16, 2023

onUpdate() is called 60x per second (once per frame). That's how framer motion works. That is the right behaviour.

If you wanted to move a div to the right, for example, you could just move it by 1px in every onUpdate() call and it would start moving. That's roughly how animations work on the web.