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

What is Framer? Join the Community
Return to index
Godrich Wild Man
Posted Oct 06 - Read on Facebook

Hi, guys!

I'm facing some issues with animations in Framer. Most of them are triggered with .Click events and (almost) everytime the project loads on screen, in the first clicks, the animation seems to behave pretty different of what I've initially built. (e.g When I try to animate the "x" property of a PSD object smoothly off the screen, at the first time the animation is triggered, it simply vanish or goes to the other side abruptly). After the second or third clicks, the animations seems to behave ok and everything seems to run right after that.

Am I missing something? Is there a way to prevent such behaviors using JS?

I'm afraid this might cause a bad impression on a client, since I'm showing a prototype in order to catch his attention in a good sense.

Just one more thing... Is there a way to prevent the browser to execute the default animations until the app is totally loaded? When I open a prototype on iPad, all the initial animations that use setTimeOut function were already executed at the moment the browser was loading and I miss all of them.

Thanks in advance, guys!


Alex Hazel

concerning the load could always hook into the document.ready functionality of javascript to make sure your animations don't fire until the DOM is fully loaded. Something along the lines of this:

Alex Hazel

The last answer on the page seems to be the best way to do it

document.addEventListener('DOMContentLoaded', function() {
// ...

Koen Bok

Or, Utils.domComplete, -> ...

Godrich Wild Man

Thanks! I will try it.

Brian Saunders

Did you ever find an answer to your first issue here? I have an animation that does not behave properly on the first click. It has states that scale it between 0 and 1, but on the first click the animation is not smooth. It appears to suddenly jump to 1. On subsequent clicks everything works as intended. I should also note that this issue does no appear in Framer Studio. It only is a problem when viewing the project in-browser.

Read the entire post on Facebook