How to achieve some cool effects from Adobe Slate with Hype


The first effect could be basically achieved, while taking a look into

But what i want to know how to do this cool background effect where an background picture is shown while scrolling (half the site, “The lethal left foot of Sam”) which is shown here ->
is that possible to do with hype?

Change image size when scrolling down
(Hans-Gerd Claßen) #2


hype works timelinebased. so setup a timeline which simulates the storytelling you want to achieve. secondly you would have to find a way to control it by the scroll-event which is currently not ‘built-in-supported’ though you have the possibility to find / write custom-js for this …
ondrag -> for mobile is supported. or are two examples of js-libraries working with scrollevents which should allow results like your slate-example.

(Trey Yancy) #3

For a developer, the impact of a major new release is like that of being dropped into a stadium filled with half a million starved chihuahuas while wearing a set of meat pajamas.

This said, I would think that the popularity of this type of scrolling interface would be a priority task in new feature development. Tumult’s integration of multiple layouts with breakpoints is timely, especially considering Google’s recent shift towards mobile-friendly ranking.

I have done something similar, but in order to get it to work I had to use a drag object and, because of the pixel-to-distance ratio, I had to radically drop the number of frames. Here’s what I came up with:

(BTW, while I could have used CSS3 to control the color shift at the start, I allowed for older browsers and created a dissolve between two photos.)


Thanks h_classen for sharing the links,
is it may possible for someone to provide an sample hype document which combine
within an current hype document with other animations?
That would be great

Control timeline by scrolling
(Hans-Gerd Claßen) #5

skrollr works with data-attributes. I wouldn’t try to combine it with hype.
may be this is an approach: (4.2 MB)
basic setup, not really tested …

How to "Scroll Synchronize" using Scroll Magic

h_classen, This function works as you describe in Chrome and Firefox, however it seems to have no effect in Safari. Do you know what might be the problem?

(Jonathan Langberg) #7

This works great! How would you change the step value so the timeline moves a bit faster on scroll?

(Jonathan Langberg) #8

Also, I added it as a section on this test page ( and the scrolling script does not work. Wait about 7 seconds for the main animation to stop, then scroll. The background rotation angle should change as you scroll. It works at the source URL, but not as a div within the page. See code below if that helps.

<div class="hypeContainerTest" style="margin: auto; width: 100%;">
<div id="test2_hype_container" style="position: relative; width: 100%; min-height: 100vh;"><script type="text/javascript" charset="utf-8" src=""></script></div>

(Hans-Gerd Claßen) #9

cool side :slight_smile: there may be a prevent default on the wp-side … so a scroll-event – as expected – will never get through…

you could give viewportactions a try is this case … trigger timelineactions depending on elementpositions :slight_smile:

(Fran Brennan) #10

I have this question, too. I know it’s an old topic but if there’s any new info and/or advice regarding this issue it’d be very gratefully received… I’m going round in circles at the moment :crazy_face:


It’s because the original doc uses a mousewheel event and this is simulated in Safari as a click drag rather than just a scroll of the trackpad. Could be what you’re running into?

(Fran Brennan) #12

Thanks for such a swift reply @DBear.

Hmmmm, that sounds as if it may well be the likely cause. D’you happen to know if there are any workarounds… or if there’s a best direction in which I could/should be looking? Happy to learn :slightly_smiling_face:


I think there are similar things here on the forum that share different approaches that may help. A search for parallax may help in getting some hits. Otherwise I would post new topic if there’s nothing specific to your case. Share a doc and see if anyone else has any solutions. I’m away from my comp right now so won’t be able to have a look at it. Later I may be able to look at it if still needed

(Fran Brennan) #14

Fab, many thanks for the advice (and offer of help).

I have, indeed, been poring over the parallax posts with forensic curiosity :thinking: but thus far @h_classen’s is the one example I’ve found which pretty much nails what I’m hoping to achieve… other than it doesn’t work on Safari :crazy_face:

I’ll keep hunting for and/or trying to create a solution :grinning:

(Fran Brennan) #15

I’d visited the excellent Survey Legend Tutorial a wee while back but wasn’t quite sure if it was the sort of thing I was looking for.

However, upon revisiting it with a fresh perspective I’m inspired :slightly_smiling_face: to pursue their method :+1::+1::+1::+1::+1:


This might help you too! I did this a while back just using the scrollY to control playback of animated timelines (2.6 MB)

(Fran Brennan) #17

Ooooo, many thanks! I downloaded a very similar version that you’d posted in another thread but this one seems slightly different and may well be a close solution. Busy picking over it now :grinning: cheeeeeeeers! x