My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more
Noël Cserépy

33 likes

·

11.0K reads

7 comments

Mats Nilsson
Mats Nilsson
Oct 16, 2023

Great

3
·
Kelvin M
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

1
·
·5 replies
Noël Cserépy
Noël Cserépy
Author
·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
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
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
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

1
·
Noël Cserépy
Noël Cserépy
Author
·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.

·