Search the Community
Showing results for tags 'matchmedia'.
Found 4 results
-
ScrollTrigger Matchmedia function does not work as I expected. It works successfully when i scroll without resizing screen. Please check my codesandbox link (https://codesandbox.io/s/blissful-franklin-j6rdo?file=/src/contents.js) here. Once I resize the screen to tablet view (~1024px) or opposite way from tablet view to Desktop view, - ScrollTrigger behavior does not work as initial setting. - Having console error message with `GSAP target null not found` As I found out the simple examples of matchmedia was working with resizing. But, my code does not work. Once resize the screen, seems scrollTrigger is getting confused. What did I miss on here?
-
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 there, I am using ScrollTrigger a lot, its a fantastic addition! the only issue I've run into so far is cleaning up when using ScrollTrigger.matchMedia() when un-mounting in my React components. I've tried killing all ScrollTrigger instances, and killing timelines individually. simplified setup below: const buildTimeline = () => { // ... setup stuff ScrollTrigger.saveStyles([boxRef.current, mobileRef.current]); ScrollTrigger.matchMedia({ '(min-width: 720px)': () => { if (!boxRef.current) { console.log('boxRef does not exist'); } ScrollTrigger.create({ // config stuff animation: desktopTimeline.current .to( // animations ) }); }, '(max-width: 719px)': () => { if (!mobileRef.current) { console.log('mobileRef does not exist'); } ScrollTrigger.create({ // config stuff animation: mobileTimeline.current .to( // animations ) }); }, }); } useEffect(() => { if (!hasMounted.current) { hasMounted.current = true; buildTimeline(); } return () => { // kill all ScrollTrigger[s] ScrollTrigger.getAll().forEach(t => t.kill()); // try killing individual timelines also mobileTimeline.current.kill(); desktopTimeline.current.kill(); } }, []); This would normally work ok on ScrollTrigger instances generally - or at least it seems to! - but if I'm using matchMedia I'll still get media query change events firing where the component is unmounted (i.e. navigating to a different route). any idea what I'm missing here?
-
GSAP 3.4 has arrived with some significant improvements to ScrollTrigger like: Accommodating different setups for various screen sizes, like a mobile version and desktop version - ScrollTrigger.matchMedia() Batching and staggering elements that enter the viewport, similar to what's often done with IntersectionObserver - ScrollTrigger.batch() Integrating with smooth scrolling libraries - ScrollTrigger.scrollerProxy() ScrollTrigger.matchMedia() You can use standard media queries to seamlessly transition between different ScrollTriggers. It's surprisingly simple to set up and let ScrollTrigger automatically handle all of the creating, undoing, and destroying for you. Basic setup ScrollTrigger.matchMedia({ // desktop "(min-width: 800px)": function() { // setup animations and ScrollTriggers for screens 800px wide or greater (desktop) here... // These ScrollTriggers will be reverted/killed when the media query doesn't match anymore. }, // mobile "(max-width: 799px)": function() { // The ScrollTriggers created inside these functions are segregated and get // reverted/killed when the media query doesn't match anymore. }, // all "all": function() { // ScrollTriggers created here aren't associated with a particular media query, // so they persist. } }); See the Pen ScrollTrigger.matchMedia() Demo by GreenSock (@GreenSock) on CodePen. There's a new ScrollTrigger.saveStyles() method that can be useful with matchMedia(). It saves the current inline styles for any element(s) so that they're reverted properly if animations added other inline styles. It's explained in the video above. See the ScrollTrigger.matchMedia() docs for details. ScrollTrigger.batch() Normally, each ScrollTrigger fires its callbacks (onEnter, onLeave, etc.) immediately when they occur but what if you want to coordinate an animation (like with staggers) of ALL the elements that fired a similar callback around the same time? ScrollTrigger.batch() creates a coordinated group of ScrollTriggers (one for each target element) that batch their callbacks within a certain interval, delivering a neat Array so that you can easily do something like create a staggered animation of all the elements that enter the viewport around the same time. It's a great alternative to IntersectionObserver because it's more widely compatible and easier to work with. Plus you're not restricted to only entering or exiting the viewport - batch() can use ANY start and end values! Demo See the Pen ScrollTrigger.batch() Demo by GreenSock (@GreenSock) on CodePen. See the ScrollTrigger.batch() docs for details. ScrollTrigger.scrollerProxy() ScrollTrigger purposefully avoids "scrolljacking" (disabling the browser's native scrolling behavior in favor of a custom, non-standard scrolling solution). However, smooth scrolling was by far the most requested feature to pair with ScrollTrigger. There are plenty of smooth-scrolling libraries out there, so we created the .scrollerProxy() method to make it simple to integrate any of them with ScrollTrigger (or create your own effects). Here's a basic example using Locomotive Scroll but check out the .scrollerProxy() docs for examples with other libraries. See the Pen ScrollTrigger with LocomotiveScroll by GreenSock (@GreenSock) on CodePen. And more... GSAP 3.4 also delivers various bug fixes, so we'd highly recommend installing the latest version today. There are many ways to get GSAP - see the Installation page for all the options (download, NPM, zip, Github, etc.). Resources Full release notes on Github Full documentation Getting started with GSAP Learning resources Community forums ScrollTrigger Express video course from Snorkl.tv Happy tweening!
