How to achieve some cool effects from Adobe Slate with Hype

1

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 -> https://slate.adobe.com/a/26dma
is that possible to do with hype?

1 Like
2

Hi,

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.

https://github.com/Prinzhorn/skrollr or http://janpaepke.github.io/ScrollMagic/ are two examples of js-libraries working with scrollevents which should allow results like your slate-example.

1 Like
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: http://ohair.com/OhairExteriors/exteriorsfeatures.html

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

4

Thanks h_classen for sharing the links,
is it may possible for someone to provide an sample hype document which combine http://prinzhorn.github.io/skrollr/examples/classic.html
within an current hype document with other animations?
That would be great

5

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

4 Likes
6

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?

1 Like
7

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

8

Also, I added it as a section on this test page (https://www.onemarkdesign.com/test/) 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="https://onemarkdesign.com/test2.hyperesources/test2_hype_generated_script.js"></script></div>
</div>
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:

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:

11

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?

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:

13

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

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 scrolldrag.hype.zip 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:

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:

16

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

parallax2.hype.zip (2.6 MB)

5 Likes
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

18

Hi @DBear,

Thanks for your sharing, this is exactly what I need, but it seems that the Animation 3 is only triggered on enter viewpoint, and it is not controlled exactly by Javascript animation(3), right?

but the two scripts content are exactly same as:

script for animation1

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

animaiton3()

window.onscroll = ( function () {	
	var scrollAmount = scrollY;
	hypeDocument.goToTimeInTimelineNamed(scrollAmount * 0.06, 'animation3')
}

Anyway to exactly control animation3 by scripts please? thanks

19

Hi DBear,

Tried your scripts, it seems only works for the situation the elements which are within the browser windows and on scene load, what about if the elements not within browser window on scene load? I tried to make a specific timeline play ON ENTER VIEWPOINT, but it seems always finished the timeline when the element enter view point.

Anyway to make any element timeline in a scene to be controlled by that scripts?

Thanks so much

20

Let me get this straight,

You want the ability scroll and as option when enter on viewport play the timeline?

Or

Enable the zoom picture scrolling on enter viewport?