Jump to content
Search Community

Vue js & gsap

Bayu test
Moderator Tag

Recommended Posts

Welcome to the forums, @Bayu. I don't have time right now to dig into it (plus I'm not a Vue guy at all), but I noticed a few things off the bat: 

  1. You're only creating one ScrollTrigger/animation for one element. If you add a console.log() in your revealContainers.forEach(), you'll see it only runs once. When you change pages/tabs, it looks like Vue is eliminating that element from the DOM. I'm not quite sure what you're expecting to happen there - did you want that element to remain persistent? Did you want a different element for each page/tab? This definitely seems like a Vue question, not a GSAP one. If you want a GSAP animation to run for a different element in each page/tab, you'll need to create that of course and perhaps tap into a Vue lifecycle event(?). Again, I'm not a Vue guy so I can't provide much guidance. 
  2. Be very careful about applying CSS transitions to anything that you're also trying to control with GSAP/JS. You don't want them fighting with each other. 
  3. You're using VERY old versions of GSAP/ScrollTrigger. I'd definitely update.
  4. There's no such thing as ease: Power2.out. You should use the string-based syntax like ease: "power2.out"
  5. You're using the old syntax from many years ago. It works fine for now, but I'd definitely update. For example:
    // old
    tl.from(container, 1.5, {...});
                             
    // new
    tl.from(container, {duration: 1.5, ...});

I hope that at least gets you moving in better direction. Enjoy!

Link to comment
Share on other sites

I want the image reveal effect to work continuously on the "bio" page after moving from the "bio" page to the "projects or find-me" page and then moving to the "bio" page again. 

 

But the effect only works once, I want the image reveal effect to work continuously.

Link to comment
Share on other sites

8 minutes ago, Bayu said:

I want the image reveal effect to work continuously on the "bio" page after moving from the "bio" page to the "projects" page and then moving to the "bio" page again. 

 

But the effect only works once, I want the image reveal effect to work continuously.

Yeah, that's what I answered in #1. It's a Vue question, not a GSAP question. My suggestion would be to just focus on getting the images to show up in each tab first. Don't worry about any animation effects yet. Just make them show up consistently, and THEN start working on getting them to animate. 

Link to comment
Share on other sites

Hi,

 

As Jack mentions the issue here is that your animations are running just once, when you go back to the Bio section the elements are actually there, the animation is just not running again.

 

Also is worth noticing that you're using an old version of Vue (2.x) and you are using miss matching versions of the GSAP Core (3.11.4) and ScrollTrigger (3.3.3). I strongly recommend you to use the latest version of Vue and the same version of GSAP and ScrollTrigger.

 

We don't have a simple example for using Vue Router and GSAP, but hopefully this can get you started:

https://stackblitz.com/edit/vitejs-vite-w8wtpj

 

Also you could take a look at this free videos in order to learn more about Vue:

Hopefully this helps. Let us know if you have more questions.

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

Hi @Bayu. As we've tried to explain, the problem here has nothing to do with GSAP or even the version you were using. It's a Vue question. You've got transitions wired up so that Vue is dumping the elements when you go to another tab/page, so when you return it's actually creating new/different elements that don't have the animation/ScrollTrigger applied. You need to figure out how to tap into the proper Vue lifecycle hooks to set things up properly when the new elements get rendered. 

 

I have zero experience with Vue but I did some Google searching and maybe it's a matter of tapping into the transition's @after-enter and @after-leave lifecycle hooks like this: 

See the Pen GRBeodX?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I hope that helps nudge you in the right direction. 

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