Search the Community

how to create this pinning effect the same as this website https://www.airvoir.com/

Hello GSAP people, I already know the answer is probably easier than I think, but I can’t seem to figure it out. Here’s a small demo: https://codepen.io/PhilippeGoulliart/pen/PoMwPoX I'm trying to set up horizontal scrolling of the "train" inside the frame. The problem is that when I reach the middle of the scroll, I expect to see only the purple square—meaning that the train has translated by 33.333%, which is half the translation I want. However, instead of seeing only the purple square, I end up further into the timeline, seeing half of the purple square and half of the pink one. I’ve tried adjusting the scrub to a number and changing the easing values, but nothing seems to solve the issue. Thanks in advance for any help you can provide!

Hello everyone, Im new to Gsap, I'm trying to learn it. but right now I'm stuck at creating a vertical animated Timeline. i also applied scrollTrigger but my code is messed up!. Please look at my code. once and correct my mistake. This is what i want to make :- https://youtu.be/qTeqwp7Uvro and this is my code pen:- https://codepen.io/Mohit-Mishra-the-looper/pen/abggwpx?editors=1000 what i want is that. 1. when user scrollDown the height of the ".timeline-inner" will increase. and when the ".timeline-inner" hits the ".dot" of the specific box then the opacity of that's h2 and paragraph become 1

Hi guys does anyone has a clue how to do a double horizontal row with a scroll in React Native. I've already made a double row scroll with 2 lines but there's 2 scroll (one on first line and second on second line). I would like to create, for example, 3 blocs on the first line and 3 blocs on the second line (and the others blocs). If the user scroll on top, second line scroll too and vice versa Before scroll : Line 1 : 1,2,3 Line 2 : 4,5,6 (and 7 to 20 hided) After scroll : Line 1 : 2,3,4 Line 2 : 5,6,7 (and 8 to 20 + bloc 1 hided) import React from 'react'; import { View, Text, StyleSheet, ScrollView, FlatList, Dimensions } from 'react-native'; const { width } = Dimensions.get('window'); const itemWidth = width / 3; // Largeur de chaque élément (3 colonnes) const listData = Array.from({ length: 20 }, (_, index) => ({ id: index.toString(), title: Item ${index + 1}, })); const GridItem = ({ item }) => ( {item.title} ); const HorizontalScrollingGrid = () => { return ( horizontal showsHorizontalScrollIndicator={false} directionalLockEnabled={true} alwaysBounceVertical={false} > contentContainerStyle={{ alignSelf: 'flex-start' }} numColumns={Math.ceil(listData.length / 2)} showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false} data={listData} renderItem={({ item }) => } keyExtractor={(item) => item.id} /> ); }; const styles = StyleSheet.create({ item: { width: itemWidth, height: itemWidth, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f0f0f0', margin: 5, borderRadius: 8, }, itemText: { fontSize: 16, fontWeight: 'bold', }, }); export default HorizontalScrollingGrid;

First of all sorry, but I can't provide a codepen, I will try to describe the problem the best I can. Basically I have this type of structure: <div class='middle'> <div class='canvas-holder'> <!-- [Three.js Canvas] --> </div> </div> This is the CSS each of this element have: .middle { position: relative; margin-top: 7rem; } .canvas-holder { position: absolute; height: 100%; // [Three.js Canvas] canvas { position: sticky; top: 0; } } The Three.js canvas has a certain size (window.innerWidth, window.innerHeight), with GSAP I wanted to animate the position of a model inside the Three.js canvas. I wanted to move up the model by 5 when I scroll, so I wrote this: // peeler_model is the model I want to move gsap.to(peeler_model.position, { y: 5, scrollTrigger: { target: middle_div, // I wanted to take the div as a reference point for the markers start: "top top", end: "bottom bottom", scrub: true, markers: true } }) Now with this what I thought would've happened is that by setting the target as the middle_div the first top at the start would have went at the top of the middle_div like this: But instead what happened was that START went at the top of the body. I don't know how to really fix it, I used percentages instead of top and bottom to fix it a bit, but it would be really helpful if top would go at the top of the target like it always did for me. The only thing I can think of of why this is happening is because the canvas has a parent with absolute positioning, but that's really strange. Anyways thanks in advance for the help.

Hello Guys, iam trying to recreate this scroll animation https://lulufinserv.com/products/gold-loan/ on this section "10 Reasons that prove LuLu Gold Loans", i tried creating it https://codepen.io/Rare4pple/pen/BagJrNv . but im stuck

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

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.