okey now i know this is the right way to make animation run on swipe, but i will need some help to set up observer function to run animation.
trying to figure this still out since havent used it before so any help would be nice
down below is animation function for onclick, but anyone knows how to make it as drag, swipe
$(".thumbs-container img").click(function () {
gsap.from(".brand", {
duration: 1,
delay: 1,
opacity: 0,
x: "-30",
ease: Expo.easeInOut,
});
gsap.from("header .navigation .navigation-items a", {
duration: 2,
delay: 1.3,
x: "-200",
opacity: 0,
ease: Expo.easeInOut,
stagger: 0.3,
});
gsap.from(".swiper-slide .text-content .title", {
duration: 1,
delay: 1,
opacity: 0,
y: "-50",
ease: Expo.easeInOut,
});
gsap.from(".swiper-slide .text-content p", {
duration: 1,
delay: 1,
opacity: 0,
x: "-80",
ease: Expo.easeInOut,
});
gsap.from(".swiper-slide .text-content .read-btn", {
duration: 1,
delay: 1,
opacity: 0,
x: "50",
ease: Expo.easeInOut,
});
gsap.from(".bg-slider-thumbs", {
duration: 1,
delay: 1,
opacity: 0,
y: "50",
ease: Expo.easeInOut,
});
gsap.from(".thumbs-container img", {
duration: 2,
delay: 1.3,
y: "100",
opacity: 0,
ease: Expo.easeInOut,
stagger: 0.3,
});
});