Start animation when user scrolls back up to the top

1

Is the there a way to start an animation when the user scrolls back up to the top?

2

You would have to use code. So, perhaps when the interaction happens for the user to “scroll to the top” you would check how far from the “top” the user is.

If the interaction is on a scene basis then on scene load

window.onscroll = function(){
    if(window.scrollY <= 0){
        // play the timeline
    }
}

On an element basis then:

let box = hypeDocument.getElementById('box')
box.onscroll = function(){
    if(box.scrollTop <= 0){
        // play the timeline
    }
}
2 Likes
3

Thank,

Unfortunately, I'm not great with code. I'm not a developer at all. I can't seem to get this work. I think I might be missing something. ScrollTop.zip (13.3 KB)

4

Could you use an On Viewport Enter action set to start a timeline with an invisible element placed at the top?

1 Like
5

For some reason that seems to only work when you scroll down but I can’t find a way to get it to work when the user scrolls back up to the top.

6

The code you were using wasn't well formed:

  1. it was using ticks instead of single quotes for the timeline name
  2. It was using Forward instead of hypeDocument.kDirectionForward
  3. It was missing a closing curly bracket

ScrollTop-fixed.hype.zip (13.5 KB)

Sounds like you were using On Viewport Exit instead of Enter? Regardless the code above might work better if you don't want it to immediately trigger, as a viewport action would.

7

Thanks