This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Brian Saunders
Posted Oct 06 - Read on Facebook

Having an interesting problem with an animation stuttering the first time I trigger it with a click event.

I have a dialog view with active and passive states, and it scales between 1 and 0 on click. When I view the prototype in-browser using a dropbox public link (in chrome), the animation stutters on first play through only. After that the scale shift animates smoothly.

I do not experience the same issue inside of Framer Studio, or when I use the share link that Framer gives me that points to the local server (also in chrome).

So what is it about the dropbox public link that is interfering with my animation? Any ideas?

5 Comments

Koen Bok

Could be different things. Could I see the online prototype to see what is happening?

Brian Saunders

Thanks for the response Koen. I actually went ahead and restructured the layers in the prototype and got them to behave more predictably in the process. I don't want to go back and re-create what I had, but if I encounter this again in the future I'll be sure to let you know. Thanks again.

Koen Bok

Thanks. In the future, remember Chrome is pretty good at debugging what is exactly happening with the timeline. It's actually pretty fun to do too: http://blog.chromium.org/2012/11/build-smoother-web-apps-with-chrome.html

Brian Saunders

Great. Yeah, this continues to be a fun journey for me. I'll be sure to look into all that stuff so I can better my understanding of what's actually happening back there.

Koen Bok

Also, if I had to theorize what was happening is: online your browser starts running Framer before all images are downloaded. Because those can be large png's and decompressing/drawing can take time, you see dropped frames online but not offline.

A few ways to work around that would be to use the Events.ImageLoad event to preload large images. Another quicker but less pretty way to do it is wrapping all your Framer code in an arbitrary delay before you run it with Utils.delay. But this won't be reliable across different connections.

Read the entire post on Facebook