looking for feedback for this idea

[flowen]

heya dear greensocks 🧦

 

Look at my beautiful prototype image:

 

So I was thinking of making an image gallery where the front (current) image loops to the back of the gallery and the other images move forwards. While looping through this, the active image will enlarge a bit (forgot to include that in my amazing prototype) and when it loops back, becomes smaller. To give a simulation of depth. 

 

Now I'm also thinking in terms of performance of course. The stacking order of images could probably hinder performance as they'll cause a lot of composite layers (may be using the wrong terminology here). I wonder if webgl is necessary perhaps.

 

Technically I'm struggling how to do create this loop. I'm thinking of using a virtual scroll, track the y-value and update the progress. Perhaps this could be done with a gsap timeline that receives the progress variable in .totalProgress().

Then there's the animation itself, would probably be done best with a bezier curve I assume. 

 

I wonder if anyone made something similar and can perhaps give me some pointers if this is feasible or if it's gonna be really hard to be executed. 

Or some feedback from a design perspective whether this is something that looks great in my mind but really ugly in the browser

 

thx for reading!

[Cassie]

This sounds like an interesting effect!

 

• Unless you plan on having hundreds of images if shouldn't be an issue with performance.
• Will the slideshow infinitely loop? That'll be a challenge, but very do-able and there are lots of forum threads to help out!
• The z-index/stacking part may be a fiddly thing timing wise but again - doable.
• If you want to animate this on scroll - we have scrolltrigger for that!

This codepen will help - 

See the Pen RwKwLWK by GreenSock (@GreenSock) on CodePen

And maybe the info in this thread if you want a deep dive -