To set this to run 'on scene load', you'll go to the scenes where you want to use it (it could be multiple scenes), open the 'Scene' inspector, and create an 'On Scene Load' --> 'Run JavaScript' action. You can then paste the above code in. This code assumes that your animation occurs on the Main Timeline of your document.
@Daniel Is there a way to disable this effect for mobile and iPad screensizes, so scroll only continues timeline on desktop, but then on smaller screens returns to normal scroll behavior?
Thanks @h_classen for the response! I think this doesn’t work however if I were to resize my window on desktop to a small size as the scrolling would still be prevent by event.preventdefault();
Is there a way to negate event.preventdefault(); ? Then I could add an event listener for window resizing and then prevent or allow scrolling based on the layout breakpoints in Hype
The Hype API has a function hypeDocument.currentLayoutName() that you could use to detect which layout is being shown, and then modify behavior based on that.
the library does not check for width /size but for device ...
this is tricky and not necessary. the best and cleanest approach is to work with conditionals.
say within your scrolling function you'll only run your intended action if some conditions (e.g. screensize ...) are matched
Similar/related issue. I’m trying to figure out how to continue (scroll down) and play in reverse (scroll up) a specific timeline within a symbol by using the mouse wheel. I’ve tried the above code and inside the symbol and changed the timeline name but I’ve not had any success. Any ideas on JS that would allow me to do this?
I’m still having trouble with this and can’t get it to work. Here is a copy of my code combined with your suggestion. I’m a beginner to JavaScript so I don’t really know much.
Just got back to my computer for the night. Here is a sample of what I’m trying to accomplish with mouse scrolling. Swiping is working fine on mobile but I want the same for scrolling to happen.
you never invoke the runOnLoad function; you’ll want to do this On Scene Load
you are using hypeDocument.getSymbolInstanceById(Scroll) throughout that function, but Scroll is a name of a symbol so it needs quotes around all usages: hypeDocument.getSymbolInstanceById("Scroll")
Your conditions for going forward/reverse aren’t quite right, but you’ll at least be able to see some results with the first two steps where you can now debug this and figure out the correct forward/reverse conditions.