Ben03 Posted July 21, 2022 Share Posted July 21, 2022 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 More sharing options...
Cassie Posted July 21, 2022 Share Posted July 21, 2022 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 youhttps://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagramhttps://router.vuejs.org/guide/advanced/navigation-guards.htmlhttps://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 More sharing options...
Ben03 Posted July 22, 2022 Author Share Posted July 22, 2022 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 More sharing options...
GSAP Helper Posted July 22, 2022 Share Posted July 22, 2022 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 More sharing options...
Ben03 Posted July 25, 2022 Author Share Posted July 25, 2022 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 More sharing options...
Dipscom Posted July 25, 2022 Share Posted July 25, 2022 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. 1 Link to comment Share on other sites More sharing options...
Ben03 Posted September 23, 2022 Author Share Posted September 23, 2022 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 More sharing options...
Dipscom Posted September 26, 2022 Share Posted September 26, 2022 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now