Animation stuttering on website

Animation
1

Hi there,

I made this website for our YouTube channel with Hype and wanted to create a nice intro animation. This is the site: http://www.bendanproductions.com
And while Hype plays the animation very smoothly, pretty much every browser on a PC or Mac I open the site with, stutters heavily. This obviously doesn’t look nice.
I thought that this might have to do with the YouTube content loading in, therefor I already made two pages in Hype, one which only contains the intro animation in the timeline, and the other being the actual site with the YouTube video. After the first site is finished it fades to the second page - this all works beautiful.
But I still can’t figure out what makes the intro animation this slow. I animated the position, the opacity and the 3D rotation on all of the elements. Is this too much? All the header elements are small png files. Could that be a problem, or is the page still loading stuff in the background while the animation plays?
Do you guys have any idea what I could try to make this animation silky smooth? :wink:

Thanks in advance
Benedikt

2

Hi,

Can you post the zipped project so we can look at it. This may help use diagnose the issue rather than just looking at the result.

Cheers

3

Of course. Here is the zipped Hype file. I deleted a few of the unimportant pages, as the file was too big otherwise.
160815_index15proUploadForum.zip (292.6 KB)

Ben

4

To me it looks like it is all the video iframe that are slowing everything down.

I removed all the iframe video elements and the animation was ok.

You probably should only have them load as needed.

5

This seems to help.

Remove all the youtube video elements from all the scenes except the first scene ‘Home 2’

set the element’s innerHTML '<iframe width="640" height="360" id="youtubevid" frameborder="0" allowfullscreen=""></iframe>

Make the element into a persistent symbol - add to all scenes.

Now set each scene to load this function

	var videoScenes = {"Home 2":'http://www.youtube.com/embed/flSpSeIr7Bs?&amp;rel=0&amp;showinfo=0&amp;hd=1&amp;autohide=1&amp;color=white',
	
						"What really happens":'http://www.youtube.com/embed/fflSpSeIr7Bs?&amp;rel=0&amp;showinfo=0&amp;hd=1&amp;autohide=1&amp;color=white',
						
						"Star Wars":'http://www.youtube.com/embed/aPPVkbs9oN4?&amp;rel=0&amp;showinfo=0&amp;hd=1&amp;autohide=1&amp;color=white',
						
						"Mission Impossible":'http://www.youtube.com/embed/m97KHKAo040?&amp;rel=0&amp;showinfo=0&amp;hd=1&amp;autohide=1&amp;color=white',
						
						"Game of Thrones":'http://www.youtube.com/embed/Wro0VE6i-XM?&amp;rel=0&amp;showinfo=0&amp;hd=1&amp;autohide=1&amp;color=white',
						
						"Capuccino":'http://www.youtube.com/embed/xB52EeUOIUo?&amp;rel=0&amp;showinfo=0&amp;hd=1&amp;autohide=1&amp;color=white',
						
						"Battlefield": 'http://www.youtube.com/embed/MbC5mUU_z8s?&amp;rel=0&amp;showinfo=0&amp;hd=1&amp;autohide=1&amp;color=white',
						
						"Ben vs Dan" : 'http://www.youtube.com/embed/2EjvVNpObYU?&amp;rel=0&amp;showinfo=0&amp;hd=1&amp;autohide=1&amp;color=white',
						
						"Golden Candy" : 'http://www.youtube.com/embed/xYCrV2iFCPg?&amp;rel=0&amp;showinfo=0&amp;hd=1&amp;autohide=1&amp;color=white'}
						
	
	var sceneName = hypeDocument.currentSceneName();
	 
	var iframe = hypeDocument.getElementById("youtubevid"); 
	
	iframe.setAttribute('src',videoScenes[sceneName]);

and to run this function on unload.

var iframe = hypeDocument.getElementById("youtubevid"); 
	 iframe.setAttribute('src', '')
3 Likes
6

I have updated the load code to be much simpler using an Array like object

1 Like
7

Thanks a lot!
I will try to implement the code right now. I was away from the computer for one day.
I’ll update this post, as soon as I have some results.

Ben

8

I did everything you described above and the video does load on the first page. As soon as I try to view a video on another side though, the player won’t load.
Safari tells me the following:
Error in loadYouTubePlayer: TypeError: null is not an object (evaluating ‘iframe.setAttribute’) (HYPE-530.thin.min.js, line 14)
Could this have to do with the DOM not being loaded on the other pages when the browser tries to load the JS function?

Edit: Ok, now it works. I apparently forgot to delete the ID from the persistent symbol.

Edit2: Everything is up and running perfectly. And yes, the animations are silky smooth on all the devices I tested them on: www.bendanproductions.com
And I even learned something! Thanks so much! :grinning:

Ben

2 Likes