Howto: Loop or Repeat an Animation

May I ask for an example file to see it work?

I think I just found it and fixed it.

added an Action with a name called ‘final’.

Then updated the code inside the loop.counter action:

window.loopCounter++;

if (window.loopCounter <= 2) {

hypeDocument.startTimelineNamed('loop', hypeDocument.kDirectionForward)
}

if (window.loopCounter == 2) {

hypeDocument.goToTimeInTimelineNamed(12.21, 'final') // set.time to end, jump to empty named action
hypeDocument.pauseTimelineNamed('final') // this needs to be here or the timeline will continue
}

Now what would be nice if I could add this: hypeDocument.kDirectionReverse to see if it would play backwards and not jump. UPDATE: Just tested it… don’t work. But that is a compromise I will accept for the time being. The main problem is solved. See the short mp4: 300x250_MR_BDF_wechseljahre3.mp4 (2.1 MB)

Banners are live on a temp-page (after 30 days will get deleted) :smile:
http://bdf1150586.businesscatalyst.com/index.html

timelineLoop.hype.zip (18.0 KB)

1 Like

You can add this at the end of my example like this:

case 4:

hypeDocument.continueTimelineNamed('animation', hypeDocument.kDirectionReverse);

break;

and then have a timeline action that calls a javascript function at whatever point in your timeline you want to end and just put in

if (window.loopCounter == 4) {
    hypeDocument.pauseTimelineNamed('animation');
}

haven't tested this but it would work

D

So I will give this a try:

window.loopCounter++;

hypeDocument.getElementById("counter").innerHTML = "" + window.loopCounter + "";

switch (window.loopCounter) {

case 1:

	hypeDocument.startTimelineNamed('animation', hypeDocument.kDirectionForward);
	hypeDocument.getElementById("text").innerHTML = "1st Time";
	
	break;

case 2:

	hypeDocument.startTimelineNamed('animation', hypeDocument.kDirectionForward);
	hypeDocument.getElementById("text").innerHTML = "2nd Time";
	
	break;
	
case 3:

	hypeDocument.startTimelineNamed('animation', hypeDocument.kDirectionForward);
	hypeDocument.getElementById("text").innerHTML = "3nd Time";
	
	break;
	
case 4:

	hypeDocument.continueTimelineNamed('animation', hypeDocument.kDirectionReverse);
	hypeDocument.getElementById("text").innerHTML = "4nd Time";
	
	break;
}
if (window.loopCounter == 5) {
hypeDocument.pauseTimelineNamed('animation');
}

so I testet it and it works fine. Thanks D. That is a nice loop.

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

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

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

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?

D

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";
		
		break;
		
	case 4:
	
		hypeDocument.continueTimelineNamed('animation', hypeDocument.kDirectionReverse);
		
		break;
	
	default:
	
	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

D

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

2 Likes

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.

Thanks!

1 Like

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.

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.

window.fooVar.

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.

window.loopCounter++;
 
	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.


window.loopCounter++;

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.

728x90-m1.hype.zip (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:

3 Likes

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!

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

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!

1 Like

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!

1 Like

OEA-hype.hype.zip (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