Is there a way to stop layouts from reloading and restarting an iframe, video and animations if I resize my bowser? Everything time I hit a breakpoint the animations restart, the iframe reloads and the video restarts. Is there a way to stop this?
no easy way here.
... means three different problems to cover.
a few hints:
1 Like
Thanks
Hi Les!
What follows is a completely different approach. It may or may not be suited to your situation as your question was a general inquiry without a demo Hype project. This concept has been a thought experiment for some time. Just now I created a "real" version that might help You out.
Layout Change via timeline JHSv1.hype.zip (14.4 KB)
Live Version here.
Overview
Suppose You do not wish elements to suddenly jump around when breakpoints are hit. Maybe You would like the elements to smoothly glide into new positions instead. The secondary benefit (or main benefit as in your situation) is that all current animations (especially non-timeline animations) will continue to run perfectly without a glitch or a reset when the new layout breakpoint takes effect.
A responsive layout effect is created by monitoring ""window.innerWidth". When the innerWidth hits a desired breakpoint a timeline runs which moves elements into new positions. Note: In this demo the elements move smoothly... they could also be set to jump instantly instead.
Set-up
There is just one scene; two animated elements; one functioning timeline ("Layout 1 to 2") - the "Main Timeline" is not used here. Two functions ("InitSetup" and "layoutAdjust"). The "Red Rotating Square" is animated by CSS located in the HeadHTML.
Effect
When the browser window is resized from wide to narrow the "Red Rotating Square" slides to the left and the "Bg" element lengthens. When the window is resized from narrow to wide the square slides to the right and the "Bg" element shortens.
Note: The "layouts" will adjust correctly to the current browser window width when it is first opened.
Of course You could do anything You wish via the layout changes. This demo is just a simple example of the concept.
2 Likes