Viewport / Waypoint actions in Tumult Hype: Starting an animation when scrolling to an element

That may have come from you having the start bluebox timeline on the Main Timeline.

I did not see it straight away and it was confusing the heck out of me why the timeline was running when I removed the pauses.


The only type of timeline that will auto run is a Main Timeline.

All others will need to be kick started.

1 Like

Sorry for that thing on the main timeline - this was just a quick example for the forum, and I did not notice it myself. It was the pausing of the other timelines that was the real problem.

Thanks again!

1 Like

Hi, I’ve read through this thread and am not sure about whether any implementations are suited for my needs.

I’m really thrilled with the new release of the blocs integration! Currently, I am working on embedding a few animations into the page, while hopefully having a few that would keep the current div or bloc in place while the scroll would create the parallax effect as highlighted in this thread.

Any pointers or suggestions on how to accomplish this? I imagine that some JavaScript would need to be embedded in blocs that would track a variable that would be published by the hype document.

Like: if div is in view and view played through is true then continue scrolling else continue timeline.

I don’t know JavaScript we’ll. Anyone have anything existing that may be able to work with this new integration?

This is a game changer.

The current Blocs beta has an option to associate scrolling to the Main Timeline in a Hype document, so it sounds like that will do what you want if it makes it into the final build :slight_smile:.

3.4.3.b2 ?

Oh, I see in the embed feature. Nice I had only gotten so far as the preview. Will play around with it and see. Thanks for the pointer.

1 Like

If you didn’t already, see this reply: New Blocs Support Hype 4.0.3

Hello @MarkHunte,

I’m working on a project that probably will use your solution here (waypoints mhv1.hype.zip), but I need to improve it somehow.
My question is it possible the first square to be fixed to the top/bottom of the viewport and on scroll to trigger the animation to hide/show when viewport is moving across the scene?

example
and
example2

Thank you!

Solved, sorry to bother you!

1 Like

Hi, can i use this function scrolling horizontally? I think I have to change 'down' in 'left-to-right' ... is it right?

From reading the docs.

you have to register a horizontal scroll in the options.

, { offset: '50%', horizontal: true } );

and use directions left or right

1 Like

Yes! Thank you very much :slight_smile:

1 Like

Excuse me, i have another question... if i use the Chrome device toolbar (because the project is for iPad), it doesn't work...is it normal?

Don't think it fails to trigger, looks to me like the chrome device is not respecting the viewport width.
In my tests at least for iPad size, it scales the page to 100%.

Safari's Resposive design seems ok. Since you are going to be using an iPad my suggestion is you test with that.

the problem is that I havn't an iPad :frowning:

As mentioned here...

Why not use the iOS Simulator in Xcode?

Having an actual iPad is better for testing, but the simulator is generally better than nothing.

3 Likes

ow, I didn’t know it was available on the app store for free :slight_smile: okay i try it, thank you

See this on a tip to using the Simulator.

2 Likes

on the Simulator the Hype preview works well but very slowly, i also try to change Debug setting but nothing. I have a Macbook Pro i9 Big Sur...strange

It does seem a little buggy. Afer posting this I found that clicking a button seemed to hold it down.
I only new this because the button drives a stepper that changes a number.

1 Like