Using with a Vue Spa

[Ben03]

Hi,

 

  I am new to greensock so please bear with! I am trying to get a basic gsap/scrolltrigger combo working on a vue spa. I have included the code in the mounted() section of the containing app.vue file and works as expected

 

.animin {
    opacity:0;
}

      

gsap.defaults({
            duration: 1,
            ease: "power2"
      })

      ScrollTrigger.defaults({
          toggleActions: "play none none reverse", 
            start: "top 95%",
      })

      if(document.querySelector('.animin')) {
            gsap.set( ".animin", { visibility: "visible", opacity: 1 });
      }

But when you navigate away from a page and back to it, the code no longer fires, so all the items with animin remain 'opacity: 0'. I put the code in the containing app.vue as want it to work across the site, but how do I set it in such a way that it is aware of the users movements between pages etc?

[Cassie]

Hey there! This is more of a question about how Vue works.

I don't know what your app setup is but these links will help you

https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram
https://router.vuejs.org/guide/advanced/navigation-guards.html
https://router.vuejs.org

Here's a little demo using FLIP and Vue Router.

See the Pen LYQaOBm?editors=0010 by cassie-codes (@cassie-codes) on CodePen

We can help more if you provide a full demo showing how you're handling page changes,

[Ben03]

Thank you Cassie for the helpful response. You are right, it sits on the fence between GSAP and Vue!

 

I have moved the above code into a function using the following. This fires the function when the page is initially loaded and when a route is changed which is great. But .animin remains opacity: 0, so the gsap code doesn't seem to re-run?

 

watch: {

    $route(to, from) {

        this.gsapAnim();

    }

},

mounted() {

    this.gsapAnim();

}

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use than codepen. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Ben03]

Sure, I hope this helps a bit: 

See the Pen OJvjWvq by alpine-rider (@alpine-rider) on CodePen

 

If you switch between links, you will notice 'fired!' appears in the console but the animations don't trigger. I imagine I am doing something wrong with how the animations are being triggered. Appreciate the help.

[Dipscom]

Hey Ben03!

 

Welcome to the forums! (If nobody has already told you that).

 

I'd say your issue here is scoping AND wrongly set up gsap code.

 

My recommendation to you is to extract the animation code to an external function and import it on each of your components that need it, not in the Vue app file. That way you can use the lifecycle methods to run the code as needed instead of watching the route.

 

As for the GSAP code, I'm not even sure what is it that you are trying to do, there is quite a bit of logic before the tweening bit that confuses me. You could create an external function that takes in the editable parameters and it returns the timeline that is needed. I feel that would simplify your code big time and make it more readable.

[Ben03]

Hi Dipscom,

 

  Thank you . Sorry I massively dropped the ball on this topic. I attempted calling in the function from an external function like so, but this didn't seem to work:

 

//functions js

let functions = {
  functionOne() {}
  functionTwo() {}

}
export default functions


//vue component

import functions from '.path/to/'
mounted() {
  functions.functionOne()
}

 

The only way was to write the gsap code directly in the mounted() code within the component. I don't mind though because it works.

 

Again I apologise for the convoluted code pasted. I am using similar to the following now:

 

ScrollTrigger.defaults({
   toggleActions: "play none none reverse"
})

const upFades = gsap.utils.toArray('.fadeup')
gsap.utils.toArray('.fadeup')
upFades.forEach(fadeUp => {
    gsap.to(fadeUp, {
        scrollTrigger: fadeUp,
        duration: 1.4,
        y: -20
    })
})

 

[Dipscom]

If it works for you and you're happy with the code, all is well.

 

There isn't anything intrinsically wrong with adding animations on the mounted() hook depending on the context, obviously. So, if it works, job's d