Search the Community

I have created a UI with a ladder-like effect using ScrollTrigger. Ladder-like UI The basic behavior, etc. is fine, but when displayed on a smart phone, the behavior is not right, so I tried to adjust it in MatchMedia as follows. New version of ladder-like UI For some reason, on Code Pen, the MatchMedia version only allows scrolling and the first one, but locally, scrolling was not a problem. However, is MatchMedia the right solution to adjust this UI and scrolling behavior on a smartphone? Any other Tips and Tricks for this?

Hello everyone. I have an array with text, using position fixed in the upper right corner of the screen and when scrolling to the desired section, I need to show new text, hiding the old one with animation. I did this, but the problem arises that when changing the browser window, everything breaks. Help me with this, please, and how can I optimize this solution? This is a code snippet, because further it is the same (p.s. I don't use useGsap because it breaks animation in production deployment of NExtJS) https://stackblitz.com/edit/stackblitz-starters-h6deec?file=app%2Fcomponent.tsx const TEXTS_FOR_DESKTOP = [ '2024', 'Finance', 'Reward', '2000', '2008', '2015', '2017', '2020', '2023', ] const titleRefs = useRef<(HTMLDivElement | null)[]>([]) const translateToY = -150 useEffect(() => { const mm = gsap.matchMedia(); const splittedText = titleRefs.current.map( (item) => new SplitText(item, { type: "chars" }) ) mm.add( { isTablet: '(min-width: 834px) and (max-width: 1509px)', isDesktop: '(min-width: 1510px)', isExtraSmallMobile: '(max-width: 833px)', }, ctx => { const {isDesktop, isTablet, isExtraSmallMobile} = ctx.conditions! if (isDesktop) { const groups: gsap.DOMTarget[] = gsap.utils.toArray('.trigger') splittedText.forEach((t, i) => { if (i > 0) { gsap.set((t as any).elements[0], { yPercent: 150, position: 'absolute', top: 0, left: 0, width: '100%', }) } }) // 2024-finance gsap.timeline({ scrollTrigger: { invalidateOnRefresh: true, trigger: groups[0], start: 'top top', id: `anim_${0}`, end: '+=260px', // markers: true, scrub: 1, }, }) .to(splittedText[0].chars, { yPercent: -300, ease: 'power2.in', duration: 2.5, stagger: {from: 'end', amount: 0.6}, }) .to( splittedText[1].chars, { yPercent: translateToY, ease: 'power2.in', duration: 2.5, stagger: {from: 'end', amount: 0.6}, }, '<-0.3' ) // finance-reward gsap.timeline({ scrollTrigger: { invalidateOnRefresh: true, trigger: groups[1], start: 'center top', end: '+=500', id: `anim_${1}`, // markers: true, scrub: 1, }, }) .to(splittedText[1].chars, { yPercent: -300, ease: 'power2.in', duration: 2.5, stagger: {from: 'end', amount: 0.6}, }) .to(splittedText[2].chars, { yPercent: translateToY, ease: 'power2.in', duration: 2.5, stagger: {from: 'end', amount: 0.6}, scrollTrigger: { invalidateOnRefresh: true, trigger: groups[1], start: 'center top', end: '+=500', id: `anim_${1}`, // markers: true, scrub: 1, }, }) // reward-2000 gsap.timeline({ scrollTrigger: { invalidateOnRefresh: true, trigger: groups[2], start: '-300 top', end: '+=200', id: `anim_${2}`, // markers: true, scrub: 1, }, }) .to(splittedText[2].chars, { yPercent: -300, ease: 'power2.in', duration: 2.5, stagger: {from: 'end', amount: 0.6}, }) .to(splittedText[3].chars, { yPercent: translateToY, ease: 'power2.in', duration: 2.5, stagger: {from: 'end', amount: 0.6}, scrollTrigger: { invalidateOnRefresh: true, trigger: groups[2], start: '-300 top', end: '+=200', id: `anim_${2}`, // markers: true, scrub: 1, }, }) } } ) }); <div className='fixed right-0 top-0 z-[-1] hidden h-[120px] w-full flex-col gap-[2px] overflow-hidden text-right uppercase 834:flex desktop:h-[200px]'> {TEXTS_FOR_DESKTOP.map((text, index) => ( <div key={index} className={`fluid-text flex items-center justify-end gap-1 font-[500] 834:leading-none`} ref={el => { titleRefs.current[index] = el }} > {text} </div> ))} </div>

I'd like to implement reduced motion. Please offer some suggestions to the demo/codepen provided! (I've tried my code with basic syntax, conditional syntax, with context and without... ). I notice the matchMedia object (mm) in my debugger. I even see the key-value pair for reduceMotion nested in the object. The add method is undefined. I've tried meticulously to follow the documentation. I also tried removing the array code and attempted writing this tween with gsap.to and selector text (w/ the data attribute) instead of the utils array method and loop. I'll be happy to implement any recommendations, thank you. I searched the forums as well...

Hello everyone, I'm new to GSAP and am trying to learn it. I have created a pen where I'm using GSAP ScrollTrigger to animate my site. Everything works fine on a big viewport, but when it comes to mobile or tablet viewports, my sections get overlapped with each other. Why does this happen? I can understand that if I apply pinSpacing=false, then the bottom section should start overlapping the pinned section. But here, I didn't apply any pinSpacing at all, so why does my content get hidden under other sections? what i want is that when scroll of first section/div completed then only second section should come to view one by one. Please help me solve this error because I have to complete the whole project for my company, and I'm facing a lot of stress because of this. This only happens when I switch to mobile or tablet viewports.

Hi All, I am having some slight issues with adding a matchmedia to my .tl animation. I have included a pen however I have only including the code to my animation and not the HTML or CSS because i'm using webflow and theres a lot of going on there and also because my animation was working perfectly fine until I added the matchmedia. Can someone let me know why it may not be working? I am trying to change the the width of the .logo-container class depending if on mobile or desktop. (80vw for mobile, 20vw for desktop). Also just for easy viewing when looking at the Pen, the snippets bellow are exactly what I added to the gsap when trying to include match media, and without these parts the animation was working fine. let mm = gsap.matchMedia (); mm.add({ isDesktop: "(min-width: 800px)", isMobile: "(max-width: 799px)" }, (context) => { let {isMobile, isDesktop} = context.conditions; width: isMobile? "80vw" : "20vw", I feel that I have wrote everything correctly after watching Cassies youtube tutorial, but maybe I have wrote something incorrect or missing something, I would be incredibly grateful if someone could let me know where I might be going wrong.

Hi there, I'm having some issues with the trigger positions after resizing and am not sure if I'm doing this correctly. As you can see in this demo the start and stop positions are off once I resize from desktop to mobile. Actually in my project the positions are off for both desktop and mobile during resize but unfortunately I couldn't replicate that in the demo. Maybe I can get some sort of direction here. Thanks to all of you hardworking geniuses for this awesome tool !

Hi, Experiencing some glitches with horizontalLoop helper. I have list items overlapping and popping in and out like image shown below. Just wondering if my implementation is off or if the helper is not quite the tool for this component. I attempted to use this at the most basic case, but still experiencing some issues. Thanks for any help.

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?

I'm really new to this and have slowly pieced this together. I'm pretty sure I have way to much js at this point but I'm trying to fade in the H1 just after the bullseye circle disappears and then as that moves up, the other text fades in from the bottom of the screen and moves up to look like this:

Hello Forum, I try to create animation only for larger screen. I animate the y position of the box. However, after the window resize the box seems to be out of position. I am creating a website that use similar animation. In my case, the image either wont show up or out of place. Thanks in advance people!

I have a basic gsap animation set up with matchMedia. ScrollTrigger.matchMedia({ "(min-width: 700px)": function () { let containerWidth = parseInt(getComputedStyle(document.querySelector(".see-through")).width); let tl = gsap.timeline({ scrollTrigger: { / .... } }); tl.to(".logo-transparent", { x: containerWidth/2, scale: "0.8" }); }, "(max-width: 699px)": function () { let containerHeight = parseInt(getComputedStyle(document.querySelector(".see-through")).height); let tl = gsap.timeline({ scrollTrigger: { / .... } }); tl.to(".logo-transparent", { y: containerHeight/2, scale: "0.9" }) } }); Now what I want is to update the values of containerWidth and containerHeight on each resize event. I tried adding an eventListener for resize event and updating the variables, but it still has no effect on the animation. Perhaps the animation is not updated on each resize unless the media breakpoints change. What approach can I follow for the desired effect?

Hello there, i have a homepage https://staging8.texpack.it/ that has some animations, one kind is a group of which on under 1200px screens makes "fade in moving up some" containers, above 1200px them "come in" from left or right according to a class. These animations run only one time on Chrome mobile, if i come back or refresh the home, only the animations outside the ScrollTrigger.matchMedia({ .. }) work properly. Thank you in advance for your help! Here is the js that manages the responsive functions: ScrollTrigger.saveStyles('.matchMedia'); ScrollTrigger.refresh(); ScrollTrigger.matchMedia({ '(max-width: 1199px)': function(){ // WIDGET BOX IN BOX gsap.utils.toArray('.wbib-trigger:not(.no-gsap)').forEach(function(section) { let target = section.querySelectorAll('.from-left, .from-right'); gsap.from(target, { scrollTrigger: { trigger: section, end: '+=45%', scrub: 1.2, }, opacity: 0, y: 100, duration: 1 }); }); }, '(min-width: 1200px)': function() { // MAIN NAVIGATION var origin = ''; $('.menu-item-has-children').mouseenter(function(event) { origin = $(this).children('a').html(); $(this).addClass('active').find('.sub-menu').addClass('active'); }); $('.menu-item-has-children').mouseleave(function(event) { $(this).removeClass('active').find('.sub-menu').removeClass('active'); }); $('.sub-menu').mouseenter(function(event) { $(this).parents('li').addClass('active'); }); $('.sub-menu').mouseleave(function(event) { if (event.relatedTarget.innerHTML != origin) { $(this).removeClass('active').parent('li').removeClass('active'); } }); // WIDGET BOX ON BOX gsap.utils.toArray('.wbib-trigger:not(.no-gsap)').forEach(function(section) { let target = section.querySelectorAll('.from-left'); gsap.from(target, { scrollTrigger: { trigger: section, end: '+=45%', scrub: 1.2, }, opacity: 0, x: -100, duration: 1 }); }); gsap.utils.toArray('.wbib-trigger:not(.no-gsap)').forEach(function(section) { let target = section.querySelectorAll('.from-right'); gsap.from(target, { scrollTrigger: { trigger: section, end: '+=45%', scrub: 1.2, }, opacity: 0, x: 100, duration: 1 }); }); } });

Context: I want the counting animation to happen only when the screen size is larger than 1024px So for example, starting number is 30 and the number will increment until the target number 50. However, when I resize the screen the number becomes 30 rather than staying at the target number 50. From the documentation, it seems like the ScrollTrigger will kill the animation and revert to its original state when the media query doesn't match However, is there any way to maintain the final state? I'm using React and here is the code snippet I'm new to this forum and GSAP and thank you in advance for your help and guidance. Here is the code import React, { useEffect } from "react" import { gsap } from "gsap" import { ScrollTrigger } from "gsap/ScrollTrigger" const TestPage = () => { const stats = [{ finalNum: 50, startNum: 30 }] useEffect(() => { gsap.registerPlugin(ScrollTrigger) ScrollTrigger.matchMedia({ "(min-width: 1024px)": function () { ScrollTrigger.create({ trigger: "#counter-trigger", start: "-=350", end: "+=200", markers: true, animation: gsap.from(".mycounter", { duration: 0.55, innerText: stats[0].startNum, snap: { innerText: 1, }, once: true, }), }) }, }) }, []) return ( <div> <div style={{ height: "1000px", backgroundColor: "lightcoral", }} > some stuff here </div> <div my={100} id="counter-trigger"> <span className="mycounter" style={{ fontSize: "80px" }}> {stats[0].finalNum} </span> </div> </div> ) } export default TestPage

I'm working on a menu that needs to react differently for mobile vs desktop. I got it working but when I change the viewport width, the animation and reverse animation are bugged one time, after that they adept to the 'new' situation. On browser refresh it also works correctly. Can anyone point out why the animations don't work correctly when changing the viewport width the first time? If I look in the inspector I see the values being being used are still from the other timeline, even though the new screensize is active.. Item 2 slides out a sub-menu, other items should do the same but I left that out for now.

Hi, I'm back at it again and need some help understanding what is going wrong. I want my scrollTrigger to only be active on mobile devices. Thus, I created the scrollTrigger animation within a media query. As I understand the documentation my implementation should work but it obviously doesn't ? I'm having trouble understanding where I'm going wrong this time ://

I have a Next.js/React project with typescript and Storybook: when using Scrolltrigger.matchmedia() function the component always give an error when running inside Storybook: _win is undefined matchMedia@http://localhost:6006/vendors~main.d3f7aa1f55228e485314.hot-update.js:1541:10 Removing matchmedia it all works as expected, but I need it in the project, this is very upsetting... You can find the demo code here on github: https://github.com/marcello-palmitessa/gsap-scrolltrigger-issues-demo

HI Guys, I have created 2 boxes(large & small).. And i want to animate those boxes differently in different screen sizes. Here in code pen u can see a demo. Its for the large screen device. Here the small box is showing after the first box appears & then sliding to left. But i want to change the animation for medium or small screens. Like first the large box will appear like it do for large screens and then the small box will appear after a few seconds & then instead of sliding left it will disappear after showing a few seconds. I used matchMedia for making changes. But somehow im unable to get the result i want. Im so confused. I dont know what to do. Can anyone tell me whats the problem in my code.

Hello, can anyone help me with this error? (I want to preface that I'm a newbie at coding and I only try to adapt from other as much as I can understand...) I have adapted some code from the forum which explained how to use GSAP for different media queries but I cannot seem to make the functionality work... The idea: When page is fullscreen, the menu icon should trigger and animate GSAP timeline on >mouseenter/mouseleave< for selector ".menu-links". ( I used .play(); and .reverse(); ) When page is going devices size screens, mobile/tablet < 733px, the menu icon should trigger and animate GSAP timeline on >click< for selector ".menu-links + #social" ( I used .restart(); and .reverse(); ) ---- the code works right now only when page is loaded in mobile size to begin with, if resized functionality breaks. also vice versa, desktop resized to mobile ---- My question is can: this be done better? Ideal would be to resize page without losing functionality going from big screens to small screens without page reload. ==== ps: if this topic is wrongfully opened please feel free to delete it. Thank you very much, Alex

Hello everyone, I have an animation that needs to display only above 992px width and 700px height. however it seems i cant add more than one condition to matchMedia. What is the (proper) way to do this? (I hope you dont mind i used your matchMedia demo as a starting point for my codepen) Thanks, Patrick Rijkee

Hey guys, Couldn't find any info in the docs about using ScrollTrigger.matchMedia and pointers? I tried it with pointer:coarse and it didn't seem to register? Is this a feature / would it be in the future? Something like below. Thanks heaps ScrollTrigger.matchMedia({ "(pointer: coarse)": function() { // setup animations and ScrollTriggers for pointer: coarse?? }, });

Hi there, I am running into an odd issue with my React site and using GSAP. Website: https://gpstaging.netlify.app For all the scroll based triggers, if I resize the window they will either disappear https://take.ms/6VGoD or not fire their animation when scrolling down the page. It looks like they disappear because an inline style of opacity: 0 and visibility: none is getting applied to them. But I have no idea why and even when I removed all the other components that had GSAP animation applied, the styles keep showing up. Here is a simplified demonstration of the items disappearing once the window get's resized a few times. https://codesandbox.io/s/festive-feistel-puiib?file=/src/App.js For the full production code version, please see the below Github link. https://github.com/GedalyaKrycer/gedalyakrycer.github.io/blob/gsapBackup/gk-portfolio/src/components/Bio/index.js I suspect I am not using the useRef correctly and maybe there is issues with having multiple components that have GSAP on it. But I am not sure how to troubleshoot it. Much appreciation for any insight. Gedalya

I'm trying to trigger different timelines at different breakpoints using the window.matchmedia(); method. I've attempted to put together a potential example here: const box = document.querySelector(".box"); const change = document.querySelector(".change"); const mqs = [ window.matchMedia("(min-width: 600px)"), window.matchMedia("(min-width: 768px)"), window.matchMedia("(min-width: 1024px)") ]; const tl = gsap.timeline({ paused: true; }); if (mqs[0].matches) { tl.to(box, { backgroundColor: "green" }); } else if (mqs[1].matches) { tl.to(box, { backgroundColor: "pink" }); } else { tl.to(box, { backgroundColor: "black" }); } function playTl() { tl.play(); } change.addEventListener("click", playTl); My idea is to have the change button trigger the animations. Is it a little more complex that this approach? Having dug around in the forums it seems media queries plus gsap tends to throw up a number of complex solutions, I was hoping for something a little more simpler. Here's a Codepen also:

animation is working correctly when browser loads, when I resize the browser, the animation does not work. gsap.registerPlugin(ScrollTrigger); ScrollTrigger.matchMedia({ "(min-width: 750px)": ()=>{ let timeline = gsap.timeline({ scrollTrigger:{ trigger: " #skill", start: "top 60%", toggleActions: "restart ", duration: 2 }}); timeline .from("#skill .title", { x:"-120%", ease:'power3', opacity: 0 }) .from("#skill .skill", { x:"-120%", opacity: 0 }) .from("#skill .progress", { x:"-100%", ease:'power2', stagger: 0.15, opacity: 0 }, 1); }, "(max-width: 749px)": ()=>{ let timeline = gsap.timeline({ scrollTrigger:{ trigger: " #skill", start: "top 60%", toggleActions: "restart", duration: 2 }}); timeline .from("#skill .title", { x:"-100%", ease:'power3', stagger:0.15 }) .from("#skill .skill-bar", { x:"-100%", ease:'power3', stagger:0.15 }) .from("#skill .progress", { x:"-100%", ease:'power3', stagger:0.15 }, 1); } });

Hi! I try to change animation with (window.matchMedia()).matches How can i get tween from timeline and replace (or edit) it? I read about .remove() method, but how can i add on removed place other tween and how can i add label to tween. for example: tl .addLabel('start') .to('.box-1', {x:100}, "start") // <--- how to change this or how to .remove() this and place other tween on this place .to('.box-2', {x:100}, "start")

Had a trawl through the site and codepen but couldn't find an answer. I have timelines that require different scrolltrigger values according to media queries, is it correct to place paused timelines outside the ScrollTrigger.matchMedia() and the scrolltrigger/s inside the function? Or is it best practice to duplicate timelines in each media query? Or some other setup? Thanks