Discussion on "How I Created a Typing Text Animation with Framer Motion"

Noël Cserépy · 2023-08-31T16:29:55.058Z

The Idea After finishing some client work, just like everyone else and their grandma, I made an AI app 🙄. Mine writes custom cover letters based on the user's CV and a job description. When I got around to making the homepage, I knew I wanted to mak...

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

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

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

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.

Search Hashnode

How I Created a Typing Text Animation with Framer Motion

Responses(2)