gsap3 GSAP 3 image sequence

[Dj.Sunrise]

Hi! 

I create some demo with image source.
I'm trying to make pinned image sequence on GSAP 3. Reference: https://store.google.com/us/product/nest_doorbell_battery?hl=en-US#gq-overview-chap-intro-3

 

I've found some example but they are implemented on canvas and they user sprite. I dont need to use sprite.

Example №1: 

See the Pen KKzgqKr by osublake (@osublake) on CodePen

Example №2: 

See the Pen 2152a28cffe2c2c0cca8a3e47f7b21c6 by osublake (@osublake) on CodePen

I need other way.  I know that's not GSAP product but I want to implement same thing Like ScrollMagic + gsap image sequence https://scrollmagic.io/examples/expert/image_sequence.htmlhttps://scrollmagic.io/examples/expert/image_sequence.html

 

I cant figute it out, how to make it on gsap 3 only.

 

Additional question: what's difference between canvas method or simply div with img source? Is canvas better for page speed optimization?

See the Pen RwZMzXV by AlibekKulseitov (@AlibekKulseitov) on CodePen

Edited November 7, 2021 by Dj.Sunrise
added text

[GreenSock]

Sure, ScrollTrigger can do anything ScrollMagic can do plus a whole lot more. Here's what I assume you wanted: 

See the Pen BadxKMo?editors=1010 by GreenSock (@GreenSock) on CodePen

 

But you should probably preload the images to maximize performance. 

 

Here's another demo that might be helpful: 

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

 

10 hours ago, Dj.Sunrise said:

Additional question: what's difference between canvas method or simply div with img source? Is canvas better for page speed optimization?

Probably, yes, but I'd encourage you to do your own speed tests to verify. If you constantly load in new images, the browser likely needs to decode them which takes time/memory, but if you load them all into the browser (invisibly) and just swap them in or draw them to <canvas> it may be cheaper on the browser for rendering. 

 

Good luck!