I’m sure this will be built in to either 4.0 or 4.5, but in the meantime, is it possible with custom code? I couldn’t find an example here that involved scroll rather than drag.
I’m surprised that when I searched for ScrollMagic on the forum nothing came up. It seems like the examples on this page are exactly what I’d like to achieve, scrubbing the timeline as you scroll down, and reversing the timeline as you scroll up, rather than just triggering a timeline to play, as with the On Enter/Exit Viewport actions.
I found and adapted the following from a post by @h_classen… (search term “scroll” - it’s usually good to go general and cast a wide net when your specific searches are coming up empty, even though it takes a little more sorting through the pile).
Dbear, and @JimScott, these are both really cool. I can’t believe that no one had exactly posted these scripts or scripts that worked like it (even though Jim built on Hans’ scroll wheel script). It seems like many people would want to do scroll-based animations using Hype as it’s showed no signs of going out of style for years. I’ve attached super quick samples using both scripts. Perhaps both of you could explain how they work (including what the numbers mean)?
I was surprised that DBear’s script has ‘animation 1’, ‘animation2’, which I thought had to be the names of the timelines, where the animation takes place, that starts when the trigger waypoint On Enter Viewport happens. Instead, the animation takes place on the Main Timeline, and it works fine.
I was also surprised that with both scripts, there only needed to be an On Enter Viewport action and no On Exit Viewport action was needed. The animation reverses, and is controlled by the scroll, when scrolling back up (or in a downward motion using two fingers on a macbook trackpad).
Another question I’ve had, is the proper way to do waypoint/On Enter Viewport type of scrolling animations that work on any device to use Layouts? Because I’d be worried that I’d set all these precisely vertical positioned waypoint rectangles, and then they’d be triggering animations at the wrong time in the scroll because of the size of the browser window or device screen.
I’ve created a template, using one of the scroll animation scripts, to show others and for anyone to build upon. I had worked on this concept in another program, before realizing, with the script help in this thread, that it’d be possible to do it in Hype. The concept is that you have full viewport-sized slides, using the flexible settings, and set waypoint objects to trigger animations. Previously, in others’ scroll animation samples, it looked like mostly the waypoints were being used to play an animation but not control an animation.
But the concept works. Take a look. It probably could’ve been made to show the concept in a simpler way. Also, the last thing I added was the smooth scroll animation, shout out to @Daniel And sorry that the animation example is not that amazing. Please give me any comments and tips to improve.
If I understand You correctly You wish for the Menubar (or whatever) to appear when You start scrolling back up the page. One possible way would be to track where the viewer is on the page using "scrollTop" or "scrollY" (as in the previous examples of the scroll animation). Use variables to compare the last scroll number with the newest scroll number. If the newest scroll number is less than the previous scroll number the viewer is going back up the page - so show the menu bar.
You also could set some sort of minimum... e.g. the viewer must scroll back up the page at least 20 pixels before showing the menubar.
Just a "thought experiment" have not done this myself.
I’m going to work my way through all these versions, but Mark, can you post a sample Hype doc. so I can make sure I’m implementing that code correctly, as my first attempt had the fixed position working, but not the show and hide part.
This might be an intermediary repository for popular extensions, until that time where they might become built into the interface.
Right now, one can search in the forum, but this is not super efficient. I love it now, and I especially love the R&D and intercontinental cooperation that goes into solving issues, but combing through threads that may be years old (meaning links are dead, solutions are outdated —because they’re now built into Hype) is not ideal. Right now, the forums are a way to try and find techniques and code, before asking for real time help from the community, but I wonder if a lot of the brilliant solutions and knowledge is really getting saved and disseminated to the wider user base, especially with scripts that unlock the greater capabilities of Hype to people who aren’t coming from a code-writing background.
One could also just continue using the “gotoTimeInTimelineNamed” as in my example as that would move the timeline forward and backwards naturally and then create some conditionals to control when it plays. Many many possibilities.