Jump to content
Search Community

Images sequence lagging on my site

alessiopaoletti test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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. ?

Link to comment
Share on other sites

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. 

  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...
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? 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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"

Link to comment
Share on other sites

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).

  • Like 1
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 - onEnteronLeaveonEnterBack, 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!

Link to comment
Share on other sites

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. ?

  • Like 2
  • Thanks 1
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.
×
×
  • Create New...