Howto: Loop or Repeat an Animation


(Lucky) #36

This may be worth a note in case you want to have a blanket rule without needing a bunch of cases

if(typeof window.loopCounter ==='undefined'){
	hypeDocument.startTimelineNamed('animation', hypeDocument.kDirectionForward);
	hypeDocument.getElementById("text").innerHTML = "Number of loops = "+window.loopCounter;
	hypeDocument.goToTimeInTimelineNamed(6, 'animation');

You wouldn’t need to put any variables in the head as well, this has a check to see if the variable exists, if it doesn’t it will make it

Loop last scene back to start

Many ways to skin a cat.

The switch statement was to make it easier to follow. Plus it adds an ability for other things to happen at different times.

I feel this is getting a little confusing for anyone who is trying to follow along.

Why make “maxLoops” global? Why even have a “maxLoops” variable?


(Lucky) #38

So you can change the max loop whenever you want to? One of your variables was global so I assumed thats how you wanted all your variables to be. Up to you , just wanted to show the other way , since the case switch statement seemed a bit long and if you add more loops the code would end up huge. Different ways.


You could just reduce the cases to whenever you want something triggered!

switch (window.loopCounter) {
	case 1:
		hypeDocument.startTimelineNamed('animation', hypeDocument.kDirectionForward);
		hypeDocument.getElementById("text").innerHTML = "1st Time";
	case 4:
		hypeDocument.continueTimelineNamed('animation', hypeDocument.kDirectionReverse);
	hypeDocument.startTimelineNamed('animation', hypeDocument.kDirectionForward);

I was just following on from Mark’s example so as not to confuse. :smile: I wouldn’t have put my variables in the Head HTML



You guys… I am just eating all this information. It good for me. :slight_smile:

(Christopher Powers) #41

Worked for me, thanks!!!

I bought this program YEARS ago but never had the need for it until this week. I’m building out a series of HTML5 ads for a client and normally would have turned down the work because this is FAR outside my wheelhouse as a graphic designer.

However between the ease of Hype and the wonderful info in the forums, I think I might actually pull it off and do a decent job.


(Christopher Powers) #42

Okay love the looping but on the third loop, I need it to stop on the timeline at an earlier spot… I can copy and past code but have NO clue what it all means…so I’m a bit confused how to fix this issue. Any help is greatly appreciated!

Here’s a copy of the ad as its shown,

Banner Ad, loops 3 times but I want it to loop and stop before the last blue swipe on the timelime at about 10 seconds mark

Here’s the Files


Hi Christopher!

Since none of the principals in this thread have responded - maybe a manual repetition~duplication of your timeline would be the best route - stick with what You know & under your control. I gave this approach a quick demo (original timeline + 2 dups) - it only added 12K to the total file size (vs. one rendering of the timeline).

BTW: Nice gradient image transition - very effective.

(Mark Hunte) #44

How the code works .

The Hype function gets called by the keyframe events.

Inside the function we have javascript methods that can talk to the elements and either send them commands or asked them for information. The ** methods** then work together to do something with the info like issue more commands.

So javascript is a language we can control or query a web pages elements and properties.

We also have objects in the javascript known as variables.
The javascript methods can store information in the variables.

Variables are like magic containers. They can hold different types of information, like numbers, text strings, arrays of information, references to elements that will channel any instructions or queries to the real element it is referencing.

Now imagine that ** methods** normally can only talk to variables created inside their parent functions. We call this within their own scope.

If methods share a parent function then they can normally see and access any of the variables within it.

Variables within the scope of a function normally only exist while the functions is running.
When the function completes the variables are wiped from existence along with the scope instance.

If the function is run again the variables are created from scratch as is it’s new scope. We start with a new blank canvas.

There are times when we want to have a variable remain in existence after a function has completed it’s run.

But just like variables, the scope of a function is also created from scratch when the function runs again. So we need to create a special variable which will stay alive throughout the life of the webpage’s scope rather than only in the scope of a running function and can be accessed from any function when that function runs.

We call these type of variables global variables

We prefix Normal variable with the word var. This makes it private to only the scope of the function.

We can normally attach a var to the window’s (webpage) scope thus making it global and immortal.


fooVar is now attached to the windows scope and can be accessed by anyone.

In the Head file we place a global variable.

We place it here because we want it to exist when the page first loads.

This global var will be used by the function’s methods to store the count of the loops and also will be accessed by the functions methods to check that count.

Our global var is called window.loopCounter

We also need to initially give window.loopCounter a value.
So in the head we tell it to store a value of 0.

In the new example I have actually changed that to the value of 1. which I think will be easier to understand the counting sequence and gives us 3 loops instead of 4.

window.loopCounter =1;

We now have two Hype functions. ( I am going on what I think you are after )

The original function you had which was called at the end of the timeline.

	if (window.loopCounter <= 3) {
	hypeDocument.startTimelineNamed('loop', hypeDocument.kDirectionForward)

This is a simple function that works its way down each line of code and executes it.


This is shorthand saying window.loopCounter equals it’s current value plus 1 and in the long form would be written like this

window.loopCounter = window.loopCounter + 1

window.loopCounter has become a persistent counter that we can read from and update.

if (window.loopCounter <= 3) {
	hypeDocument.startTimelineNamed('loop', hypeDocument.kDirectionForward)

this is what is known as an if clause it’s wording/syntax is pretty straight forward.

The code/ statement within the brackets ( ) is computed first.
The result must return a true or false

The statement

window.loopCounter <= 3

This is us saying,

is window.loopCounter less than 3 or is window.loopCounter equal to 3.

We use the operators < for less than and = for equals.

Putting them together means we only need to ask this in a short abbreviated way.

if the resulting value of that code within the brackets is true we then and only then execute any code within the curly braces { }.

The new function.

On the timeline I have added another keyframe action that is positioned 1 second in. ( 10 seconds before the end of the timeline which lasts 11 seconds)

The action calls the second function.

The intent of this function is simply to pause the timeline at the 1 second mark if the timeline is starting it’s 3rd loop.

The code should now make sense.

We check if we are on the 3rd loop. if so we pause the timeline. (100.3 KB)

I hope this makes sense and hope my attempt to simplify whats going on is not bent out of shape too much for any coders out there… :smiley:

(Christopher Powers) #45

Thanks for the help. I’ve tried a variety of the scripting here to get it to stop on after the third loop but it didn’t work. Also thanks for the compliment about the gradient. I am boxed in with the art directors vision on the color/darkness of the images and some of the text really has been hard to read with that gradient…LOL its been a struggle w/ art direction…

To give you an idea how over budget and over time we are, we’ve spent 5xs longer on redos of the photos and they’re still not happy w/ how dark they are…myself and another graphic designer have retouched them 5x’s… at some point, its the quality of the originals that’s the issue and not the photo retouchers but they’re the client… LOL

Thanks! I’m hoping I had the coding right for the ad platform too, I’ll see when it goes to the ad platform client but keeping fingers crossed!

(Mark Hunte) #46

So are you saying my last post did not help ??

(Christopher Powers) #47

No, not that, the client changed gears and redid the layout so I don’t need it stopping where I did --so unfortunately since I couldn’t resolve it in time, they just ditched the storyboard and altered it and they’re too rushed for me to keep messing with it.

When its all overwith, I will explore it on my own but they’re fickle and its my first html5 animation ad so their patience is unfortunately very thin.


Thank You Mark for taking the Time to summarize~explain the thread!

(Christopher Powers) #49

Thanks Mark! I do appreciate it, I am going to review it and attempt it the next ad now that I have new ones coming down the pike. I do appreciate the help!

(keith) #50 (24.4 KB)
Can anyone help me figure out why my hype document isn’t looping only 3 times? This never happens for me “the loop timeline starts the animation again by calling the same function.” Using MaekHunte’s solution


It looks like on line 6 you have:

hypeDocument.startTimelineNamed('Main Timeline', hypeDocument.kDirectionForward)

Since there is no loop timeline, you should use ‘loop’ instead of Main Timeline. Also, you have the loop function running at the start and end of your animation – you can remove the initial timeline action. (39.0 KB)