Search the Community
Showing results for tags 'gsap 3.4.0'.
Found 1 result
-
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!
