Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
flowen

looking for feedback for this idea

Recommended Posts

heya dear greensocks ūü߶

 

Look at my beautiful prototype image:

proto.thumb.jpg.9664c322fefe44fb6cb89c8faf1bd39a.jpg

 

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!

  • Like 1
Link to comment
Share on other sites

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 - 

 

  • Like 3
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.
√ó