Toyly

on my surprise, Making it component did not work. I used focus on each mount. Thanks for an idea.

Everything was because of Inertia js. Precisely because of preservestate attribute which i gave 'true' boolean value. once i remove it, everything works fine but now once i input one letter and inertia fetches the data, focus on that input goes away and i need to click again. Looks like i need to chose between beautiful animation and dynamic search. Inertia.get('/places', { search: search.value, category: category.value }, { preserveState: true, replace: true });

Thanks for reply and willingness to help. It is pretty hard to show it on CodeSandbox as it is related in exactly updating the data which comes with laravel and inertia js on backend. Why don't i just take a video and share link of what i have from google drive. https://drive.google.com/file/d/1CQv4IUW1yldsYc2p29CJMxstEcgxr7rq/view?usp=sharing My project repo is on github. Let me forward you on exact file that refers on problem. https://github.com/Toylycker/Travel-Agency/blob/main/resources/js/Pages/front/Blog.vue

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.