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

What is Framer? Join the Community
Return to index
John Grendon Enderby
Posted Apr 22 - Read on Facebook

Is there any reason why animationOptions wouldn't work as expected when animating a layer in a Utils.interval func? Doesn't seem to work right whether it is declared inline, or as general animation options. Attached an image to show the code.

14 Comments

Hannes Waller

Could you share your prototype? Would make it easier to help.

Also, you don't need time when you use spring animations.

John Grendon Enderby

Unfortunately it isn't something I can share at the moment (client restrictions). Will try and abstract something to share

Hannes Waller

Understood. I did a simple reproduction of what you have and that worked fine.

What is it that doesn't work? You get the animation but it doesn't adhere to animationoptions?

John Grendon Enderby

Yes exactly that. The parent container also houses a videoLayer bit I don't see why that would be an issue.

John Grendon Enderby

I am also getting lint errors on half written lines that persist for some reason. So for example if I were to write "return timeLeft" I'm getting re is undefined and that persists until I make a few other changes. The videoLayer is about 9mb but I wouldn't have thought that should be causing these problems.

John Grendon Enderby

🤔

John Grendon Enderby

Ok, so I have done an example without using client assets, and this is the result, one layer inside the Utils.delay function (and contained within the container), and one global layer without parents. Behaviour is very different in both cases, have popped them side by side and tried my best to start the animations at the same time. Link is here: http://share.framerjs.com/9xd3aok2x340/

John Grendon Enderby

Ok, so looking into this in a little more detail, I can achieve the result I want by not having the logo.states.switch function contained within the interval function. Would prefer to have it contained within the interval function so that I can tie in with the time left.

Hannes Waller

Uhm, this is quite odd. It works fine here. Both logo and layerA are using their animationOptions.

As for the lint errors that was probably due to you writing code in the interval, and with the live reload it booted up your prototype before you finished writing.

John Grendon Enderby

You're not seeing the logo spring out slower than layerA?

Hannes Waller

Sorry, I was a tad distracted. I did change the animationOptions and to be right after you add states to the logo. Also I changed the Interval to 1.0, why do you need it at 0.01?

Is this it? http://share.framerjs.com/7wwjahn2wprg/

John Grendon Enderby

Mostly because I wanted the timings in the banner at the top to match up with the time on the vide player controls. In fairness the code was from an older prototype. But it does seem to be the short interval that is causing the problem. I get really annoyed when times, counters don't match up when they should. Works fine with 0.5 as the interval time so that will have to do. Thanks for investigating! Much appreciated

Hannes Waller

Yeah, I see where you're coming from. But I'd say it makes little to no difference in this prototype that they aren't completely in sync.

No problem! Best of luck.

George Kedenburg III

hey John, one thing i noticed in your screenshot above is you have a spring curve and a time value on the same animationOptions. just FYI, spring curves arent effected by time because they model real physics (you could set time to 2000 and itll still do the same animation)

Read the entire post on Facebook