Code
Code Override
Framer X

Schedule something to happen, and make it cancelable

Overview

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.

SetTimeout

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
  clearTimeout(hideBirdTimeout);
}

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!

PPS: See other pro tips, or share / request a new tip.


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!


© 2018 jimu Labs, Inc.