Code Override
Framer X

Schedule something to happen, and make it cancelable


How to schedule something to happen in X seconds, with the option to cancel it at any time?

In this example, we want to hide the bird if the user presses it and holds for 2 seconds. If the user releases the mouse too soon, the bird will bounce back to the normal size and won’t disappear.

We can use setTimeout() to implement this behavior.


onTapStart() {
  // hide the bird 2 seconds (2000 milliseconds) later
  hideBirdTimeout = setTimeout(() => {
    animate.spring(data.opacity, 0);
  }, 2000);

In onTapEnd, we’ll clear this timeout. So, when the mouse is released before the timeout function executes, it won’t run at all.

onTapEnd() {
  // don't hide the bird if released too soon

PS: If you find this tip difficult to understand, check out this course I prepared for you, where concepts are explained in a more digestible way. No programming experience required!

download Want the complete source file? Enter your email address below:

I'll also send you new tips when available. No spam, unsubscribe any time!

© 2021 jimu Labs, Inc.