How to "Scroll Synchronize" using Scroll Magic


(elcalibano) #1

I hope no one thought that this thread was going to start out with me describing how to use ScrollMagic with Hype. I’m actually posting here to ask if any one of the javascript experts can tell me how to use ScrollMagic (or a js library that works exactly like it) in order to: synchronize it to the scrollbar movement (like a playback scrub control). http://scrollmagic.io/

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.


Stretching image unsymmetrical while you scroll
#2

@elcalibano

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).

scroll_JHSv1.hype.zip (16.6 KB)

Hans’ original post:




Hans’ Hype project file (in the thread) used the scroll wheel as its engine (straight javascript); with a little futzing I got the script below to work with a scrollbar.


     window.onscroll = function() {scrollTest()};
     function scrollTest() {
     whatScroll = ((document.body.scrollTop) / 100);
     hypeDocument.goToTimeInTimelineNamed(whatScroll, 'Main Timeline');
    }

Note: The “100” in the code above gives more granularity to the animation, without it the animation is jumpy. You can also experiment with another number.


Hans’ script (there is also another “On Screen Load” script he uses which is where “step” comes from):


if (window.addEventListener) {
window.addEventListener("mousewheel", getScrollDir, false);
//FF
window.addEventListener("DOMMouseScroll", getScrollDir, false);
}


function getScrollDir(e){

	var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
	
	if(delta === -1){
	newTime = hypeDocument.currentTimeInTimelineNamed(timelineNameToControl) + step;
	hypeDocument.goToTimeInTimelineNamed(newTime, timelineNameToControl);
	
	}else{
	newTime = hypeDocument.currentTimeInTimelineNamed(timelineNameToControl) - step;
	hypeDocument.goToTimeInTimelineNamed(newTime, timelineNameToControl);
	}
	

}

#3

These are just a few examples of controlling timelines as you scroll and the javascript is just:

window.onscroll = function (event) {
	
	var scrollAmount = scrollY;
	hypeDocument.goToTimeInTimelineNamed(scrollAmount * 0.006, 'animation1')
	hypeDocument.goToTimeInTimelineNamed(scrollAmount * 0.006, 'animation2')
}

Simples!

There are some added things like “on viewport” actions and so on but you get the idea.

They are just quick demos and not complete projects. Just to get the point across.

http://hype-expert.uk/portfolio/parallaxScroll+Navbar-DBear-v1/

http://hype-expert.uk/portfolio/parallax3/


(elcalibano) #4

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)?

JimScott_Scroll.hype.zip (13.5 KB)
DBear.hype.zip (13.6 KB)

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.


(elcalibano) #5

DBear and @JimScott and @h_classen, I had another (hopefully) quick scroll javascript question. I noticed on some company’s website just now that a banner or navbar was appearing at the top, animating in, every time I scrolled back up, no matter where I was on the page, and it was a long, page full of scroll animations. Is there script for that?


(elcalibano) #6

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.

I’m still missing some understanding of the javascript, for example, being able to use multiple timelines with various animations, rather than as it currently is: just the Main Timeline, and having animations, on slides after the 1st, start later on the timeline. I’m sure this could be improved.

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.

Scroll Full Viewport Slides.hype.zip (73.3 KB)


#7

The numbers are a way to control the speed of the animation. Try changing the numbers and see what happens. “scrollY” & “ScrollTop” are javascript properties.


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.


(elcalibano) #8

Help! I found this script online that seems to work like a charm returning the appropriate message via the if/else instructions, but for some reason it’s not working as expected when I pasted it into my experimental document. https://stackoverflow.com/questions/814086/how-can-i-know-whether-the-scroll-of-the-user-is-up-or-down

In my document, it plays the main timeline when the scroll bar reaches the top of the page (after first scrolling down), but what’s supposed to happen is that no matter how far the user has scrolled down the page, the Main Timelines is supposed to play the instant the user changes direction. As you can see from that link above, it works as I described. But I’m sure I made some mistake in the javascript because I don’t know js. Can you tell me how to fix the code in my Hype document?

NavigationBarScroll.hype.zip (26.3 KB)


(elcalibano) #9

I actually combined the scroll javascript, the intent of which is to have a timeline play when scrolling in one direction, and reverse the same timeline when scrolling the other way, with the fixed object code posted by @h_classen. I think it’s pretty much working as intended now, that no matter where you are on the page, the menu/navigation bar is going to have the drop down animation play and appear on top of other objects on the page. It seems a little less than perfectly smooth though, in my quick tests. Does anyone have any suggestions on how to improve it, or feedback on it?

FixedMenu.hype.zip (49.6 KB)


#10

So let’s start out by taking full advantage of the excellent JavaScript Library You are already using - jQuery. We can dump the Timeline approach - which in this use is problematic (the reason why You have the Menu’s “stuttering” effect).

Hype Project Demo: FixedMenu_JHSv1.hype.zip (47.9 KB)

In the following script, in place of the Timeline, we are going use jQuery’s “slideUp()” and “slideDown()” feature:

window.onscroll = function() {
	  var currentPosition = scrollY;
		  if (currentPosition > previousPosition) {
		    $("#fixed").slideUp(500);
		  	} else {
		    $("#fixed").slideDown(500);
		  	}
		previousPosition = currentPosition;
	}

Notes:

  1. In the “HeadHTML” of our project the initial value of “previousPosition” = “0”.

  2. Scrolling “Up” will always show the Menu. Scrolling “Down” will always hide it. If You want a different outcome the code will need to be adjusted.

  3. The number value in parenthesis is animation time representing 1000th’s of a second. i.e. “slideUp(500)” is half a second; “1000” is one second; “1500” would be “1.5” seconds.

  4. jQuery is a potent JavaScript animation library. Check it out.


(Hans-Gerd Claßen) #11

One could also use continuetimeline instead of starttimeline though …

have a sunny day :slight_smile:


(Mark Hunte) #12

Or for those of you who do not want to use Jquery, just use the setElement() API, which looks just as smooth.
Also the ‘fixed’ can be set in this single function

var fixed = hypeDocument.getElementById('fixed')
fixed.style.position  ="fixed"
var fixedheight = hypeDocument.getElementProperty(fixed, 'height')

window.onscroll = function() {

  var currentPosition = scrollY;
	  if (currentPosition > previousPosition) {
	    hypeDocument.setElementProperty(fixed, 'height', 0, 0.3, 'linear')
	  	} else {
	   hypeDocument.setElementProperty(fixed, 'height', fixedheight , 0.3, 'linear')
	  	}
	previousPosition = currentPosition;
}

(elcalibano) #13

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.


(elcalibano) #14

Also, and I’m sure I’m not the first person to bring this up, but what I think Hype really needs, either accessible on the site, or accessible even from inside the mac app, is to be able to search for code extensions by keyword and be able to view the code, or possibly multiple versions of code, that achieve a particular effect or variations on an effect, and then, if needed, a couple notes that explain how to implement the code (such as select object, add on mouseover action, run javascript function. Or On scene load, add javascript function). For example, in this extension repository, if I search for scroll, the code (perhaps submitted by the community of experts and approved as working by Tumult) for scrubbing a timeline via a waypoint would be there, in a list, and the code for hiding and showing a menu based on direction of scroll would be there.

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.

Thoughts?


#15

Here is a Hype resource You might find useful (thanks to @MaxZieb & @MarkHunte):


#16

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. :smile: