Jump to content
Search Community

gsap animate elements selectingly when data updates on vue 3 composition api

Toyly test
Moderator Tag

Recommended Posts

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

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

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

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

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

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!!!

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...