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.
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:
Thing A
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
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’
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
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?
