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

What is Framer? Join the Community
Return to index
Jo Higgins
Posted Jan 29 - Read on Facebook

I've created a prototype that has animations on keyboard button presses. Is there a way to prevent a keyboard event from starting until the last animation has finished (to avoid button mashing)? (In axure, I can do this with the wait function, in flash I just disabled the button and enabled when the animation was finished).

I'm very much a beginner so your help explained in a basic way would be great! Thanks :)

9 Comments

Kevin Cannon

There is an isAnimating function you can use. Check that out.

Andy Jakubowski

Building upon Kevin’s answer, here’s how you could implement that in the keyboard event listener: http://share.framerjs.com/5932bpb4jf2v/

Benjamin Den Boer

Hey Jo Higgins, using "keyup" instead of "keydown" may also help you - it prevents users to press-and-hold.

Jo Higgins

Thank you for your help! I think I can use that isAnimating to stop all keyboard button presses, not just the button that caused the animation. If anyone knows a quick way to do that, i'd appreciate it.

Kevin Cannon

Can you share your example?

Jo Higgins

Hi I'm trying to figure out the best way to share. The share button isn't working for me - it might be some network restriction here at work.

Jo Higgins

basically the carousel moves left and right as you hit the left and right buttons on the keyboard. Works nicely if you don't press the keys too quickly. If you hit the keys like a maniac, the alignment is all thrown out. My code skills are basic and the long way :)

Andy Jakubowski

The problem might be that the new x value is recalculated before the animation has finished, which leads to things being offset weirdly. You could try using absolute values instead of relative ones to avoid misalignment. For example, have an activeCardIndex variable where you keep track of which card is active, and then you can animate the row to new position like so: row.x = activeCardIndex * cardWidth. The exact calculation will depend on your needs, of course!

Kevin Cannon

Jo Higgins - You should check is the animation is running to decide if you should do something. So the logic would be something like this:

On Key Press
Check if it's animating
Trigger Animation

That way, you don't need to disable the animations, just don't trigger a new one, if the animation is already happening.

Good luck!

Read the entire post on Facebook