Dj.Sunrise Posted November 7, 2021 Share Posted November 7, 2021 (edited) 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 Link to comment Share on other sites More sharing options...
GreenSock Posted November 8, 2021 Share Posted November 8, 2021 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now