artstyle Posted March 6, 2021 Share Posted March 6, 2021 Hello! im trying to create a slider like herehttps://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 Link to comment Share on other sites More sharing options...
Visual-Q Posted March 6, 2021 Share Posted March 6, 2021 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/ 1 Link to comment Share on other sites More sharing options...
artstyle Posted March 6, 2021 Author Share Posted March 6, 2021 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 Link to comment Share on other sites More sharing options...
Visual-Q Posted March 6, 2021 Share Posted March 6, 2021 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 4 Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted March 6, 2021 Share Posted March 6, 2021 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. 😆 2 Link to comment Share on other sites More sharing options...
Visual-Q Posted March 6, 2021 Share Posted March 6, 2021 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. 1 Link to comment Share on other sites More sharing options...
artstyle Posted March 6, 2021 Author Share Posted March 6, 2021 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 Link to comment Share on other sites More sharing options...
Visual-Q Posted March 6, 2021 Share Posted March 6, 2021 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. 1 Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted March 6, 2021 Share Posted March 6, 2021 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. 3 Link to comment Share on other sites More sharing options...
Visual-Q Posted March 6, 2021 Share Posted March 6, 2021 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 2 Link to comment Share on other sites More sharing options...
artstyle Posted March 7, 2021 Author Share Posted March 7, 2021 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] Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 8, 2021 Share Posted March 8, 2021 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now