Breakpoint triggering scroll animation


(Lesley Piercefield) #1

When I resize my browser. I notice that a scroll triggered animation starts for just a second. It’s like a blink. I am using the “sticky” tag so the maybe causing the issue not sure. I think it’s because the trigger is technically exiting the viewpoint in between breakpoints but hey what do I know.

I am just creating prototypes. So I could present the smaller breakpoints as a different document. Wouldn’t be impressive but it will get the job done. I am just wondering if anyone has come across this issue.


#2

Sounds feasible! Not sure I’m understanding the logic for having a “sticky” element with a scroll triggered animation as technically it would move (unless you have something else triggering the animation) and if that’s the case then unless that something else is in the viewport when you change sizes then the first theory would/wouldn’t come into effect. If you can share a doc so people can see what’s what perhaps reproduce it then perhaps we can offer an alternative to keep it just as impressive. In answer to your question, I haven’t come across this myself.


(Lesley Piercefield) #3

Thanks for the reply,

I don’t know if the client would be OK with me posting this. The “On Enter Viewport” does seem to trigger the animation everytime the browser hits a breakpoint. I know the client will see it as a bug. It will get distracting. I’ll think of something.


#4

Ok … can you re-create the “bug” in a new, simple document? Using a couple of elements and your technique for the sticky and animation. Then if it does it’s possible it could be a bug but also there could be another way to achieve the same effect. Possibly using a little function to check if the animation has fired once then don’t fire again. Need to know how you’re doing this though to get to the nitty gritty.


(Lesley Piercefield) #5

Thanks

I put together this quick file. It has the same issue. If I adjust my browser enough to hit another layout the animation flashes for about second. Tried different browsers. The issue seems to be the “on enter viewport” action. I guess entering another layout/breakpoint is entering the viewport so it starts the animation just as it would if the user was strolling.sticky_header_layouts_test.hype.zip (37.8 KB)


(Jonathan Deutsch) #6

Try using Continue Timeline actions instead of Start Timeline. I think it is being run again and this causes a restart. Continue (without “can restart timeline” checked) looks like the correct behavior to me.


(Lesley Piercefield) #7

Thanks I will give it a try