[Trying to Animate to open div from middle & the animation to be vice versa]

Thank you @mvaneijgen, just tweaked  a little - 

See the Pen oNqVrEr?editors=0010 by syedazam (@syedazam) on CodePen

 

 

 

[Trying to Animate to open div from middle & the animation to be vice versa]

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 

See the Pen WNzmWwJ by syedazam (@syedazam) on CodePen

[Auto Play GSAP Slider]

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

[Auto Play GSAP Slider]

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

[Auto Play GSAP Slider]

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

[GSAP Masking Slider]

Thank you Cassie i will go thorough it.  

 

 

[GSAP Masking Slider]

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)

[GSAP Masking Slider]

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 !! 

[GSAP Masking Slider]

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 ********************************* */

[GSAP Masking Slider]

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

 

[GSAP Masking Slider]

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

 

  

 

 

[GSAP Masking Slider]

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