How to achieve some cool effects from Adobe Slate with Hype

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>

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:

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?

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

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:

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

parallax2.hype.zip (2.6 MB)

5 Likes

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

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

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

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?

@petester sorry for my English, I think

But I would like to control the timeline exactly by script with Parallel effect
Thanks

@DBear solved this for you.

Maybe your not understanding, how he’s doing it, There are 3 timelines when you scroll down ‘enter on viewport’ is activated when that happens timeline 3 starts. Maybe your not seeing it because of the height of the browser is at max? In that case, you have to minimize yours browser height, refresh it and scroll down you should see it animating. Its pretty straight forward buddy. @Dbear did actually convey what you were asking.

Either that or Im not understanding what your trying achieve. Please give me site, an example of what your trying to achieve.

@petester really great thanks, and sorry again for my poor english :smile:

I understand and I can exactly redo that work which you mentioned above. but that scripts only works for my situation that element in the browser windows on scene load.

Here is my sample document by using the scripts from @DBear ones.

and you will find the scripts not working with the images(or any elements)
Maybe you would like to make it work please?
Imagezoombyscript.hype.zip (463.5 KB)

I think I know what you want to achieve let me toy with this for a few mins.

Thanks a lot :slight_smile:

Hi @DBear

Sorry, This one works, but we need put the second timeline after the first one and leave enough time gap between two timelines so that the second could be show exactly at viewpoint, otherwise, we might miss the second animation.

I checked Hype javascript document:

hypeDocument.goToTimeInTimelineNamed(timeInSeconds, 'timelineName') #

Jumps to a specific time in the specified timeline for the current scene.

(timeInSeconds, 'timelineName'),

In your javascript, there is a line:
hypeDocument.goToTimeInTimelineNamed(scrollAmount * 0.006, 'timeline2')

so, scrollAmount * 0.006 is the length of timeline, or the height of scene(webpage)?

So, Here are two questions please:
1# how we should calculate the time gap between two timelines and make the second animation exactly show upon it enter the viewpoint? please?
2# This script works well "On Scene Load", but if make it "On Enter viewpoint", some times, the first timeline does not play, please check the demo: Shop | Lovcour.com Smartwatches,Headphones,women's fashion backpacks,Laptop Backpacks,Suit Garment Bags,Camping Hiking Backpacks,Photography Backpacks,Schoolbags,Duffel Bags,outdoor sports backpack,Business Bags,Lovcour Travel Luggage Bags, you will find the first animation does not work at first access the page, but only works when you scroll twice, and attached document:
Imagezoombyscript32.hype.zip (109.1 KB)
Anyway to make it works stable for "On Enter Viewpoint"?

Thanks so much!

thanks you