Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jh-thank-you

Advice for Preloading Animations - General Speed / Performance

Recommended Posts

I will update this original post with the latest info as everyone shares their approach/technique:

 

GreenSock Community,

 

I just wanted to reach out and see what others are doing to help the animation speed/repaint/performance... I am pretty new to all this so I'm not sure what the best approach is... also as I search for solutions, sometimes, I find that I am starting to follow something that is not considered the best/latest approach.

Here are some of the links I am currently looking at for information:  See Below:

 

If you have any other good reads/tutorials/ approaches I could learn from it would be much appreciated.

 

All the best,

 

------------------------ Here are the latest links: ------------------------ 

 

BoostR - javascript utility for preconnect, preload and prerender - gitHub last commit 2 years ago

 

Preload: What Is It Good For?  - Smashing Magazine Post - 2016

 

 

 

------------------------ Animation Performance ------------------------

animation with images - GreenSock Forum Post - codepen here Animating an image series

 

 

*** Telling GSAP to preload animation properties ***

Use the progress() method: https://greensock.co...neMax/progress/

 

 

-------------------------------- Spritesheets ------------------------------

 

Spritesheets - look at PIXI - http://www.pixijs.com/

 

Optimize spritesheets - TexturePacker https://www.codeandweb.com/

 

 

 

 

------------------------------- Image Loading -----------------------------

 

PreloadJS 

PreloadJS LoadQueue Class Tutorial 

Preload Images : Image Gallery / SlideShow with GSAP Tutorial

 

Imagesloaded jquery plugin tutorial from Petr Tichy - https://ihatetomatoe...loading-screen/

 

Imagesloaded demo 

See the Pen Zeyeoa by mulegoat (@mulegoat) on CodePen

 

 

---------------------------- Image Optimization --------------------------

 

*** ImageMagic ***

( Will update after I research more)

ImagineGraphicsMagick or ImageMagic (similar solution to a service like Cloudinary without the expense - Note your hosting provider needs to allow command line tools ) 

For others reading this make sure to look at the Security Policy that should be implemented: 

https://www.imagemag...php?f=4&t=26801

https://www.imagemag...pic.php?t=29588

 

Here is Smashing Magazine Article about settings that will produce smaller and/ better quality images than Photoshop's settings:

https://www.smashing...th-imagemagick/

 

 

*** TinyPNG***

http://tinypng.com/

 

 

*** pngOUT ***
Ken Silverman's Utility Page http://advsys.net/ken/utils.htm
 

 

 

*** ImageOptim and ImageAlpha by Kornel Lesiński ***

https://imageoptim.com/mac

https://pngmini.com/

comparison to other utilities - http://jamiemason.github.io/ImageOptim-CLI/

CLI -version  https://github.com/JamieMason/ImageOptim-CLI

 

 

***jpegMini***

http://www.jpegmini.com/

 

 

 

------------------------------- Caching Assets - CDNs -----------------------------

 

CDN that specialize in images - Cloudinary.

CDN explanation and how-to video for Cloudinary https://www.youtube.com/watch?v=_lQvw2vSDbs

 

Good article on caching other stuff using service workers. https://developers.g...15/11/app-shell

 

Also, if you're loading a bunch of images, you might want to wait a little before you start animating. You can defer your animation by calling a function using setTimeout or requestAnimationFrame. Notice how this logs out B then A.

See the Pen 5d865701463e6dcbf89356212db82540?editors=0011 by osublake (@osublake) on CodePen

See the Pen aJcGl by jamiejefferson (@jamiejefferson) on CodePen

  • Like 2
Link to post
Share on other sites

Hi jh-thank-you :)

 

You linked to Jamie's spritesheet demo so I'm assuming that's the most relevant part of your question and what you'll be animating?

 

If you're working with spritesheets, I'd recommend taking a look at PIXI. The performance is amazing and it plays nicely with GSAP.

 

http://www.pixijs.com/

 

To optimize your spritesheets, check out TexturePacker

 

https://www.codeandweb.com/

 

That's my two cents for you.

 

Happy tweening.

:)

  • Like 1
Link to post
Share on other sites

PointC,

 

Thanks for the links... as for Jame's spritesheet... that was not my main focus but it is part of the rabbit whole I started down. I'm just sharing the links in case if anyone else starts searching this topic.

 

My main thing is preload or a prerender so that an animation is smooth. Part of what I am running into is animation lag and I'm not sure if it's due to image load or script load... I'm searching on how to use the dev tools to read where the bottlenecks are. I'm just starting to learn about performance so I don't know what the right questions or techniques are.

 

(I'm thinking it is image load... If I play the animation a second time it is usually smooth).

 

Thanks again for the response.

Link to post
Share on other sites

ahhh... I see.

 

Yep - images can be brutal and if you have a lot of them, you'll definitely want to let the user know what's happening with some sort of pre-loader. Scripts are usually quite fast and if you're taking advantage of caching with a CDN, they're rarely a source of any delay.

 

Happy tweening.

:)

  • Like 3
Link to post
Share on other sites

Hi JH

 

I'm doing something similar at the moment. I used the imagesloaded jquery plugin and referenced this tutorial from Petr Tichy which is an excellent place to jump off 

 

https://ihatetomatoes.net/a-simple-one-page-template-with-a-preloading-screen/

 

I made a quick demo here

 

See the Pen Zeyeoa by mulegoat (@mulegoat) on CodePen

 

Hope it helps

 

Cheers

  • Like 1
Link to post
Share on other sites

mulegoat,

 

Thanks, I will add these links to my first post... as others chime in I will keep updating it. This will hopefully make it easier for others to get the latest info.

Link to post
Share on other sites

No worries. I will try and update the pen to include a proper intro animation so you can check performance

  • Like 1
Link to post
Share on other sites

Hi ,

 

In addition to preloading images, you should look into ways of caching your assets. CDNs are really fast, and there are some that specialize in images, like Cloudinary.

 

And here's a good article on caching other stuff using service workers.

https://developers.google.com/web/updates/2015/11/app-shell

 

Also, if you're loading a bunch of images, you might want to wait a little before you start animating. You can defer your animation by calling a function using setTimeout or requestAnimationFrame. Notice how this logs out B then A.

See the Pen 5d865701463e6dcbf89356212db82540?editors=0011 by osublake (@osublake) on CodePen

 

 

 

.

  • Like 3
Link to post
Share on other sites

Thanks Blake, I really appreciate the extra info.

 

Are imagineGraphicsMagick or ImageMagic similar solutions to a service like Cloudinary?  My hosting provider has ImageMagic installed...

 

For others reading this make sure to look at the Security Policy that should be implemented: 

https://www.imagemagick.org/discourse-server/viewtopic.php?f=4&t=26801

https://www.imagemagick.org/discourse-server/viewtopic.php?t=29588

 

 

Here is Smashing Magazine Article about settings that will produce smaller and/ better quality images than Photoshop's settings:

https://www.smashingmagazine.com/2015/06/efficient-image-resizing-with-imagemagick/

Link to post
Share on other sites

Hello jh-thank-you,

 

One way to preload or to tell GSAP to prerecord your animated properties and values in your animation when using a timeline; is to use the GSAP progress() method.

 

progress() : https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/progress/

 

So if you have a timeline and right before you call play you call

tl
.progress(1).progress(0)
.play()

So for example if you had a timeline using TimelineMax or TimelineLite you could do something like this:

var tl = new TimelineMax({paused:true});

tl
.to(".someElement", 1, {x:20, y:20}) // animate element
.to(".someElement", 3, {x:300, y: 300}) // animate element

.progress(1).progress(0) // prerecords the values and properties upfront
.play();

Also using an image optimization tool like TinyPNG to get your images down to the smallest possible file size, and its free.

 

http://tinypng.com/

 

Happy Tweening :)

  • Like 3
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×