Avoid Animation Reload after Resize?

[mgerhard (Markus Gerhard)]

I’ve created a responsive Animation with several Layouts. After Browser Resize the Animation always starts again. I’ve already tried to set variables in the Head of the HTML to avoid this but it seems that the document always gets loaded after browser resize. Any Idea - i just want to show the animation one time.

thx & best!

[h_classen (Hans-Gerd Claßen)]

may be use a persistant symbol …

[mgerhard (Markus Gerhard)]

symbols does not really work as i have to adapt the animation on the different screen sizes

[MarkHunte]

You could also use the scale property on the symbol. I have done this in the past, it does work but I admit it is not ideal in some cases and can be bloody awkward to configure individual changes when using scale especially if scale is used already on an element or sub symbol within a symbol.

I have even resorted to duplicating the symbols and matching their names to layouts then using JS to set them up in the layout.

[petester (Peter Borokhov)]

This is not a solution but rather something you might want to consider seeing as persistant symbol not cutting it for you.

I would just animate the desktop only for Ipad, Mobile i’d keep it static without any of animations?

Take a look at how its approached in the doc below.

Lake Nakuru Responsive Page

Michael Johann – 2015

.hype document

[mgerhard (Markus Gerhard)]

It’s all about a responsive Banner Ad - the Animation has to be played once on any format but should not repeat when changing browser size. Obviously everything gets reloaded when switching to a new Layout and i can’t even set a variable in the header to avoid repeating the animation. Maybe this would be a thing for the next update?!

[petester (Peter Borokhov)]

@mgerhard

I’ve created a responsive Animation with several Layouts. After Browser Resize the Animation always starts again. I’ve already tried to set variables in the Head of the HTML to avoid this but it seems that the document always gets loaded after browser resize. Any Idea - i just want to show the animation one time.

thx & best!

Mind sharing the doc with me I want to see why persistant symbol is not working for you.

[MaxZieb (Loves Hype)]

I have written some code that syncs symbols across layouts a while back.

How to retain the state of a scene in Hype

You need to save the State when leaving a scene and restore it when loading it. There is no general state you can access so you need to collect all the data by hand (timeline positions, displays) and then redeploy them (setting displays and timelines). There was a request yesterday that falls into this category Also check out the symbols syncing discussed here In general you can access the localStorage or sessionStorage (look these terms up) and you can put stuff into the window context…

leading to this (maybe it helps you too)

Switching between flexible layouts keep same place in timeline

Your welcome … here is a version that is more generic. It still only the “Main Timeline” but now direction, isPlaying and time is restored but it requires that the symbols that need to be synced have the same classname. This way the functions can handle more then one timeline. timelines-symbol-generic-2.hype.zip (62,5 KB) PS: if you add “autostart” to a symbol (remember on both ends) it will autoplay. The square in the example has it’s own timeline and starts on click.

[Daniel]

This might also help:

Howto: Synchronize timelines across layouts

If you wanted to synchronize timelines across layouts, you could use this code on layout load: var timelineNames = ["Main Timeline"]; for(var i = 0; i < timelineNames.length; i++) { var timelineName = timelineNames[i]; var timelineKey = "timeline_" + hypeDocument.currentSceneName() + "_" + timelineName; var timelineInfo = window[timelineKey]; if(timelineInfo != null) { hypeDocument.goToTimeInTimelineNamed(timelineInfo["time"], timelineName); if(timelineInfo["state"] == tru…

[petester (Peter Borokhov)]

Works wonders In this example using mavens code
BootSale.zip (964.3 KB)

This will come in handy for my ads thanks @Daniel. @jonathan would be great if we had a Hype UI solution for in a form of a check box next to the layouts?

[mgerhard (Markus Gerhard)]

awesome guys! thx!!!

[MaxZieb (Loves Hype)]

This will come in handy for my ads thanks @Daniel. @jonathan would be great if we had a Hype UI solution for in a form of a check box next to the layouts?

A general sync on layouts could only mean the main timeline or a rule that the timelines with the same name sync if this is enabled. If you want put this into the GUI, maybe the timeline panel would make more sense… labeled “Sync timeslines with same name across layouts”

In this example using mavens code

Looked at maven code … solid code. Funny how one keeps inventing the wheel.

[petester (Peter Borokhov)]

A general sync on layouts could only mean the main timeline or a rule that the timelines with the same name sync if this is enabled. If you want put this into the GUI, maybe the timeline panel would make more sense… labeled “Sync timeslines with same name across layouts”

True, I guess the reason why I had it in layouts is thats where this comes into play but your right it could def be in the timeline panel. The code is solid alright!