Hi. I am doing a simple staggering effect with list of containers which is meant to be posts on my blog page on vue 3 via transition-group just like it was shown on this video. It works when i first landing the page,
but problem is, when i make a search or choose category for posts which of course sends kind of ajax(it is Inertia though) request and updates the data which should appear with animation, somehow it appears to be that some posts just changes suddenly and some of them randomly shows animation as intended. i was thinking about some function for onupdate property but don't exactly know what to do. My template is as below.
<transition-group class="row justify-content-center my-3" tag="div" :appear="true"
@before-enter="beforeEnter" @enter="enter">
<div v-for="(post, i) in posts.data" :key="post.id" :data-i="i"
class="col-lg-4 col-md-6 col-sm-12 my-3">
<div class="position-relative">
<img :src="'img/1.jpeg'" class="img-fluid rounded-start img" alt="...">
</div>
<div class="p-4 overflow-hidden shadow content rounded-start">
<div class="rounded-3 overflow-hidden" style="height: 250px;">
<h3 class="tm-text-primary mb-3 overflow-hidden tm-catalog-item-title">{{post.title}}</h3>
<p class="tm-catalog-item-text overflow-hidden" style="word-wrap: break-word;">{{post.body}}
</p>
</div>
</div>
</div>
</transition-group>
My gsap code is-----------------------------:
// staggered animation effect start
const beforeEnter = (el) =>{
el.style.opacity = 0;
el.style.transform = 'translateY(100px)';
}
const enter = (el, done) =>{
gsap.to(el, {
opacity: 1,
y: 0,
duration: 1.2,
onComplete: done,
delay: el.dataset.i * 0.2,
}
);
}
// staggered animation effect end
Any support is greatly appreciated.