I am looking for examples of controlling a canvas animation with ScrollTrigger. The documentation suggests this is possible, but not sure where to start. I am creating banner ads with Adobe Animate and would like to use ScrollTrigger for presentation effects on my website.
I have a video looping on my home page and would like to use ScrollTrigger to control the video. The video is currently streaming from Vimeo but I can make it in Animate as a canvas animation similar to the banners.
To compensate for your rows, you just need to use the index of the current image to calculate where in the grid the background position should be. Here is an approximate version using a proxy object to keep track of the index:
See the Pen RwrmBpJ?editors=0010 by GreenSock (@GreenSock) on CodePen
It would be easier if the image used was better (no extra space).