Thank you for your answer @ZachSaucier, I think i'm getting closer to the desired result.
For now I have this code over here but i cannot achieve the overlapping element that is coming after the first one with a fading effect (as in the video above).
Some thoughts on this ?
gsapAnimate(direction) {
const tl = gsap.timeline();
tl.set('.carouselImg', {opacity:1, x:0})
tl.set('.customLineBlue', {opacity:0, x:0})
if (direction === 'left') {
tl.from('.carouselImg', {opacity: 0,x:-40, ease: "circ", duration :.3})
tl.to('.carouselImg', {opacity: 1,x:0, ease: "circ", duration :.3})
tl.from('.customLineBlue', {opacity: 0,x:-40, ease: "circ", duration :.2}, "-=0.3")
tl.from('.carouselInfo', {opacity: 0,x:-40, ease: "circ", duration :.2}, "-=0.3")
tl.from('.loadingLine', {keyframes: [
{duration: 0.2, scaleY: 0, y: -20, ease: "circ"},
{duration: 0.5, scaleY: 1, y: 0, ease: "circ", delay: 0.2},
]}, -0.1)
tl.from('.loadingLineHorizontal', {keyframes: [
{duration: 0.2, scaleX: 0, x: -80, ease: "circ"},
{duration: 0.5, scaleX: 1, x: 0, ease: "circ", delay: 0.2},
]}, -0.1)
tl.from('.brukt', {opacity: 0.6, ease: "circ", duration: 0.3})
} else {
tl.from('.carouselImg', {opacity: 0,x:40, ease: "circ", duration :.3})
tl.to('.carouselImg', {opacity: 1,x:0, ease: "circ", duration :.3})
tl.from('.customLineBlue', {opacity: 0,x:40, ease: "circ", duration :.2}, "-=0.3")
tl.from('.carouselInfo', {opacity: 0,x:40, ease: "circ", duration :.2}, "-=0.3")
tl.from('.loadingLine', {keyframes: [
{duration: 0.2, scaleY: 0, y: -20, ease: "circ"},
{duration: 0.5, scaleY: 1, y: 0, ease: "circ", delay: 0.2},
]}, -0.1)
tl.from('.loadingLineHorizontal', {keyframes: [
{duration: 0.2, scaleX: 0, x: -80, ease: "circ"},
{duration: 0.5, scaleX: 1, x: 0, ease: "circ", delay: 0.2},
]}, -0.1)
tl.from('.brukt', {opacity: 0.6, ease: "circ", duration: 0.3})
}
},