[Using with a Vue Spa]

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
    })
})

 

[Using with a Vue Spa]

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.

[Using with a Vue Spa]

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();

}

[Using with a Vue Spa]

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?