Avoid Animation Reload after Resize?


(Markus Gerhard) #1

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!


(Hans-Gerd Claßen) #2

may be use a persistant symbol …


(Markus Gerhard) #3

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


(Mark Hunte) #4

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.


(Pete) #5

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


(Markus Gerhard) #6

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?!


(Pete) #7

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


(Loves Hype) #8

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

leading to this (maybe it helps you too)


#9

This might also help:


(Pete) #10

Works wonders :slight_smile: In this example using mavens code :wink:
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?

synchronize


(Markus Gerhard) #11

awesome guys! thx!!!


(Loves Hype) #12

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”

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


(Pete) #13

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!