Scrolltrigger - Updating the content of a canvas on page scroll

[matt1]

Hello everyone,
I am writing to ask support on my first project in which I use Scrolltrigger.

 

Attached to the Topic I uploaded the minimal demo in CodePen ( https://codepen.io/csaq7440/pen/powaoew ) where, however, I do not find the problems I have in the real project.

The problems I have in the real project are the following:
 

chrome: The canvas loads the images too slowly and you see the flickering.

chrome and other browsers:  If you use the page for a long time, if you leave it still or if you look at other tabs and then go back to the page, it freezes and the animations no longer work as they did at the first view. By reloading the page, everything is working again.

 

Have any of you encountered the same problems using Scrolltrigger to update .png images inside a canvas?
 

Thanks so much in advance for your help

See the Pen powaoew by csaq7440 (@csaq7440) on CodePen

[nico fonseca]

Hey @matt1 welcome to the forum! 💚

Here you have a thread about ScrollTrigger + sequence images 🙂

My recommendation is to use jpg images instead of png and reduce their size as much as possible (you have images of 150kb)