Jump to content
GreenSock

Ben03

Using with a Vue Spa

Recommended Posts

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?

Link to comment
Share on other sites

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,

Link to comment
Share on other sites

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

}

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

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

 

Link to comment
Share on other sites

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

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