Hey!
I am using a Swiper with SwiperJS with scrollTrigger animation.
My Problem is, that i want to stagger the slides. This does work, but it´s always using the value 1 to start with. Often the index one is in the center of the screen, but i want to start on the left side. I can get the Index of the left side using the swiper.realIndex but when i pass the var into the stagger, it will always use the inital value 1 and never updates. Unfortunatly repeatRefresh() doesnt work on stagger.
Any Solution?
Here is my code:
const logoSlides = document.querySelectorAll('.intro--logos .swiper-slide')
let refIndex = 1;
var refAnimation = gsap.fromTo(logoSlides, {
y: 100,
},
{
y: 0,
delay: 1.1,
duration: 0.2,
stagger: {
from: refIndex,
each: 0.1,
},
scrollTrigger: {
trigger: ".intro--main",
scrub: false,
markers: true,
start: "top 20%",
end: "bottom center",
toggleActions: 'play reverse play play',
}
})
refSwiper.on('slideChange', function () {
console.log('slide changed', this.realIndex);
refIndex = this.realIndex;
});
