Search the Community

Hello Everyone My Gsap working correctly with scroll trigger on desktop however not working correctly on mobile As you can see in video, on mobile scroll trigger not work well and I think the issue have relationship with start and end Any idea to fix it ? I attached demo link Desktop : https://streamable.com/bg7m8s Mobile : https://streamable.com/jvksfn My Code Snippet export const fadeInUp = ( element: HTMLElement, isScroll: boolean, delay?: number ) => { const fromOptions = { opacity: 0, y: 50, }; const toOptions = { opacity: 1, y: 0, delay: delay, duration: 1, }; if (isScroll) { const scrollToOptions = { ...toOptions, scrollTrigger: { trigger: element, toggleActions: "play none none reverse", start: "top 60%", // Adjust the start value for mobile end: "top center", markers : true }, }; return gsap.fromTo(element, fromOptions, scrollToOptions); } return gsap.fromTo(element, fromOptions, toOptions); }; Thank you

Hello there, at first it works good, but after i enable pin it just jumps to the bottom and only works when scrolling back up, how can i pin it the same position and after the revealing is done, and then i can scroll pass that, thank you in advance, i attached a video (sorry for the compression, 1mb limit) const About = () => { gsap.registerPlugin(useGSAP,ScrollTrigger); const text = new SplitType('#target') gsap.from(text.chars, { scrollTrigger: { trigger: "#target", start: 'top 70%', end: 'top 00%', scrub: true, pinSpacing: false, markers: false }, opacity: 0.1, y: 20, stagger: 0.01 }) return ( <div className='about content-center items-center text-center overflow-hidden py-12 p-5 lg:px-72'> <p id='target' className='lg:text-5xl text-3xl font-bold text-neutral-200'> I’m Dilukshan, a fullstack web developer from Sri Lanka with a passion for creating dynamic and engaging digital experiences. </p> </div> ) } Desktop 8-6-2024 1-34-01 Am (2) (2) (2) (2).mp4

Hi, Can you help me to do this nicely? My requirement is First, when this section enters the viewport, it should become sticky. While sticky, the image should zoom slightly based on the user's scroll direction—zooming in when scrolling down and zooming out when scrolling up. Next, as the user continues to scroll, the product backside and price should animate into view from left to right. Following this, a cross mark should appear in the middle, cutting through the image. The entire section, including the product image, price, and cross mark, should then fade out smoothly, and image 2 should transition from bottom to top with a slight zoom effect. This sequence should repeat for image 2, where the price animates from left to right, the cross mark cuts the image, the section fades out, and image 3 appears with a slight zoom. Finally, after completing this sequence, the section should unpin and transition to the next section. Sticky Section: The section becomes sticky when it enters the viewport. The image slightly zooms based on the scroll direction: Scrolling down: Zoom in. Scrolling up: Zoom out. Product Backside and Price Animation: Reveal the product backside as the user scrolls. Animate product price from left to right. Cross Mark and Image Transition: A cross mark appears in the middle and cuts the image. The entire section (product image, price, and cross mark) fades out. Image 2 transitions smoothly from bottom to top with a slight zoom effect on the scroll. Repeated Animation for Image 2: Price animates from left to right. Cross-mark cuts the image. The section fades out. Image 3 transitions into view. Final Sequence for Image 3: Price is displayed. Image 3 slightly zooms on the scroll. Section unpins, transitioning to the next section.

How can I achieve a similar effect to the one on this website, where a circle reveal animation occurs when the second container comes into view? Reference link: https://mewsunfold.com/

The panels can be scrolled manually or with button so when i scroll manually i update currentIndex(variable) so it sync properly with navigation button but now issue is when i navigate with button the scrolltrigger instance is not updated so when i navigate to panel-2 from panel-1 and try to scroll down it doesnt move.

Can you please help me to make this section (image section)? I tried using a smooth wrapper but didn't work. Please help me as soon as possible animation-image-2.mp4

I need a round vertical slider, like in the screenshot. When the scroll reaches it, the block is fixed until all the items are scrolled through. I found the most similar option on codepen. Please help me make it usable with Next.js.

hello, i have hidden div with text animated with gsap, when i scroll down the section show full width, then the text appear animated can you help with this?

I want to create animation stack like this section (photo attachment) of the site https://vendredi-society.com/. Does anyone have sample code or something similar? that would help me a lot. Thank you

Where can I find a tutorial or maybe docs or blogs where I can learn how to make a video be animated on scroll. Like every time I scroll the video runs 1 or 2 frames. I am also interested in animating movement of elements on scroll. Let's say I have 3 card and as I scroll the care apea one by one when I scroll from a position of X= -100 to X= 0 while the hole scrolled is sopped. In other wards when the uses get to a point the normal scroll stops and as they scroll the card move from right to left raveling themself and moving into their position and ten the normal scrolling behavior start again. An example would be https://zoox.com/ . Thank you!

Hello everyone, I hope you're doing great! I've just started using GSAP and have encountered a question that I'd appreciate your help with. I have a scroll slider and I want it to have an animation before it reaches a point where it moves right and up. Then, as I scroll, I want the slider to start functioning. After the slides finish, I want the slider to move upwards and left. I've tried a few things but couldn't achieve this, and the animations conflicted with each other. I'd be grateful if you could provide a solution or any guidance.

Hey guys. Looking for someone that may know the issue and have solution. When i enable normalizeScroll on mobile devices, it works great, it s super smooth. But...I can not scroll through the link areas. Every single time i try to swipe over <a></a>, instead of scrolling down it opens a new page. Does anyone had this issue? Is there something i miss? There is no demo but i have a video demonstration: https://www.awesomescreenshot.com/video/28281967?key=f01513448a52f29b1d4064a809658e05 Thank you in advance.

I have a layout that includes a full-width image and below 2 columns with text. 1. In the beginning I would like to hide text columns, so it is something like an image covering the whole text in the viewport. https://prnt.sc/qMmbPSGgazwy 2. When you start scrolling the image moves up (like a normal scroll) and then uncovers the "fixed" lext column. https://prnt.sc/DsNgwu3TfMla https://prnt.sc/ITl-ejbnOFfR 3. When I scroll enough, I have a gap between the image and the left column. I would like to lock the position of the image (so it is a little) visible above the left column. https://prnt.sc/BhYYBCI0WsHM When I scroll more, then it will appear scrolling the right column up. The right column will be moved up as long as reaches the left column top. https://prnt.sc/PUsj_YQneNCV 4. After reaching the position, then it will start in the normal scroll. I tried a few methods with sticky, fixed positions, but I stuck with that. Any help here?

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.

Hello, I will be much appreciate if someone can help me with this! Since I am not a programmer I have used some help and basic knowledge to achieve the following scrolling effect. https://codepen.io/M-Milde-the-scripter/pen/pomNZeV Basically it start with a image sequence animation, followed by second animation presenting a text with half opacity words, which becomes visible while the user scroll down, and once all the words becomes visible the entire text continue to scroll to reveal the next content. As you can see I am adding some classes on the html element while the user scroll down: - on the header I add .header-active and on the body I add .bg-1 when the first animation ends - and again on the body I add .bg-2 when the second animation ends What I want to achieve is simply to remove those classes in the same order, once the user start to scroll up: - remove the class .bg-2 from the body once the second animation reveals from the t and start to play backwards - remove the class .header-active from the header and .bg-1 from the body, once the firs animation is showing from the top and star to go backwards while the user scrolling up. So the final effect will be when the user scroll back to top the background is again white and the navigation is not visible. on the top example I try with "onReverseComplete", but no success Thank you in advance!

Hello, my client is telling me that whenever he uses the sidebar from safari (for bookmarks) he couldnt scroll the page anymore and gets stuck at the top. I couldnt recreate the problem myself and i never had this complainment before and this is also the first website i have ever used gsap on. I was hoping someone here knows about the problem and could maybe help me to fix it. When im checking the console in the browser it is showing me this error that i havent seen before: [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. Maybe this has something to do with the problem that's occurring? Website: https://pscaring.de/

Hi everyone, Can anyone help me figure out on how to do this type of animation on scroll. It is a canvas with svg patterns, and when the user scrolls it will start scaling the 1st row from a smaller size to the initial svg width and height. Not sure how to make this one work Would really appreciate if someone can help me. I have had an attempt, maybe it is a good start but I can't figure it out properly. I have also break down the code into parts from the https://remote.com/global-hr/contractor-invoicing-and-payments https://i.imgur.com/hXHepSI.mp4 HTML <div class="sc-f1d6031c-0 hjWElG pattern-transition" from="white" to="red500"> <canvas width="5080" height="868"></canvas> <svg width="78" height="40" viewBox="0 0 78 40" xmlns="http://www.w3.org/2000/svg" class="pattern duo-petal pattern-ref" style="fill: pink;"> <path d="M39 39.9939C47.9212 39.939 60.9436 36.5061 67.7442 29.6951C74.3072 23.122 77.7258 14.2683 78 5.54268V0H76.507C66.495 0.195122 56.2148 2.82317 48.5672 10.4878C43.4911 15.5732 40.3162 21.8232 39 28.378C37.6838 21.8232 34.5089 15.5732 29.4328 10.4878C21.7852 2.82317 11.505 0.195122 1.49297 0H0V5.54878C0.280313 14.2744 3.69891 23.128 10.2558 29.7012C17.0564 36.5122 30.0727 39.9451 39 40"></path> </svg></div> CSS .hjWElG { position: relative; width: 100%; display: grid; margin-top: -0.5px; margin-bottom: -0.5px; background-color: #ffffff; } /*!sc*/ .hjWElG canvas { width: 100%; height: auto; } /*!sc*/ .hjWElG .pattern-ref { position: absolute; visibility: hidden; pointer-events: none; } document.addEventListener("DOMContentLoaded", function() { const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); const svgPath = document.querySelector('svg path').getAttribute('d'); const patternColor = 'pink'; // Color of the SVG fill let pattern; let maxScale = 1; // Maximum scale at the bottom of the page // Function to draw the SVG path into a canvas pattern function drawPattern(scale) { const scaledWidth = 78 * scale; const scaledHeight = 40 * scale; const blob = new Blob([`<svg xmlns='http://www.w3.org/2000/svg' width='${scaledWidth}' height='${scaledHeight}'><path fill='${patternColor}' d='${svgPath}' transform='scale(${scale})'/></svg>`], {type: 'image/svg+xml'}); const url = URL.createObjectURL(blob); const img = new Image(); img.onload = function() { pattern = ctx.createPattern(img, 'repeat'); updateCanvas(scale); URL.revokeObjectURL(url); }; img.src = url; } // Function to update canvas drawing based on scroll function updateCanvas(scale) { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = pattern; ctx.save(); ctx.scale(scale, scale); ctx.fillRect(0, 0, canvas.width / scale, canvas.height / scale); ctx.restore(); } // Update the canvas on scroll window.addEventListener('scroll', function() { const scrollPercent = window.scrollY / (document.body.scrollHeight - window.innerHeight); const scale = Math.max(scrollPercent, 0.1) * maxScale; // Scale starts from 0.1 to 1 drawPattern(scale); }); // Resize canvas dynamically and redraw pattern window.addEventListener('resize', function() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; const scale = window.scrollY / (document.body.scrollHeight - window.innerHeight) * maxScale; drawPattern(Math.max(scale, 0.1)); }); // Initial setup canvas.width = window.innerWidth; canvas.height = window.innerHeight; drawPattern(0.5); // Start with the smallest scale });

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.

I saw this codepen where when you scroll down on a page the 3D picture moves with the page as it scrolls down. It also grows and rotates depending on which section in. I Copied the code and change it so it would work on a div element in html. When I tried it, the div would only move in the first section, not the rest. How would I be able to move a div element along the page as I scroll to the bottom, the EXACT way as the codepen below? This code does not use the motion path plugin only the scroll Trigger plugin which is okay since its free. The animation I want: Custom Keyboard Landing Page with Spline 3D and GSAP Scroll Animations (codepen.io) The animation I made: Relocate on Scroll (codepen.io)

When the screen width is smaller than a certain width, the content of the menu cannot be scrolled to see all the content. When the markers are deleted, the scrollbar will disappear and not work. When I add content and use ScrollTrigger, it will conflict with the ScrollTrigger used by the menu. How can I separate the ScrollTrigger of the menu and the page content so that they can work separately? This is a minimal demo URL: https://stackblitz.com/edit/nuxt-starter-gnsxip?file=app.vue,components%2FmenuModal.vue,.gitignore This demo uses Nuxt 3.

First of all, i forked the codepen demo template, but i couldn't get it to work, even though it's exactly the same code as on my local machine. I attached a gif to this post which showcases the following problem: I'm using the Draggable plugin, but noticed an issue when scrolling. The item i was dragging wouldn't scroll down with me. This only seems to happen when the item i'm dragging is in a different scrollable container. Is there a way to set a different scrolling parent on the Draggable instance? I couldn't seem to find anything in the Draggable docs either. TIA, Jens

Hi everyone. I'd like to create an animation that plays in a loop and also plays when I scroll. Animation: animates the css clip-path property of the images according to the current index. Currently, when the component is mounted, the animation plays correctly but remains stuck on the last image of the array. And when I scroll, nothing happens. Does anyone have a solution or know where to find the bug ? Thank you in advance Demo link : https://stackblitz.com/edit/gsap-react-basic-f48716-ebgh4d?file=src%2FApp.js I was inspired by the following examples: https://codepen.io/GreenSock/pen/wvZjeGN?editors=1010 https://codepen.io/GreenSock/pen/XWzRraJ?editors=1010

Hello everyone!? I'm new on GSAP so it's possible that my problem is "normal" but I'm currently preparing my portfolio and for the "about" part I wanted to put a text animation on the scroll! In order to reveal the text when scrolling... But unfortunately since today the GSAP animation doesn't work... I tried to go back to previous versions of my site but nothing... Strangely enough, since yesterday everything was working properly on any support or browser, but since today... I've been having major problems even though I haven't really touched anything. I'm putting the code here and I'd like to thank you very much for your help, as I have the impression that it's a bug linked to the CDN...is there a way of correcting the bug or should I wait? https://codepen.io/GreenSock/pen/aYYOdN <script src="https://unpkg.com/split-type"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script> <script> let typeSplit = new SplitType('[animate]', { types: 'lines, words, chars', tagName: 'span' }) gsap.from('[animate] .word', { opacity: 0.3, duration: 0.03, ease: 'power1.in', stagger: 0.03, scrollTrigger: { trigger: '[animate]', start: 'top 120%', end: 'bottom 110%', scrub: true, } }) </script>

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 community. I am facing a problem that I am trying to make oppositional content scroll on my page. The idea is that when I scroll down, my content on the left side scrolls down with normal behavior and the content on the right side from the last block to the first block. But the scrolling in my example is out of sync, my content on the right side scrolls like twice as fast as the content on the left side https://codesandbox.io/p/sandbox/opposite-gsap-9p4yh7?file=%2Fsrc%2FApp.tsx