Vertical Carousel with Overlapping Images

[PotatoNick]

Hi everyone, I can't seem to find anything like it online, I've tried every words I could but nobody made this or else I'm just an idiot 😆

 

So here's the thing, I'm trying to make a personal photography website

 

And I'd like to have a gallery that would look like this :

 

This is the closest I could find but it's an autoscroll : (the codepen below) 

 

I would be grateful to get some help on this case if that's possible !

Thanks !

 

(Sorry for the english, I'm not a native speaker   and sorry about the paint file, I'm not a designer as well haha )

See the Pen yoPBMP by Danil89 (@Danil89) on CodePen

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide tutorials or help people build out their portfolios. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[Cassie]

You'll be more likely to get help if your question is a little more specific! It's unlikely that someone will be able to find a demo that looks exactly like this, or that someone will have time to build this for you.

Do you have experience with GSAP, are you struggling with the styling or scrolling part? Are you maybe asking where to start with building something like this? Are you aware of ScrollTrigger?

Break it down a bit and hopefully someone can give you the nudge you need!

[PotatoNick]

Thanks for the answers, I'm not asking for people to build the website for me, I'm building it hence the "paint" template I showed 😆

I don't have a lot of experience with gsap indeed

 

I didn't know ScrollTrigger, though it's only activated on mousewheel up and down I guess ? You can't click anything ?

 

 

Ok so, I'll break it down :

 

I'm thinking of two status, the 'currentImage' would be at 100% width & height and opacity 1

and the other status would be 50% height & width, opacity 0.30 for example

 

But I still have the whole translate up and down thing to do

 

is there a function or anything that would simplify the whole process using gsap ?

 

Just thinking out loud 😄

I'm working on a codepen but it's jQuery right now

 

[GreenSock]

6 hours ago, PotatoNick said:

I didn't know ScrollTrigger, though it's only activated on mousewheel up and down I guess ? You can't click anything ?

ScrollTrigger is for any scroll-related activity (mouse wheel, dragging the scrollbar, touch-scrolling, arrow keys, spacebar, whatever). If you want "fake" scroll stuff, check out Observer plugin because you can respond to wheel, scroll, or drag actions. 

 

This is all entirely doable with GSAP, yes. 

 

Good luck! 👍