Images sequence lagging on my site

[alessiopaoletti]

Hi,

 

I find this animation here in the community.

I'm trying to get this animation and on Codepen it's almost perfect even if I will have to increase the number of frames, but if I do it on the site I'm creating on the client's hosting it lags a lot.

 

https://underdogsitalia.com/

 

Code problem? Hosting problem?

See the Pen BaMoWKo?editors=0010 by alessio-paoletti (@alessio-paoletti) on CodePen

[mvaneijgen]

Run perfectly smooth for me, both the live site and the Codepen version. Tested Safari Version 17.0 and Chrome Version 118.0.5993.70. Do you maybe have a browser/OS where you see the issue and maybe a screen grap, so that we can be sure we're looking at the same thing?

[alessiopaoletti]

I use Chrome last version 118.0.5993.118, check the screen recording in drive on the client hosting doesn't it's the same:

 

https://drive.google.com/file/d/1mWT3UDQwhCySdzpdjWUJwtfIZIwtc9uT/view?usp=sharing

[Shrug ¯\_(ツ)_/¯]

Is this a GSAP question ? I don’t spot any GSAP logic being used in your CodePen and the main.js on your live site is also using the same code as your CodePen ?

 

Once the image resources load it appears smooth to me though.

[GreenSock]

Yeah, these forums are for GSAP-related questions. I noticed that on every frame update, you're changing the img.src to something different, and then drawing that image to the canvas, but if I were you I'd just create an Array of all those images that you already created (one for each frame) and then just draw the appropriate one to the canvas because that'd almost surely be faster. Maybe when you change the src, it prompts the browser to load it (even from cache) and decode it again.

 

Good luck!

[alessiopaoletti]

I have found the code here in the forum, if you know of a codepen that use gsap I prefer with the method mentioned by you

[GreenSock]

Here's a GSAP-based approach (and you could do it many different ways): 

See the Pen MWLaOwY?editors=0010 by GreenSock (@GreenSock) on CodePen

[alessiopaoletti]

Now work well, thanks!

What do you mean "you could do it many different ways"?

 

there is a better way?

[GreenSock]

I just meant that there are a myriad of different ways to engineer a solution. There isn't just one "perfect" one. GSAP has a ton of flexibility. I don't have time to craft a whole bunch of different options for you - I provided the one I'd probably reach for first. If I knew of a "better" way, I would have given you that one. I hope it helps. 🙂

[GreenSock]

To assist other people who might want to do something similar in the future, I wrapped this functionality into a helper function so that it's simpler to implement: 

See the Pen RwvrNqN?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Just create an Array of image URLs, feed it to the helper function along with your <canvas> reference and a ScrollTrigger config, and BOOM, you're done. 

[GreenSock]

And here's one with Apple images

See the Pen VwgevYW?editors=0010 by GreenSock (@GreenSock) on CodePen

[alessiopaoletti]

On 10/27/2023 at 6:14 PM, GreenSock said:

To assist other people who might want to do something similar in the future, I wrapped this functionality into a helper function so that it's simpler to implement: 

 

 

 

Just create an Array of image URLs, feed it to the helper function along with your <canvas> reference and a ScrollTrigger config, and BOOM, you're done. 

If I use images without background I need to delete the previous frame, how can I do this? 

[GreenSock]

1 hour ago, alessiopaoletti said:

If I use images without background I need to delete the previous frame, how can I do this? 

I assume you'd need to use the <canvas> clearRect(): 

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clearRect

 

ctx.clearRect(0, 0, canvas.width, canvas.height);

You do that right before you drawImage() of course.

[alessiopaoletti]

44 minutes ago, GreenSock said:

I assume you'd need to use the <canvas> clearRect(): 

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clearRect

 

ctx.clearRect(0, 0, canvas.width, canvas.height);

You do that right before you drawImage() of course.

updateImage = function() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(images[Math.round(playhead.frame)], 0, 0);
  onUpdate && onUpdate.call(this);
};

I had tried it before in this way but i get an error "canvas is not defined"

[GreenSock]

That's because you didn't define a canvas variable in there. I updated the helper function to make it even easier - just set clear: true on your config object and it'll handle it for you: 

See the Pen VwgevYW?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I also enhanced it to only draw when necessary (if the frame number didn't change, it'll skip any drawing).

[alessiopaoletti]

20 hours ago, GreenSock said:

That's because you didn't define a canvas variable in there. I updated the helper function to make it even easier - just set clear: true on your config object and it'll handle it for you: 

 

 

 

I also enhanced it to only draw when necessary (if the frame number didn't change, it'll skip any drawing).

You are a king.

 

For the future last question, if I want to play the same animation like a "video" and use scrolltrigger to play, can I do?

[Rodrigo]

22 minutes ago, alessiopaoletti said:

For the future last question, if I want to play the same animation like a "video" and use scrolltrigger to play, can I do?

No worries, @OSUblake, one of our superstars has you covered:

Hopefully this helps.

Happy Tweening!

[alessiopaoletti]

18 minutes ago, Rodrigo said:

No worries, @OSUblake, one of our superstars has you covered:

Hopefully this helps.

Happy Tweening!

This is the same with scrub: true of scrolltrigger I think.

I intended to possibly use scrolltrigger with "scrub: false" and only to give play to the playback as if it were a video or even using a "play" button.

[Rodrigo]

That's possible as well. Keep in mind that ScrollTrigger has a series of callbacks (onEnter, onEnterBack, onLeave,  onLeaveBack) as well as the toggleActions config option:

toggleActions

String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

 

You can learn more about them in the ScrollTrigger docs:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/#config-object

 

Hopefully this helps

Happy Tweening!

[GreenSock]

Here, I enhanced the helper function more and whipped together an example that'll just "play" when the top hits the center of the viewport, and reverses when the bottom hits the center in reverse: 

See the Pen QWYdgjG?editors=0010 by GreenSock (@GreenSock) on CodePen

 

It should make things super easy and configurable. You can even set an fps number in the config. 👍