Toyly Posted September 18, 2022 Share Posted September 18, 2022 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. Link to comment Share on other sites More sharing options...
GSAP Helper Posted September 18, 2022 Share Posted September 18, 2022 It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. Link to comment Share on other sites More sharing options...
Toyly Posted September 18, 2022 Author Share Posted September 18, 2022 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 Link to comment Share on other sites More sharing options...
GSAP Helper Posted September 18, 2022 Share Posted September 18, 2022 Unfortunately we just don't have the resources to troubleshoot live sites or dig into Github repos . A video isn't adequate for assessing what the issue may be, especially if you're using a framework and other 3rd party tools. It sounds like maybe some kind of timing issue with your lifecycle hooks. I'd recommend adding in some console.log()s right before your tweens to see if things are truly in the state you think they are at that point. You'll definitely increase your chances of getting a solid answer if you can cobble together a demo that doesn't use a framework - just some colored <div> elements is fine. Link to comment Share on other sites More sharing options...
Toyly Posted September 18, 2022 Author Share Posted September 18, 2022 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 }); Link to comment Share on other sites More sharing options...
Rodrigo Posted September 18, 2022 Share Posted September 18, 2022 Hi, You could move your search/filter input and/or your items list to different components, since it seems that state changes are causing the input loosing it's focus and handle the state in a different component to prevent the entire page from re-rendering. Perhaps come out with a way to create a layout that decouples the input and the list with the state. Another less elegant solution is, since you're watching for the state changes, is to set a ref in your input and set the focus on it using JS: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus Happy Tweening!!! 2 Link to comment Share on other sites More sharing options...
Toyly Posted September 19, 2022 Author Share Posted September 19, 2022 on my surprise, Making it component did not work. I used focus on each mount. Thanks for an idea. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now