How to achieve some cool effects from Adobe Slate with Hype

(Alex) #21

@petester sorry for my English, I think

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

(Pete) #22

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

(Alex) #23

@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? (463.5 KB)

(Pete) #24

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

(Alex) #25

Thanks a lot :slight_smile:

(Alex) #28

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:, you will find the first animation does not work at first access the page, but only works when you scroll twice, and attached document: (109.1 KB)
Anyway to make it works stable for “On Enter Viewpoint”?

Thanks so much!