Vertical slider on scroll (with new section covered older)

[Arzou]

Hello everybody ! 
it's my first message here, I've searched the forum for a long time for an answer to my question but couldn't find anything.
I would like to create a vertical fullscreen slider, where each new section would come from the bottom, and cover the old one

Here is an example:

https://astoncm.com/
 

(for internal animations in each section, I could take care of it.

Thanks a lot for your help ! 

Clément

See the Pen zYPrZmj by arzou (@arzou) on CodePen

[elegantseagulls]

Hi @Arzou,

 

I don't see a question in your post.

If you're asking us to code an example of the functionality of the sample-site you sent, unfortunately we can't offer free general consulting or "build-to-order" services.

 

A good starting point: Take a look at GSAP's toggleActions and pair that up with something like this:

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

If you get stuck, post back here with any GSAP-specific questions in a minimal demo and we'd be glad to help with those.

Please read the forum guidelines.

 

[Arzou]

Hi @elegantseagulls, 

thanks a lot for your answer. 

I do think I was not clear and I apologize for that.

 

My codepen example is where I'm stuck.

I would like that on scroll, section 2 covers section 1, and section 3 covers section 2, etc etc
Is it possible ?

[elegantseagulls]

Something like this?:

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

 

This is super helpful: https://greensock.com/st-demos/

 

[akapowl]

Hey Arzou, I was just in the process of adding something to @elegantseagulls reply.

 

If you are looking to create a slider like on that website, ScrollTrigger might not even be the best tool of choice, as it is dependent on actuall scrolling, while the linked website doesn't look to me like it is scrolling at all, but rather listening to mouse/keyboard/touch events.

 

Similar topics have come up a couple of times recently.

There are examples for event-based sliders in these threads.

 

Most of what those examples contain is the logic neccessary for it to work, which you will likely have to adjust to work like you expect.

 

 

 

 

[Arzou]

Yes @elegantseagulls, but in your example, the scroll is going too fast, it doesn't pin at each section..  

Thank you very much @akapowl, I'll take a look at the links you gave me.

[elegantseagulls]

6 minutes ago, Arzou said:

but in your example, the scroll is going too fast, it doesn't pin at each section

Right, look at the code for both examples, and explore some others to see if you can combine them to create what you're looking for.

[Arzou]

thanks ! i'll do like this  

[mikel]

Hey @Arzou,

 

Here is a slider (based on GSAP Scrolltrigger) where the change is a 'bit more controllable'.

 

See the Pen mdqVENQ?editors=0010 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[Arzou]

Ah yes thank you @mikel !
Do you think there is a way to pin sections during the scroll? To not go to the end of all the sections if the user scrolls a lot at once?

 

Clément

[mikel]

 

Hey @Arzou,

 

A lot is possible. Be creative in concept and implementation.
Here is a rough layout for a report of a small NGO.
The larger the value, the slower the process:   tt = 25000; // 'total time' in px of scrub animation (line 12).

 

See the Pen 8911550a3b01adf215086bc42091e4f4?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[Cassie]

Lovely to see your demos back in the forums @mikel 💚

[Arzou]

Thanks you @mikel ! I continue to work on it. If I get what I want, I'll post the solution here, it might help someone

[Arzou]

Hi everyone ! 
 

I ended up succeeding in what I wanted to do. I took over one of the projects found thanks to @akapowl

A big thank you to the whole team !

Here, my codepen, if anyone needs  

See the Pen ExbPWdR?editors=1010 by arzou (@arzou) on CodePen

[AaronMark]

@Arzou Any chance you can reshare the codepen? Looking to do something similar to Aston for a client.

[Arzou]

Hi @AaronMark, i'm really sorry but i stupidly deleted it ... If i can help you, it's a pleasure. Tell me what's your problem  

[AaronMark]

@Arzou I have a client looking to do what Aston did, where each section is a slide that is revealed (using masking) and pinned, much like you are requesting in this thread. Mikel's first example is close, but not quite what Aston's site is doing.

[Rodrigo]

Hi @AaronMark and welcome to the GreenSock forums!

 

Perhaps this example using Clip Path can provide a good starting point:

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

 

You have to add the scale animation to the images, but adding those to the timeline already in use with the position parameter shouldn't be too complicated.

 

Hopefully this helps.

Happy Tweening!

[Arzou]

Hi @AaronMark, i'm sorry, i forgot to reply to your last message .. 

I don't remember how I found the solution.

I'll try to find my starting point and I'll tell you  

 

 

EDIT: 
I find this : 

See the Pen MzWzyv by PointC (@PointC) on CodePen

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

See the Pen vyMjGy by derekshirk (@derekshirk) on CodePen

 

I hope it'll help you