Scene scroll trigger

Using JavaScript with Hype
1

Hi Guys,

I’m working on a website where the pages are setup within individual scenes and the user can scroll to transition between them. The issue I’m having is that I want a menu (currently persistent symbol) to animate in on the second page (scene 2) and remain for the duration of the other scenes apart from when the user scrolls back to the home page (scene 1).

As shown in the example this all works but I want to hide the menu (trigger the “men_shrink” custom behaviour) on the unload of scene 2 instead of waiting for scene 1 to transition and load. The issue is if I set “men_shrink” to fire on the unload of scene 2 to hide the menu during the transition (which is the desired effect) it also does it when scrolling in the other direction to scene 3 where I need it to remain unchanged.

Im guessing I need to only call “men_shrink” when its detected that the user is scrolling to the previous scene (scene 1) when the current scene = scene 2 and then set to trigger “men_shrink” on the unload of the scene?

Any help would be great.

scrolling menu.zip (15.0 KB)

2

Hi James!

Hype Demo project: scrolling menu_JHSv1.hype.zip (25.0 KB)

• The function “untitledFunction” has been renamed to “animateMenu”.

• In this script the local var “upORdown” is now a global var.

• The symbol “Menu Bar” has been given an ID of “menuBar”.

• The symbol “Menu Bar” has been eliminated from “scene 1”. (Do we need it?)

• There is a new function “sceneTwotoOne” that is called by the “On Scene Unload” handler for “scene 2”.

function "sceneTwotoOne"

var whatScene = hypeDocument.currentSceneName();
		
if(upORdown === 1 && whatScene == "scene 2") {
var menu = hypeDocument.getSymbolInstanceById('menuBar');
menu.continueTimelineNamed('men_anim', hypeDocument.kDirectionReverse);
}
5 Likes
3

Hi @JimScott,

Works perfectly!!! Has made my Friday morning a good one!

Many thanks

1 Like
4

I really love how someone just dishes out code to support someone else his wishes. I find this magical for a non coder.

4 Likes