Jump to content


  • Posts

  • Joined

  • Last visited

Ben03's Achievements

  1. Ben03

    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 }) })
  2. Ben03

    Using with a Vue Spa

    Sure, I hope this helps a bit: https://codepen.io/alpine-rider/pen/OJvjWvq 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.
  3. Ben03

    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(); }
  4. 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?