Syed Azam

Thank you @mvaneijgen, just tweaked a little - https://codepen.io/syedazam/pen/oNqVrEr?editors=0010

Hi, I am trying to animate the 6 divs starting Image should be always displayed and the animation i am trying to start from bg-2 to bg-6, currently it is from bg-6 to bg-1.. can you please help here. ? Thanks

@OSUblake Thank you for jumping in - if iam not wrong are you taking about the codepen link above which seems not be working.

Thanks for the reply Shabhan - by any chance do you have a working demo in codepen, seems the one added above is not working.

Shaban Iddrisu - hi did you find to work the auto slider ? if yes can you pl. share the codepen link ?

Thank you Cassie i will go thorough it.

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)

Thanks - do you have a demo or something for GSAP slider in gsap website - it would be of great help !!

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 ? https://codepen.io/syedazam/pen/OJgaRBd /* 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 ********************************* */

Thank you again I will give a try on this..

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..?

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.