Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jlo

setInterval Animations

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Alright, another question Greensock Guys...

 

Was having a look at the Served ping-pong site the other day, have a look at it here:

 

http://www.served-mcr.com/

 

Great site, loving the animation in it. Noticed they're using TweenMax and Scrollorama among other scripts, nice.

I was interested in the tiny background animations they've included. I created something very similar a while ago with CSS Animations and Keyframes, and in the spirit of cross-browser compatability I wanted to recreate it with JS. I've been hearing more and more lately about animated PNG's using this method (as opposed to an Animated PNG, or Firefox's APNG).

I get how they're using setInterval to call an individual .png file every x second to create the illusion of an animation, which is pretty cool, and a huge time/file-size saver when compared to say using .gif's, but I haven't been brave enough yet to try and create something similar with the GSAP.

If any of you guys have the time could I ask for any suggestions or examples of how this might be done with Greensock? I've included some makeshift assets for you to use, just five images of squiggly lines you could use to trigger through, if that makes it easier ;)

 

Appreciate any help you boys have.

 

Cheers

post-16921-0-15065800-1383458026_thumb.png

post-16921-0-46428400-1383458027_thumb.png

post-16921-0-40056000-1383458028_thumb.png

post-16921-0-45469000-1383458029_thumb.png

post-16921-0-43029500-1383458030_thumb.png

Link to comment
Share on other sites

I do this sort of thing a lot so I had the code lying about; I've set up a

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

to show the effect.
 
I've only used coloured divs instead of images because I'm lazy, but the change between divs and img's is minor.
 
Also it doesn't behave exactly like a GIF - this design works better when all the images have loaded before play begins, as it will play all 'frames' regardless of whether the image is loaded or not (you might have noticed this happening on the ping pong site loading image). Setting this up for autoplay and waiting for each image to load etc, like an actual GIF, would be quite a bit more advanced.

Edited by jamiejefferson
changed the codepen to use images (divs etc would still work), and included sprite sheet support.
  • Like 1
Link to comment
Share on other sites

Hi;

 

Take a look at my pen: 

See the Pen ikLsl by bassta (@bassta) on CodePen

 

I use single image that is split into regions and then just move it, to simulate frames. I prefer single image because with single image you have single call to the server and this speed things up. Take a look of my code, it is ready to use, just set up your options ( frames : 20, //frames start to count from 1

frameTime : 0.4,
gifWidth : 200,
gifHeight : 200,
spriteUrl : "test.jpg",
spriteRows : 4,

spriteColumns : 5 )

 

With my code you get a timeline, so you can play the animation, stop it, reverse it, speed it up or down etc. 

  • Like 2
Link to comment
Share on other sites

Ah good ideas Chrysto. I had been saving the timeline reference on the DOM element, but I updated to make that a little clearer now, cheers!

Link to comment
Share on other sites

Jamie, there is also a quicker way, that is probably better for small images or animations with less frames:

 

See the Pen FfeAa by bassta (@bassta) on CodePen

 

Just a single TweenMax that tweaks backgroundPosition of the image. For example you have 10 frames, you just configure SteppedEase to 10 and get the animation ;) But for animations with larger images or a lot of frames I would go with the previous code ;) 

Link to comment
Share on other sites

After seeing the support, I would definitely go out with GSAPGIF or steppedEase animation ... 

Link to comment
Share on other sites

Haha as soon as I saw that I knew it looked familiar; good catch.

 

Doesn't look like apng is going to catch on anytime soon...

  • Like 1
Link to comment
Share on other sites

Probably have to create a jQuery plugin and documentation for GSAPGif :) 

  • Like 1
Link to comment
Share on other sites

Hey guys, thanks so much for the replies, and apologies for the delayed one of my own, had to urgently jump on to some other work.

 

Jamie, thanks for the quick feedback, and you're right, the preloader is definitely a wise move, even with animations this small.

 

Chrysto, you're the man - that's pretty much exactly what I was alredy doing in CSS, just using the steps sub-property and one long image much like a sprite-sheet to move the focus along at set durations. Was a lot easier, much prefer doing it that way, and the browser support is great, I'm just trying to learn to do it the 'proper' way I guess, in JS.

And great pens too, perfect simple examples to use. I'm working on one at the moment, an alternate approach to calling multiple animations at once, will put up a link once I'm done.

 

And Jonathan, thanks also for the info, but you knew I was joking, about APNG's, right?? It hasn't been supported by anything other than Firefox from the start, and I'm pretty sure it's been scrapped now too.

It looked good at least...  :P

 

Thanks again for the help boys.

  • Like 1
Link to comment
Share on other sites

Hey Chrysto, using the shorter method you described above, do you know if there's a way to loop the animation seamlessly, without a pause at the end of it's 'frames'? I keep getting through my steps, then it stops to to think for a second, then it restarts the animation. Tried playing around with the repeat and getRatio method but didn't have any luck.

Link to comment
Share on other sites

Don't worry, figured it out - added the repeatDelay method after the 'repeat: -1', set it to -1 as well and it continued to loop the animation seamlessly :)

Link to comment
Share on other sites

Yeah I caught that one thanks Chrysto, cheers (and nice work with the easing on that Pen too Jamie, much smaller and simpler than other examples out there)  :)
 
Also, if it's worth anything, I've re-written the animation in just plain JS (using GSAP) as I've had to work with an absence of jQuery in my environment:

var div = document.getElementById("menu_1");
TweenMax.to(div, 0.6, {backgroundPosition: "780px 0", ease:SteppedEase.config(6), repeat: -1, repeatDelay: -1 });

Thanks again guys.

Link to comment
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.

×