Jump to content
GreenSock

Dj.Sunrise

GSAP 3 image sequence

Recommended Posts

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 by Dj.Sunrise
added text
Link to comment
Share on other sites

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!

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