Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Syed Azam

GSAP Masking Slider

Go to solution Solved by nico fonseca,

Recommended Posts

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

  • Solution

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

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

This is a really great example thanks Nico!

  • Thanks 1
Link to comment
Share on other sites

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

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.

  • Like 3
Link to comment
Share on other sites

Thank you again :-)
I will give a try on this.. 

 

  • Like 1
Link to comment
Share on other sites

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 ?

 

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

 

 

/* for dots functionality s */
            let dur = 1
            let dots = document.querySelector(".dots")
 
            // set slides background colors and create the nav dots
            for (let i = 0i < index.lengthi++) {
                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: 1yoyo: truerepeat: 1 },
                    scale: 1,
                    duration: 1,
                    rotation: 0.1,
                    backgroundColor: "#39FF14",
                },
            )
            dotAnim.to
                index.length + 1,
                { y: -(index.length * 50), rotation: 0.01ease: "none" },
                0
            )
            dotAnim.time(1)
 
            /* dot animation ends ********************************* */
Link to comment
Share on other sites

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')

  • Like 3
Link to comment
Share on other sites

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

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

Thanks Syed :)

 

Here's a thread with some advice on autoplaying 

 

And another thread with some alternative carousels, including dot navs
 

 

  • Like 1
Link to comment
Share on other sites

Thank you Cassie i will go thorough it. :-) 

 

 

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×