I have a short animation that restarts every time the browser width is reduced and a new layout is triggered.
I see that this can be resolved by converting this animation into a persistent symbol, meaning that the animation is essentially synced across all layouts.
The animation will only ever play once though - so if that scene is exited, and then navigated back to, the animation does not play again and instead, just the final frame is displayed.
How can this be triggered to start every time that scene plays?
If I understand you right then you can use a bit of JS to run on each layout load.
To save you adding this manully to each layout scene you can add the code to the head file
<script>
lastScene = ""
function layoutRequest(hypeDocument, element, event) {
var theSymboles = hypeDocument.getSymbolInstancesByName('mySymbol')
if (event.sceneName == "scene1" && lastScene !== "scene1" && typeof theSymboles[0] !== 'undefined'){
var i;
for (i = 0; i < theSymboles.length; i++) {
theSymboles[i].startTimelineNamed('Main Timeline', hypeDocument.kDirectionForward)
}
}
lastScene = event.sceneName
}
if("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({"type":"HypeLayoutRequest", "callback":layoutRequest});
</script>
The code will run everytime a layout request is made.
It checks the current scene name if the scene matches & was not the last scene ( i.e resized ) it will run the symbols timeline ( symbol is chosen by symbol name in example )
This solution is great for certain scenarios and allows for playback over different layouts without the animation restarting.
I do however have the requirement, to alter the layout, size and position of elements in places, which will mean that a persistent symbol will not work as changes here are obviously global through the project.
So non-symbol items placed on the root timeline is ideal for this as I have total control over these across the layouts. But then i’m back to issue before where adjusting the browser width to get to alternative layouts triggers the animation to restart.
Please see attached simple demo to see what I mean.
Is there anyway to essentially sync the timelines of all the layouts?
I cannot use symbols here because I need to be able to edit the content for the different layouts.
So this example just has content in the root timeline (no symbols).
The problem is though is that the timeline starts off from new every time a new layout is triggered.
I am just wanting to know if the timelines within the different layout can be synced together rather than having them running individually when the browser width adjusts.