Multiple Timelines; Actions to Enter Viewport & On Mouse Click

I’m working on a mobile version that has a problem/solution. The problem/solutions are stacked - the preference would be for the solution (the infographic, not the label) to start to animate when it comes into the viewport.

I had it originally set up to just animate just like the desktops versions - on my phone (iphone7) Im able to see a labels for a problem/solution so I now there is more below, and Im also able to see the solution begin to animate even though I only see some. But can I do my question above instead?

Is there also a way to when I click the navigation - not only start, but start at the top of the screen.
Im playing with multiple timelines, etc but it’s can be confusing for me. Any help would be greatly appreciated.

https://davisandco.box.com/s/m7cfpjyde5kagypm7dwpgr51yh95oyh5

Thanks,
Kathleen

I’m not super clear on what you’re trying to do…

There is a line to scroll up with JS: window.top.scrollTo(0,0); which you could trigger on scene load.

You could definitely only have the solution animate when a part of the screen is visible, but as you know you would need to split the problem & solution animation into two separate animations. So you would place something out of the screen’s area (near the bottom of the solution area) that is the viewport trigger.

It would need to be below whatever largest ‘phone/phablet’ you wanted to support:

But maybe I’m answering the wrong question?

Sorry, I’m trying to solve a few things.

Thing A :slight_smile:
Yes, I would like to trigger for the scene to load at the top - but does it have to happen on a scene level? Is there a script or way that would allow to to utilize this type of function to go to different timelines?

Things B :slight_smile:
The animations already exist as separate items. I tried to put #2 in a separate timeline to see if I can do this. But Im not sure I can tell HYPE to ‘on click’ go to ‘x timeline’ and play as well as have a ‘when enter viewport function in there’

Does that make any more sense?

I also see these options for different sizes, not that I can’t make the height and width anything I want but I wonder why I dont see what you see. !24%20PM

You could run that function as a Timeline Action -> JavaScript Function also – whenever you want. Once you make a function out of it, you can run it whenever/wherever you need it.

If you make the timeline a ‘relative’ timeline, then when it is triggered (even after it has already played) it won’t jump around – it won’t appear to replay.

I’m previewing in Safari’s responsive design mode, which is close to the viewport that these devices represent. I think the breakpoints you have setup look good to me.

Unfortunately I myself do not know how to write Javascript. I was able to pick up scripts that my IT Director wrote (who is out on vaca for the week) and put them into this project when I thought I needed them. But if I need additional ones for now, I’m out of luck

Well the only one I mentioned is here, which will immediately scroll you to the top of the page:

If you wanted to run this as part of a timeline, you could create a function like this:

04%20AM

Thanks for that. I apologize for asking so many questions but this app is a little more than my brain can handle (and I hate to admit that!)

This is what I implemented and where but it doesn’t work.

DCo-TransformingContent-9WaystoReach-v4a.hype.zip (929.5 KB)

I can’t say with certainty, but the timeline action you have is on the 2_SOLUTION timeline of the Custom Layout, which would only get triggered when the “2_Solution” element enters the viewport. I’m guessing you would want this action to not be part of that action, but instead be on the main timeline, and probably on other layouts as well?