Resizing animation triggers animation again

Responsive Responsive Layouts
1

Working on a responsive design and wondered if there is a way to stop the page from animating again when you resize the browser window.

I have an “intro” animation. when I resize the browser to mobile width it goes to the mobile site but opening the browser up again triggers the “intro” animation again.

is there a way to tell the browser that the animation has already occurred so as not to animate the “intro” again?

2

Possibly you could create a global variable that stores a value and check against this on layout load.

localStorage.fired = true; /// create this after the animation. (i.e at the end of the timeline)

then on layout load create the check

if (!localStorage.fired) {
	hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward) /// of course this will be whatever you've named you timeline
} else {
	// do something on layout load if the animation has already played	
}

NOTE You have to also pause the timeline if you are using the Main timeline / another one on layout load. We are using localStorage because we don’t want the variable to disappear after we change layouts. Also if you need to fire the timeline when user closes window and comes back you need to get rid of the localStorage variable (or store as a cookie with an expiry)

at least this is what I would do

3

thanks for your response!

I’m a total dunce when it comes to code. Can you let me know how to implement this? :-/

4

Hi @SlatableApp

Here is a document showing what I mean.

playIntroOnce.zip (55.2 KB)

2 Likes