fixed scroll trigger add and remove class

[artstyle]

Hello!
im trying to create a slider like here
https://mst.agency/
i made it with pure CSS but that was not i expected. i cant manipulate it and its glitching sometimes
so now i need js to make it 100% like that
the trick is add/remove clip: "rect(0,100vw,100vh,0)" to the slides every 10 seconds

and you shouldnt use z-index
for now i only understand how to animate elements alone and in a timelines and this is a real challenge for me

can you give me an advice what i should use to achieve that?

please dont solve it for me. just give an advice what i should read and maybe some examples. i want to solve it by myself.
my logic is:
1.bgrs to array
2.make [0] active(add class or style)
3.make a script on scroll up and down to add and remove style

4.make it autoslide every 10 seconds
can it be done with gsap?

See the Pen rNWZxaQ by aptypkaa (@aptypkaa) on CodePen

[Visual-Q]

There's number of examples of horizontal slider sliders on this page https://greensock.com/st-demos/

 

Based on the example from the site your showed and given that you want a timed auto slide and user initated swipe type action you might just be able to setup a timeline that changes at required intervals and then use a wheel event, and any other interactive events that are anticipated, to manually trigger  a slide, you could use the event to advance the timeline at the same time perhaps to a label to keep things running smooth.

 

https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event

 

Repeat delay might also be useful here https://greensock.com/docs/v3/GSAP/Timeline/repeatDelay()

 

As far as adding removing classes a callback could do that so yeah you can add in functions wherever you need them. See call() and add() in the docs:

 

https://greensock.com/docs/v3/GSAP/Timeline

 

One more thing of course Zachs tips are a good place to start when thinking about this type of thing

https://css-tricks.com/tips-for-writing-animation-code-efficiently/

 

[artstyle]

i watched these examples before and i think thats not what i want
because the trick is manipulating the slides with only   clip: "rect(0,100vw,100vh,0)"

the slides are stand still. they are not moving. the trick is  

clip: "rect(0,100vw,100vh,0)" <=scroll=>  clip: "rect(0,0vw,100vh,0)"

i havent seen something like this in examples

[Visual-Q]

Are you asking about the syntax for animating clip:rect note I believe that has been depreacted in favour of clip-path:

https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

 

However this is the syntax still seems to work: Updated to loop through array

See the Pen vYyzLoe by Visual-Q (@Visual-Q) on CodePen

 

[Shrug ¯\_(ツ)_/¯]

19 minutes ago, Visual-Q said:

animating clip:rect note I believe that has been depreacted

 

6 more year later and I still agree with @GreenSock, unless he has changed his view of course. 😆

 

 

[Visual-Q]

2 minutes ago, Shrug ¯\_(ツ)_/¯ said:

6 more year later and I still agree with @GreenSock, unless he has changed his view of course. 😆

 

Yes I think you're supposed to use clip-path or something now but I think the syntax is similar and concept is basically the same.

[artstyle]

24 minutes ago, Visual-Q said:

Are you asking about the syntax for animating clip:rect note I believe that has been depreacted in favour of clip-path:

https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

 

However this is the syntax still seems to work: Updated to loop through array

 

 

 

yes this is it. foreach for array
now i need to make it draggable and scrollable up and down.
it is clip not clip-path 
this is the trick. clip-path clipping everything behind while clip is not

[Visual-Q]

2 minutes ago, artstyle said:

it is clip not clip-path 
this is the trick. clip-path clipping everything behind while clip is not

 

If you say so, I never use it I usually move or transform things. Hopefully this helped though.

[Shrug ¯\_(ツ)_/¯]

21 minutes ago, artstyle said:

clip-path clipping everything behind while clip is not

 

That does not sound right? You can replace the clip:rect and plug the below clip-path: example into the demo and it works fine.

 

CSS

clip-path: polygon(0 0, 0 100%, 0 100%, 0 0);

JS

gsap.to(element, 4, {clipPath: "polygon(0 0, 0 100%, 100% 100%, 100% 0)",delay: index * 4});

 

You just need to play around and figure out all the numbers to give you the end result you want.

[Visual-Q]

Zach answered a question in the banner adds forum that might be helpful to you. Uses timeline and event listeners and also demonstrates clip-path.

 

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

[artstyle]

Visual-Q

nope thats not what i want
still searching for an answer. i havent found anything similiar even in pure JS. tried a few scripts but...
so my logic is
1. track mouse scroll up/down (even it reaches the top or bottom of document)
2. make an array from bgr
3. make [0] array item active (add class)
4. if scrollup add active class to [4]item and remove from [0]
5.if scrollup add active class to [1]item and remove from [0]

[ZachSaucier]

Hey artstyle. Unfortunately we don't have the capacity to build it out for you for free. If you have a specific question (especially about GSAP) please ask and provide a minimal demo of the issue.