Search the Community

When I scroll the page on Safari iOS I can see a jitter on the page. Not in the animation but the overall page -- the text, etc. I understand that Safari handles scroll differently, but I'm not sure if there's something else I can do to stop it. When I comment out the JavaScript and scroll the page the jitter goes away.

I work on ADHS-Gutachten.de I use scroll triggers to control the ThreeJS scene and the divs and their contents. Everything works very well at first. But: If I use the scroll bar and quickly scroll from top to bottom, various elements stop. I suspect that since the animations are not finished but the user scrolls past the trigger, the information to continue the animation is missing. I use the following code that repeats itself for all elements: With different classes, of course. const tlBackA2 = gsap.timeline({ scrollTrigger: { trigger: ".B", start: "100% 50%", end: "100% 50%", toggleActions: "restart none reverse none", } }); tlBackA2.fromTo(".A2", { y: "0vh" }, { y: "-75vh", duration: 0.5, ease: "power4.inout" } ).delay(0.4); const tlBackA2o = gsap.timeline({ scrollTrigger: { trigger: ".C", start: "100% 50%", end: "100% 50%", toggleActions: "restart none reverse none", } }); tlBackA2o.fromTo(".A2", { y: "-75vh" }, { y: "-150vh", duration: 0.5, ease: "power4.inout" } ).delay(0.4); I need information on how to set the positions of the classes at the beginning or end of each timeline, even if the animation of the timeline and the associated trigger have not yet been completed. The trigger has already run through. Maybe I think too complicated and it is a total beginner problem Can anyone give me a reference to a tutorial or tell me what I have forgotten in this code and what I need to pay attention to? Thanks for your time and help Thom

Hello, I'm encountering an issue with my GSAP/ScrollTrigger animation on Webflow. The glitch seems to be related to DOM changes, likely due to external resources loading after ScrollTrigger has already initialized. I assume ST then wrongly calculates the triggers (start and end) causing the glitch. I've tried using scrollRefresh() and wrapping the entire script in an eventListener for DOMContentLoaded, but the issue persists. 1. Video with the issue: https://youtu.be/_M-Q6dcT9S0 - Funnily the animation works correctly the first time, but on subsequent attempts, a glitch appears. 2. Triggers shift video: https://youtube.com/shorts/fCR3IKiSsQI - With markers turned on, I can see the trigger points shifting while the site is still loading probably causing the glitch 3. Temporary Workaround: As a temporary fix, I set the section meant to be animated to display: hidden until the DOM is fully loaded and then script changes it to the "block". This resolves the glitch, but I believe there should be a better solution how to handles this without a need to hide the entire section. Live URL: Link to one of the talent pages (The issue can be replicated on other talent pages as well). Current Code Snippet: <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script> <script> gsap.registerPlugin(ScrollTrigger); // Wait for the entire window, including images, to be fully loaded window.onload = function () { // Temporary workaround: Make the projectpage-image visible by setting display to block //document.querySelectorAll('.projecttalent').forEach(function(element) { //element.style.display = 'block'; //}); // Create your ScrollTriggers and animations here gsap.from(".projectpage-image", { scale: 0, duration: 3, ease: "power2", scrollTrigger: { trigger: ".talent-work", scrub: 2, start: "bottom +=400", invalidateOnRefresh: true, onEnter: () => { // Attach the scroll event listener when the ScrollTrigger enters the viewport window.addEventListener('scroll', redirectHome); }, // markers: true, }, }); // Call ScrollTrigger.refresh() at the end ScrollTrigger.refresh(); }; let redirectTimeout; const redirectHome = () => { if (window.scrollY + window.innerHeight >= document.body.offsetHeight) { clearTimeout(redirectTimeout); redirectTimeout = setTimeout(() => { window.location.href = '/'; }, 800); } } </script> Webflow Build URL (FF-TALENTs TEMPLATE within CMS collections, code shown above inserted within this page) I would greatly appreciate any advice or solutions, as this is my first experience working with GSAP. Thank you in advance!

Hey there, I have been trying to make something like this codepen, I have managed to do the wipe effects but I wanted it to have that smooth scrolling effect. Issues: changing the srub from true to a certain value e.g (1.2) ruins the effect. also, pinning seems to be not working. I am kinda new to gsap, want some expert eyes to critic the code and maybe help me achieve the effect and optimize the code a bit. thanks.

Hello, first of all I apologize if my English is not very good. I don't write the language fluently This is my first post and I'm new to GSAP. Believe me, I didn't want to post this without trying to solve the animation problem first. I have an animation where, at the starting point, the cards appear stacked one below the other. As you scroll, each card moves up and eventually exits the screen, while the bottom card adjusts to position y:0. The problem arises when the animation is reversed. As shown in the preview, the cards do not return to their correct positions and the animation does not complete as expected. I hope someone can help me with this. Thank you! PD: Reload the page if the animation doesn't work as expected, I don't know what's going on. After reloading, it works fine. PREVIEW: https://stackblitz.com/edit/gsap-react-basic-f48716-vwwr1u?file=src%2FApp.js

Hi, I'm working on a website where a large image scales as you scroll. At page load, I want the image to start at 20% scale and be positioned higher on the y-axis so that it's visible in the viewport. While the setup mostly works, I've encountered an issue: when I apply a negative y-position, the scaling no longer happens from the center. https://codepen.io/remcovb/pen/eYwvGqb However, when I remove the negative y-position, the scaling works correctly from the center, but then the image isn't in the viewport anymore. https://codepen.io/remcovb/pen/bGPqoyo Any advice on how to maintain centered scaling while keeping the image in the viewport? Thanks in advance!

Hello everyone, I'm trying to do this effect (the one with the four cards): https://www.botify.com/ I'm having trouble and need some advice to succeed. Thank you for your help

const BringSection = () => { const rightRef = useRef(null); const sectionRef = useRef(null); useEffect(() => { gsap.registerPlugin(ScrollTrigger); const ctx = gsap.context(() => { gsap.fromTo( sectionRef.current, { y: 200, opacity: 0, }, { y: 0, scale: 1, opacity: 1, duration: 1, scrollTrigger: { trigger: sectionRef.current, start: "top bottom", end: "top center", markers: true, }, } ); ScrollTrigger.create({ trigger: ".gallery", start: "top top", end: "bottom bottom", pin: rightRef.current, markers: true, }); }); return () => ctx.revert(); }, []); return ( <section ref={sectionRef} className="bg-gray-300 rounded-[4rem] section-reveal" > <div className="gallery"> <div ref={rightRef} className="right"> <div className="photos"> <div className="photo red"></div> <div className="photo green"></div> <div className="photo blue"></div> </div> </div> <div className="left"> <div className="detailsWrapper"> <div className="details"> <div className="headline red"></div> <div className="text"></div> <div className="text"></div> <div className="text"></div> <div className="text"></div> </div> <div className="details"> <div className="headline green"></div> <div className="text"></div> <div className="text"></div> <div className="text"></div> <div className="text"></div> </div> <div className="details"> <div className="headline blue"></div> <div className="text"></div> <div className="text"></div> <div className="text"></div> <div className="text"></div> </div> </div> </div> </div> </section> ); }; export default BringSection;

I’ve created four cloud images (cloud1 to 4.png) and want to animate them to smoothly zoom out upon scrolling. Let me know the best way to achieve smooth scrolling. I’ll showcase a character when the clouds have nearly zoomed out completely.

Hello there, I would like to make a slider at the same time as a pinned element so that scrolling is possible only after all slides have been scrolled. Please, look at the example i have prepared. I've made a slider that work, but so many bugs there Could you please help me to find a better way to solve my problem?

I've created a scrolling container inside of the section. And it works just fine until I got to the next-prev buttons. The issue here is that scrollTo miscalculates the scroll position and sections become stuck in between. I've tried everything passing ids, scroll values, elements, even add fixed value on scroll (e.g. 200px). But no help. Help me please I've killed so much time trying to fix this bug. Here is my codepen. You can scroll down to section #3, and then play with buttons. https://codepen.io/pshechko/pen/gOJvyNq

I'm trying to implement a GSAP timeline with Locomotive Scroll beta to pin an element while scrolling in a Next.js component. The code works perfectly in a normal HTML and JS environment, but it's not functioning as expected in Next.js. Here is the minimal demo with normal html environment: https://codesandbox.io/p/sandbox/gsap-timeline-forked-3dqjgv?file=%2Fsrc%2Findex.js%3A8%2C18 Here is the Next Js version: https://codesandbox.io/p/devbox/c4cq6q?file=%2Fpin-element%2Fsrc%2Fapp%2FPinComponent.js%3A28%2C11 I'm new to GSAP and I'm looking for assistance to fix the issue.

Hello Guys, im very new to Javascript & GSAP. I have tested some things on a Testpage See here (not responsive yet) and here are the files: HTML IMG CSS JS FILE on Desktop and Android everything works fine ! Only on IOS mobile (Safari & Chrome on IOS) when u open the Testpage See here the scrollTrigger is not working correct. Between the Sections i have WHITE SPACE see in this screenvideo SCREENVIDEO i testet so many things, only solution for now what have worked is : ScrollTrigger.normalize.Scroll (this works on IOS but looks weird! Is there anything i can do , or i'm doing something wrong ? ps: pls i don´t know how to do a DEMO on Codepen or something like this ( all Files linked ) thank your for helping.

Hey guys, I need a little help with this one. I want scroll to specific slide by clicking on button but unable to find any way to perform same function. Pls advice. Many thanks

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!

Hey GSAP Team, I have a concern regarding my implementation of "scrollTrigger". The Start/End marker of the triggers isn't aligning correctly with the top and bottom of the triggers. Please focus on the ".services-content-heading-inner" element, as this is what I'm currently experimenting with. My ultimate goal here is to animate this element once it enters the viewport. However, it immediately animates because of how the elements' start/end is positioned. I tried changing the position to start: "center top", end: "center bottom". However, the position is still off and not really at the center of the trigger element. I attempted to change the trigger to the parent element, but the story remains the same. I really want to use scrollTrigger because it seems to be simpler compared to https://gsap.com/docs/v3/Plugins/Observer/. I also tried using https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.isInViewport()/ by wrapping the animation in an if-else condition "ScrollTrigger.isInViewport(element)". However, it doesn't fire the logic inside the condition even if the condition was met. I would appreciate your thoughts and expert advice on where I went wrong or missed. Thank you very much for any assistance.

Hello community. I'm trying to implement an animation that has been talked about here more than once from the site https://lenis.darkroom.engineering where Enter Lenis is approaching us in the screen. I implemented the same "backing" and it worked fine until I started testing it in Safari browser and on mobile devices The issue is that as I get closer, the edges of my shape (SVG) start to blur and I can see the outlines are not clear. I tried to implement my shape as a normal text, but I faced the same problem, my outlines during the animation process become not clearly visible. I also tried to add will-change property, but with this property my edges become blurred even in Google Chrome browser where everything was fine before. What could be the problem? Thanks! Demo: https://codesandbox.io/p/sandbox/scale-problem-tx8s3m?file=%2Fsrc%2FApp.tsx%3A32,11 Lenis Website: https://lenis.darkroom.engineering

Hello everyone ! I am having his issue of needing to animate elements that are within an overflow container. As you can see here by default, it seems GSAP doesn't pick up the positions of the container being scrolled thus the scrolltrigger never gets activated. The behaviour I'm looking after is that when the first blue square hits the top, the animation gets triggered. Right now, I need to scroll all the way down and then somehow scrolling some more gets the markers moving and triggers the animation (I'm thinking this is due to the pinspacer). If you'd have any thought on how to get around this/ info on the inner workings, it would be highly appreciated. Thanks a lot for any help you can provide

Hi Dear, I have created a component with split text and scroll trigger in a Next.js project. It works fine on Android but is not functioning properly on iPhone. Specifically, I'm experiencing jerking while scrolling. Can anyone suggest a solution to fix this issue?

Hi everyone, I'm writing here for the first time as I see that your community is quite developed, it's cool, thank you. I don't have more experience with GSAP, but I'm trying to realize this effect I have a page where the first block always takes 100vh, and as soon as I initiate a scroll event (any, strong or weak) my block automatically scrolls (I can't interrupt this event) and when it reaches the start of the second block, the effect turns and I can safely scroll the page. I'm trying to implement this, but I keep running into various bugs, I used to write it via Framer Motion, but now I'm trying to rewrite it on GSAP as I think this solution is more suitable for this effect. Does anyone have similar cases or maybe a demo to share some advice? Thank you very much I mean, in a nutshell. The point is that you can't scroll partially through the first block, only always the whole block. And then the page starts to work like normal scrolling in the browser on the next blocks https://codesandbox.io/p/devbox/scroll-sections-txdh67?file=%2Fsrc%2FApp.tsx cut5.mov

Hi all ? https://codepen.io/mikhail21990/pen/QWPEeRP I use two pin animations In the first, the block stands still and the photo is scrolled from bottom to top from the top of the text. in the reviews block, the block also stands still while the animation is running, containers with reviews should move from right to left. Separately, the animations work as they should, but together for some reason an incomprehensible flickering effect occurs. Tell me what could be the problem ?

i have problem in scroll trigger project page with outlet react-router-dom when first reload pinned not working in the other outlet . https://portfolio2024-two-black.vercel.app/project/live

My pin is not starting at the correct point. Please help

Hey guys, I am happy to be here and use your amazing tools for my upcoming personal website. That being said, I need your advice. What would you say would be best practices when dealing with multiple reveal animations on scrolling? I've found that mobile performance (on Chrome, since Firefox seems to perform beautifully) is pretty bad when it comes to the way my reveal animations trigger. They feel stuttery and somewhat low-fps. I've tried slowly scrolling to avoid overriding them by dragging the screen (to see if multiple animations firing at once could be the cause), but the choppy animation effect is pretty much the same even if only one animation triggers. For reference, I've set up my reveal animations using attributes. I place certain attributes on certain elements, and a switch statement detects the type of animation that needs to be fired for each element. Here's more or less how this code is setup. Maybe you have some pointers on how would be best to setup something like this? function loadGSAPAnimations() { let selector = "[data-reveal]"; // Base selector for elements to animate // Query the DOM once for each modified selector let itemsToAnimate = document.querySelectorAll(selector); itemsToAnimate.forEach((itemFound) => { const elementTimeline = gsap.timeline({ delay: itemFound.dataset.delay || 0, // If "data-delay" attribute is present, adjust value defaults: { duration: 1, ease: "power4.out" }, }), animationType = itemFound.dataset.reveal; switch (animationType) { case "multi-element-reveal": const childElements = itemFound.querySelectorAll(childSelector); gsap.set(childElements, { opacity: 0, y: 115, willChange: "transform, translateY", }); elementTimeline.to( childElements, { opacity: 1, y: 0, stagger: 0.2, ease: "power4.out", onComplete: () => { gsap.set(childElements, { willChange: "auto" }); }, }, "+=0.3" ); break; case "element-reveal": gsap.set(itemFound, { opacity: 0, y: 115, willChange: "transform, translateY", }); elementTimeline.to( itemFound, { opacity: 1, y: 0, duration: 1, ease: "power4.out", stagger: 0.15, onComplete: () => { gsap.set(itemFound, { willChange: "auto" }); }, }, "+=0.3" ); break; case "title-reveal": let elementText = new SplitType(itemFound, { types: "lines", lineClass: "title-line", tagName: "span", }); gsap.set(elementText.lines, { opacity: 0, y: 115, willChange: "transform, translateY", }); elementTimeline.to( elementText.lines, { opacity: 1, y: 0, duration: 1, stagger: 0.15, ease: "power4.out", onComplete: () => { gsap.set(elementText.lines, { willChange: "auto" }); elementText.revert(); }, }, "+=0.3" ); break; case "image-reveal": const image = itemFound.querySelector("img"); const innerWrapper = image.closest(".image-animation-wrapper"); gsap.set(innerWrapper, { scale: 1.15, "--reveal-scale": 1, force3D: true, willChange: "scale, transform, translateY", }); elementTimeline.to( innerWrapper, { "--reveal-scale": 0, scale: 1, duration: 1.5, ease: "power4.out", onComplete: () => { gsap.set(innerWrapper, { willChange: "auto" }); }, }, "+=0.3" ); break; } //Controls the distance from the screen when the item gets revealed on scroll const revealOffset = itemFound.dataset.offset || 84; // Create the ScrollTrigger instance ScrollTrigger.create({ trigger: itemFound, animation: elementTimeline, start: `top ${revealOffset}%`, end: "bottom 35%", refreshPriority: -1, }); }); }

I want vertical progress bar in content section that will be completely filled when user reaches at the end of the content section.