Search the Community
Showing results for tags 'spa'.
Found 3 results
-
Hi, I have a question regarding using ScrollTrigger.matchMedia in multiple places within a web app (which will include using the same breakpoints in multiple places) To paint the scenario for you, so you have some more context. I have a Nuxt.js web app, that is using ScrollTrigger for various animations, which are setup within individual components throughout the app, which allows me to only create / destroy ScrollTrigger and gsap instances where needed to keep things nice and tidy. I noticed in the video tutorial for ScrollTrigger.matchMedia, that declaring this object once seems to be the recommended way, and then using the media queries as keys - e.g '(min-width: 800px)' pointing to a function which would handle ALL the ScrollTrigger instances for each breakpoint. My question is, is there a specific way that I should be using ScrollTrigger.matchMedia() within a component, and setting up the gsap / scrollTrigger animations only related to that component. I have been playing around with this for the last few hours, and I keep running up against issues, as I am presumably using it incorrectly. UPDATE: Small Codepen example in the below reply. Apologies in advance as I haven't included any specific code in this post. I am just seeing if there is a simple way of achieving this with ScrollTrigger.matchMedia, or if I need to setup something a bit more custom to acheive this. If its better for me to setup a small repo / codesandbox with a simple example showing exactly what I mean, let me know and I will reply to this post with it P.S Just wanted to say that ScrollTrigger is the absolute bomb, and I've been using it since the day it launched! Thanks in advance!
-
Hi, I'm using TweenMax inside a Vue.js SFC - https://vuejs.org/v2/guide/single-file-components.html It's a Spinner component I re-use throughout our app. As soon as I visit a page using vuejs router - https://router.vuejs.org/ that has a spinner component in it and then go to another page, on return to the previous page, the animation no longer works and I get tons of errors that increment really fast in the console. It may be related to this if vue.js is hiding it for reuse - I'm not sure if I should be troubleshooting in this forum or vue.js Thanks, Gavin.
-
Hi everyone, Not necessarily having a problem with code to fix but need suggestions on how to approach an issue. I'm working in a mobile application that's running Knockout to create a SPA. I'd like to use draggable to handle the mobile support of dragging since it does so well. However, the nature of my problem is dom injection. Draggable looks for an element selector on page load to create it's logic. However in the SPA architecture elements are dynamically added and removed to the dom based on user interaction. I'm trying to find a way that I could create a generic class which if used would automatically make the element scrollable. I was thinking of something along the lines as Draggable.create(".scroll-container", {type:"scrollTop", edgeResistance:0.5, throwProps:true}); This works the way I want it if the element is already in the DOM. Is there a way I could have this function look for .scroll-container to show up in the DOM? Not sure if this is a GreenSock question or not. gonna check on Knockout forums as well but I have to assume this is an issue others have run into and felt it was worth checking here.
