javascriptcoffeescriptlogicframerjs

Listen for scroll on framer scrollComponent


I'm trying to check the deltaY in framer scroll event and execute a function only when deltaY == 0.

It appears that framer (written in coffeescript) does not have a way of checking for this. Is there another way to say (in pseudocode):

if the change of the Y scrolling has been zero for 30 frames, execute function

framer scroll Events have this method:

scrollComp.isMoving

found that on this page: https://framer.com/docs/#scroll.scrollcomponent

But if I try this, nothing prints in the else part of the statement

if scrollComp.isMoving
    print 'moving'
else if scrollComp.isMoving == false
    print 'stopped'

///or this also does not work:

if scrollComp.isMoving
    print 'moving'
else 
    print 'stopped'

Solution

  • The Coffeescript equivalent of == is is, which is actually equivalent to === (checks value and type).

    That being said, if scrollComp.isMoving == false is a little awkward to say, it makes more sense to say something like unless scrollComp.isMoving or if(!scrollComp.isMoving) in JS.

    Ok, for a solution to your issue (which I don't believe either of the two above things will actually fix), when you are executing these print statements, more than likely you are doing so when the script starts up instead of doing it in async in an event handler. When your page loads is when your code enters that if/else statement, at which point, you are not scrolling so that will always be false. To capture the moment of the scroll, and run code when it happens, you need to register an event listener:

    scrollComp.onMove ->
      // Scrolling here! Do fancy stuff!
      print scrollComp.isMoving     // 'true'
    

    Now, to be able to trigger a function call 30 seconds after scroll stopped, we have to keep track of the time:

    // Define interval as 30 seconds.
    // (expressed in milliseconds)
    interval = 30*1000
    time = Date.now() // set timer to now
    
    scrollComp.onMove ->
      // We update the timer every time
      // scroller moves.
      time = Date.now()
    
    // We need to create an infinite loop
    // that will check the time since last 
    // move of the scroller, and execute
    // a function when the time has surpassed
    // some threshold.
    setInterval ->
      if (Date.now() - time) > interval
        // It has been 30 seconds since
        // scroller last moved.
    , 5000 
    

    That last 5000 number is just how frequently to run the time check; this will run every 5000 ms.

    If you really wanted to count frames, you could dynamically generate that interval variable by calculating the frame rate and employing some algebraic jujitsu.