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 (@sye
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.
