Search the Community

Hi, fellow GSAPers! May I ask for your help, please?!? The codepen shows a pendulum like motion - or should. Because for some reason, after the very first pendulum motion, there is a strange delay. Only then it continues naturally. Do you happens to know why? And what the solution would be? Thank you!

Hi there! I'm trying to make this horizontal section to "stick" or "snap" the next or prev slide based on the scroll wheel event, but i'm unable to do so. The main goal is, no matter how long the scroll event lasts, it should simple move/scroll to the next or prev slide. Am taking the wrong approach for that (using scrollTrigger and end())? https://codepen.io/jimmyadaro/pen/jOWaZZV I've tried copying this Codepen since it achieves what i'm looking for, but had no success with that. https://codepen.io/mikeK/pen/eoyrWK?editors=0010

Hello folks, I am very new to the gsap framework. I am trying to achieve a UI requirement for my project where I want to lock the div to change the child div's background color till the div reaches center of the viewport. I tried to achieve this but not sure how to start changing color of the first div after the scroll-lock starts and also to complete the color change of the 3rd div little before the scroll-lock ends.

HI, brand new to GSAP. I am looking to "unblur" an image after a completed animation. I looked for blur methods in GSAP3 but did not find anything. I again searched for a while and found some info that referred to having to import Pixi or something like that. I then decided to use a css pseudo element with absolute positioning on top of the image with a backdrop filter to achieve the blur. This worked by adding a "pseudo blur" (because the actual image is not being blurred). I am also trying to scale the image and its opacity so that it fades in and scales up blurry with the animation ending with the image at intended size and clarity. I tried to target the css pseudo element (::after) according to a video I just saw. This required the import of the CSSrule plugin. But it doesn't seem to work for me. I would appreciate any insight anyone can offer. As I mentioned I am brand new to GSAP and am looking forward to the possibilities. If there is a way to blur the actual image and not have to rely on the pseudo element that would be ideal. I started a CodePen here if anyone is interested: https://codepen.io/j2squared/pen/bGPXmey Thanks in advance.

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 have been struggling to build this(mention in picture). I want to make a curved marquee or infinite scroll carousel where each item, in this case flag will move from left to right. When a flag enter center of the viewport, in this case enter into window area - window background will be changed. How can I build this using gsap? For any kind of query please let me know.

https://codepen.io/iamryanyu/pen/GXpyLQ

Hello, i found some slider using Gsap but i want to modify it with timelines. My goal is when i start scrolling my slide scroll and set rotation to 0 I tried to combine it with timeline but it jumps or anims end when i didnt scroll yet. Without timeline all of them rotates at the same time.

Hello GSAP community! ? I'm using the vanilla-lazyload library to lazy load images. I need to use lazy loading because I'm working on a project page and there are a lot of photos/videos that weigh a lot. The whole problem lies in the ScrollTrigger position after the images, which are loaded lazily. The fact is that initially these images do not have a height and because of this ScrollTrigger fires earlier than necessary (which is correct). To solve this problem I used the method when loading each image ScrollTrigger.refresh() This method allows ScrollTrigger to work when needed, but on phones (I tested on iPhone 14 Pro in Safari and Google Chrome) when scrolling, the scroll stops at the moment this method is executed. How to fix the problem of stopping when scrolling quickly on mobile devices? I tried to solve this using the method ScrollTrigger.normalizeScroll(true) But this method removes smooth scrolling on mobile devices, which also doesn’t look very good. I also use the lenis-scroll library, but if I turn it off the problem remains. I am attaching my codepen so you can understand the reason: https://codepen.io/ProjectDCL/pen/QWRVYYz (Be sure to watch it on your phone to understand why). I hope there is a very easy solution to my issue. But I've already spent several evenings trying to find something worthwhile. I will be very grateful for your help and believe in the magic of GSAP ?

here's the Demo, I am creating a simple timeline and controlling it with gsap.to to be able to use different easings on playing the timeline in reverse, https://codepen.io/Subham-Singh-the-bashful/pen/RwmgmwK

Hello Everyone! I have a bit of a generic problem/misunderstanding - basically, i have some animations in GSAP and have a couple of questions to understand it more deeply: When is the best time to load the GSAP animation (when the document is loaded or when everything is loaded (DOM, images, etc))? The first question leads to this one - if I do a hard refresh in the browser my animations are flashing or for example, the element that should be x: -100% is visible (for literally like 0.00s but still and then animation kicks in so there is a little flash) because the js file is not probably loaded yet - how do you guys tackle this, especially vital animations like for hero section or the other places when we need everything to be loaded and animated ASAP? Please have a look at the code below all bundled by webpack: $(function () { // Hero section animation const heroBanners = document.querySelectorAll(".section__hero-banner"); heroBanners.forEach((section) => { let imgCover = section.querySelector(".img-cover"); let imgTl = gsap.timeline({ scrollTrigger: { trigger: section, // markers: {startColor: "green", endColor: "red", fontSize: "18px", fontWeight: "bold", indent: 20}, start: "top center", }, }); // Inital state for headings imgTl.set(".hero-text__right", {x: "120%"}); imgTl.set(".hero-text__left", {x: "-120%"}); imgTl.to(imgCover, { opacity: 1, ease: "power4.inOut", duration: 0.4, }); gsap.utils.toArray(section.getElementsByClassName("hero-text")).forEach((heroText, herIdx) => { var container = section.getElementsByClassName("text-wrapper"); let textTl = gsap.timeline({ scrollTrigger: { trigger: section, scrub: 1, // markers: {startColor: "green", endColor: "red", fontSize: "18px", fontWeight: "bold", indent: 20}, start: "top top-=50px", end: "bottom center", // toggleActions: "restart none none reset" }, }); if (herIdx % 2 == 0) { let distance = $(container).width() - $(heroText).width(); //left imgTl.to(heroText, { x: "0%", duration: 0.85, ease: "power4.inOut", }); textTl.to(heroText, { x: `${distance}px`, }); } else { let distance = $(container).width() - $(heroText).width(); //right imgTl.to( heroText, { x: "0%", duration: 0.85, ease: "power4.inOut", delay: -0.85, } ); textTl.to(heroText, { x: `-${distance}px`, }); } }); }); }); The animation is: hero image fade in then slide two lines of text from left and right. Would be amazing he somebody could point out some bad practises or mistakes or if this could be done in better way. thanks you so much guyz!

Note: The issue only occurs on Safari. I wanted the user to see a large logo across the entire width of the screen upon entering my website, and after moving the cursor lower, I wanted the logo to shrink and move to the logo's location. Sometimes (I don't know what it depends on) there is an error like in the attached video. The problem seems to me to be that GSAP is unable to handle the change from width:100% to width: auto and therefore, instead of a smooth transition, it stops at some strange height of the logo. Here you can find video that present my problem: https://youtu.be/GbFOv4NCgrk Here you can find my website: https://melon.studio Here you can find JS code that animate my logo <script> let mm = gsap.matchMedia(); // use a script tag or an external JS file document.addEventListener("DOMContentLoaded", (event) => { gsap.registerPlugin(ScrollTrigger) // Animate From $("header").each(function (index) { let triggerElement = $(this); let targetElement = $(".menu-logo"); let targetElement2 = $(".menu-logo svg"); let tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, // trigger element - viewport start: "bottom top", end: "bottom bottom", scrub: 1.5 } }); mm.add("(min-width: 53rem) and (min-height: 930px)", () => { tl.fromTo(targetElement, { y: "0%", width: "100%", margin: "50px 0 0 0", duration: 1 }, { width: "auto", margin: "0" }); }); }); }); ScrollTrigger.defaults({ markers: false }); </script> I tried to add different values in my GSAP script but nothing really helps :/ It looks like GSAP can't go from 100% to auto and stops when he is trying to calculate that.

Hi there, I am really struggling to figure out why this isn't working.... and it's so close I do not want to give up on it. For some reason anytime I tween to 0.5 in the timeline it completely skips over it and goes to 1. This happens when I manually set the value to 0.5 - Even without Labels it refuses to work. I have 3 buttons, so I want them to trigger to 0, 0.5, and 1. Console logging the progress confirms this is where the 2nd button should go. However, it goes to 1 no matter what? Is it rounding up? Testing with 0, 0.33, 0.66 works but that is not the correct position. Thanks in advance for any suggestions.

Dear Support, We are developing a website that has Scroll Smoother applied on the whole page with multiple scrolltriggers applied. We use normalizescroll(true) globally on all pages so that it follows scroll correctly (Android and IOS). But this options breaks the <a href> elements on touch hold event. Specifically on mobile devices when you hold a <a> element it fires the click event. When we disable normalizescroll it doesnt fire the click event when you hold a <a> element. We created a small codepen to recreate the issue. Please visit it from mobile devide(preferably Android with Chrome). We have fully updated softwares.

Hi, Receiving this "Module not found" error while importing DrawSVGPlugin module. the base gsap is working fine, just the drawSVGPlugin is throwing this error. import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin'; export const PathAnimation = () => { gsap.registerPlugin(DrawSVGPlugin); } I am using NextJS 14.1.0. I tried importing the plugin from "/dist" "/all", but the issue persists. Thanks in advance for help.

Hello everyone, and thanks in advance for help! I am trying to create horizontal scroll animation with 3 main section where first section should be 50% width and other 50% should be 50% of first image in second section. Right now I have created with 5 sections and same is working fine if there is not different concept for middle section. On load first div appears with 50% width and 50% of second div is visible in viewport Once middle div appears in viewport it should have 3 inner divs scrolling one by one Second div on viewport initially After scrolling one by one image should move left with text appearing left aligned After completion of the above animation, the second div should swipe left and the third div should appear. having different animations on it. https://codepen.io/subho0777/pen/gOEdjMV

Hi everyone! I'm working on a landing page and I need to create a pre-loader that uses my handwritten logo as an SVG. Desired effect: The desired effect is a Stroke Reveal, implemented with GSAP3. How can I achieve this effect? Logo positioning: After loading, the logo/preloader should be positioned centrally on the navbar. Request for help: To achieve this project, I would need your help. What should I study? Best practices? What resources and tutorials do you recommend to learn more about?: Creating pre-loaders Stroke Reveal effect with GSAP3 Dynamic positioning of SVG elements What can I get inspiration from? Do you have any examples of websites or projects that use similar effects? Conclusion: Thank you in advance for your support! Additional information: I'm using GSAP3 My logo is a handwritten SVG The landing page is developed in HTML, CSS and JavaScript Thank you very much for your help!

codepen.io/benheise/pen/WNmZWpO https://codepen.io/benheise/pen/WNmZWpO Current version: https://unpkg.co/gsap@3/dist/gsap.min.js = GSAP 3.12.5 Does a GSAP3 method/property exist to convert GSDevTools total time to the actual total time? In my workflow GSDevTools helps out in a big way when determining time between frames. The culprit is coming from repeat: -1 in the .fromTo()where total time is 1000 want this time to represent the actual time(screenshot provided) Removing repeat: -1 or creating repeat: # without the negative yes creates actual total time

Hi, and Thanks in Advance; I need to create two sections. The parent div will be pinned, and you can scroll a Lottie animation on the left and text on the right together and snap the Lottie animation to specific keyframes. For example, I have a Lottie animation where it shows a bulb, then transforms into a notebook and then into a tablet. Simultaneously, on the right side section, I have a div with text in it. so when the animation is at bulb I want to show text bulb {initaily},then I scroll and if the animation is at the notebook I want to show notebook in the div text area. And if the animation is in between, snap to the nearest keyframe of a bulb or notebook and so on. and when the Lottie animation ends then unpin parent section. You can see the example if the website: https://www.brandnewschool.com/ if you scroll down. I am really stuck here.

I am trying to recreate the effects on this page with no luck. Anyone got good starting points or know of a demo? Ive tried with all the plugins with no luck. Maybe GSAP is not for this? https://zhenyary.com/404

Hi Everyone, I have been working on the project involving WebXR, using ThreeJs and Gsap 3. And I have notice that when you initialize webXR session (clicking on 'Enter VR' button) update of Gsap's timelines just stops. They mention in How to create VR content on ThreeJs' website that you need to call setAnimationLoop() from their renderer and to pass callback and that you can't use window.requestAnimationFrame() function (I need to investigate this topic more). The problem was solved calling gsap.ticker.tick() from the callback function. For testing, I have added listener to gsap.ticker and it was working fine when webXR session is not initialized. Is there a better method to update gsap timelines, and am I missing something? I used Oculus Quest for headset and Oculus Browser which is based on Chromium.

Hi! When I remove the markers property or set it to false, the ScrollTrigger stops working. Why? PS: With markers it works let tl2 = gsap.timeline(); tl2.from(".root--offer__header", { xPercent: 650, }); ScrollTrigger.create({ animation: tl2, trigger: ".root--offer__header", start: "top top", end: "+=4000", scrub: true, pin: true, anticipatePin: 1, duration: 2, ease: "none", markers: true, });

Hy, I tried converting my blob animation to GSAP 3, but am having some dificulties, this is my old code: https://codepen.io/Josip-Bogdan/pen/JjxZLKO This is my new code: https://codepen.io/Josip-Bogdan/pen/xxMzLJv

Hello, why is not working? logo

Hi once again, I am trying to create infinite movement, but have to problems and don't have enough experience to understand what's going on. Changing ease: "power1.in" to ease: "back.inOut(1.7)" - second one not works, however first one plays well. All squares created at once before movement started, however I need to create them one by one (when carousel shifted add new square). The problem is, when I tried to call addSquare(6) in onStart, or any other place - squares created, but they don't move( Hope u could advice where I need to look. Thanks a lot for your time!