Syed Azam Posted September 28, 2021 Share Posted September 28, 2021 Hi Guys, I am very excited to work on GSAP n love this community for the quick response As I am very new to this, I need some helping hands for my current slider component which I am working on... expecting - https://watch.screencastify.com/v/u8AFx5bucxgeuV7X9mKB I am expecting a masking effect rather then sliding of images.. and on the current slide a marque to run behind. See the Pen OJgaRBd by syedazam (@syedazam) on CodePen Link to comment Share on other sites More sharing options...
Solution nico fonseca Posted September 28, 2021 Solution Share Posted September 28, 2021 Hey @Syed Azam, welcome to the forum! 💚 You can do something like this: See the Pen e81138427318c2826079e5c3f2ac4d41?editors=1010 by nicofonseca (@nicofonseca) on CodePen The trick to achieve the mask effect is move the parent element to a direction and they child element to the opposite at the same time. gsap.to(parentElement, { xPercent: -100, duration:1 }); gsap.to(childElement, { xPercent: 100, duration:1, }); I hope this can help you. 🙂 6 1 Link to comment Share on other sites More sharing options...
Cassie Posted September 28, 2021 Share Posted September 28, 2021 This is a really great example thanks Nico! 1 Link to comment Share on other sites More sharing options...
Syed Azam Posted September 28, 2021 Author Share Posted September 28, 2021 57 minutes ago, nico fonseca said: Hey @Syed Azam, welcome to the forum! 💚 You can do something like this: The trick to achieve the mask effect is move the parent element to a direction and they child element to the opposite at the same time. gsap.to(parentElement, { xPercent: -100, duration:1 }); gsap.to(childElement, { xPercent: 100, duration:1, }); I hope this can help you. 🙂 Thanks nico fonseca yes it really helped, can we also add additional functionalities on change of image to add a marque backside of image and circle with index like timer... https://watch.screencastify.com/v/u8AFx5bucxgeuV7X9mKB Appreciate your help..🙂 Link to comment Share on other sites More sharing options...
nico fonseca Posted September 28, 2021 Share Posted September 28, 2021 4 minutes ago, Syed Azam said: can we also add additional functionalities on change of image to add a marque backside of image and circle with index like timer... Sure, you can add those functionalities. In the example you have the currentSlide variable and you use it wherever you need. About the timer, you can do a tween using DrawSvgPlugin and when the animation is completed you can go to the next slide. 3 Link to comment Share on other sites More sharing options...
Syed Azam Posted September 28, 2021 Author Share Posted September 28, 2021 Thank you again I will give a try on this.. 1 Link to comment Share on other sites More sharing options...
Syed Azam Posted September 28, 2021 Author Share Posted September 28, 2021 I have added the dots functionality within for each code, and also is there a way the slider can autoplay, can you pl. have a look once ? /* for dots functionality s */ let dur = 1 let dots = document.querySelector(".dots") // set slides background colors and create the nav dots for (let i = 0; i < index.length; i++) { gsap.set(index[i], {}) let newDot = document.createElement("div") newDot.className = "dot" newDot.index = i navDots.push(newDot) newDot.addEventListener("click", slideAnim) dots.appendChild(newDot) } let allTheDots = dots.querySelectorAll(".dot") gsap.set(dots, { xPercent: -25 }) const dotAnim = gsap.timeline({ paused: true }) dotAnim.to( allTheDots, { stagger: { each: 1, yoyo: true, repeat: 1 }, scale: 1, duration: 1, rotation: 0.1, backgroundColor: "#39FF14", }, ) dotAnim.to( index.length + 1, { y: -(index.length * 50), rotation: 0.01, ease: "none" }, 0 ) dotAnim.time(1) /* dot animation ends ********************************* */ Link to comment Share on other sites More sharing options...
Cassie Posted September 28, 2021 Share Posted September 28, 2021 If you look in the console you have an error - I suggest putting in some console logs to figure out which element you're trying to grab that doesn't exist. Cannot read properties of null (reading 'querySelectorAll') 3 Link to comment Share on other sites More sharing options...
Syed Azam Posted September 28, 2021 Author Share Posted September 28, 2021 11 minutes ago, Cassie said: If you look in the console you have an error - I suggest putting in some console logs to figure out which element you're trying to grab that doesn't exist. Cannot read properties of null (reading 'querySelectorAll') Thanks - do you have a demo or something for GSAP slider in gsap website - it would be of great help !! Link to comment Share on other sites More sharing options...
Cassie Posted September 28, 2021 Share Posted September 28, 2021 Here you go! See the Pen PojYwPp by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
Syed Azam Posted September 28, 2021 Author Share Posted September 28, 2021 Thanks Cassie - I was watching your talk on SVG - its a great one I was wondering for autoplay and dot click functionality.. (Crossing my fingers) Link to comment Share on other sites More sharing options...
Cassie Posted September 28, 2021 Share Posted September 28, 2021 Thanks Syed Here's a thread with some advice on autoplaying And another thread with some alternative carousels, including dot navs 1 Link to comment Share on other sites More sharing options...
Syed Azam Posted September 28, 2021 Author Share Posted September 28, 2021 Thank you Cassie i will go thorough it. Link to comment Share on other sites More sharing options...
Wizard of Oz Posted April 8, 2022 Share Posted April 8, 2022 Hi, any pointers on how I can get my slider's outgoing and incoming images to have the same effect as @nico fonseca's ? See the Pen OJzzWdq by martinkariuki7-the-looper (@martinkariuki7-the-looper) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted April 8, 2022 Share Posted April 8, 2022 Hey there! I'm not sure how much more help we can give than a working demo and a post explaining how to achieve the effect. Is there something in particular you're confused about? Link to comment Share on other sites More sharing options...
Wizard of Oz Posted April 8, 2022 Share Posted April 8, 2022 Hi Cassie, I tried moving my outgoing image and my incoming image towards opposite direction as Nico pointed out but still can't get the masking effect going. But, I'll try a bit more, I think I'll get there eventually Link to comment Share on other sites More sharing options...
Cassie Posted April 8, 2022 Share Posted April 8, 2022 It's very dependant on styling and markup! Make sure you have everything set up the same as in his demo. Overflow hidden is key! 1 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