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

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.

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

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?