Animated Animal Running on Scroll


I am trying to get back into animation, but not sure if Hype can handle this or not.

I have been tasked with a looping animation of a running dog (keyframes of different poses) when the user scrolls. This is just a small element in the header area of a website. When the user stops scrolling, it would show the standing pose.

Is this possible?

Yeah, looks possible. I see two possible techniques.

First, you could do it manually. Just detect scroll events with JavaScript.

When scrolling, do something. After a few seconds of not scrolling, do something else. That could be managed with timers and boolean values.

You could also use Hype's Waypoint actions/events. This is all theoretical, as I haven't animated a running puppy, but I have had events based on scrolling. Here's an example...

...and the template is online...

Basically, timelines can be run depending on which elements are scrolled into view. So, you could add some triggers to the page, and then play dynamic timelines based on such actions. The dog would "run" to those points when scrolled into view. You'd have to manage animation and position, and it might not sync perfectly, but it's a no coding solution.

This reminds me of the Robomow website. I was very impressed with the work. I've chatted about it here before. But sadly, the webpage is not available.

there no official start- or stopevent in js for scroll.

one possible approach could be to run this on sceneload:


var scrollStartStop = function (callback) {

	// Make sure a valid callback was provided
	if (!callback || typeof callback !== 'function') return;

	// Setup scrolling variable
	var isScrolling, waitForScrollStart = true;

	// Listen for scroll events
	window.addEventListener('scroll', function (event) {
	waitForScrollStart = false;

		// Clear our timeout throughout the scroll

		// Set a timeout to run after scrolling ends
		isScrolling = setTimeout(function() {

			// Run the callback
			waitForScrollStart = true;

		}, 66);

	}, false);

	function (scrollState) {
    if(scrollState === "scrollStart"){
    hypeDocument.startTimelineNamed('yourTimelineNameHere', hypeDocument.kDirectionForward);
    hypeDocument.goToTimeInTimelineNamed(0, 'yourTimelineNameHere');

change the timelinename according to your needs

1 Like