Search the Community
Showing results for tags 'scroll'.
-
ScrollTrigger pinned panels: first panel misaligned after page refresh (scroll restore)
Kins posted a topic in GSAP
Hi, I created a minimal reproduction of a stacked panels effect using multiple pinned elements with `pinSpacing: false`. The effect works correctly while scrolling normally. However, there is an issue when refreshing the page while being inside the stacked section: - Panels 2, 3 and 4 remain correctly positioned - Only the first panel gets misplaced and appears to restart from inside the stack Important notes: - Panels have variable heights - There is a section before and after the stack - No scale animation is used, only vertical stacking - Each panel is pinned individually with `pinSpacing: false` ⚠️ Note about reproduction: This issue is related to scroll restoration on page reload. It is not always reproducible inside the standard CodePen preview because it resets the scroll position. To properly reproduce: 1. Open the demo in a standalone page (or locally) 2. Scroll into the stacked panels (around panel 2 or 3) 3. Refresh the page 4. The first panel will be misplaced Here is the demo: https://codepen.io/Kinsi/pen/vEXVBgg I would like to know if this behavior is expected with this pattern, or if there is a more robust way to structure the ScrollTriggers. Thanks! I can also provide a standalone HTML file if needed. -
It maybe accordion or maybe I need to do slider which will change slide on scroll with fade. I don't know. Can someone provide me demo?
-
hi, is gsap has option that animation start after whole section(1vh) is scrolled in viewport? I want to start few different animations in array but, start is when whole section comes in view. Thanks in advance.
-
I've managed to get video scrubbing working in a react project using the scroll trigger however once I pass the end the video snaps to first frame, and jumps back to the end if i scroll back up into the timeline is there a way to retain the value after the end position here is a video of what is currently happening https://streamable.com/sm47e4 here is a stripped down part of the code to only include relevant parts import gsap from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import { useGSAP } from '@gsap/react' gsap.registerPlugin(ScrollTrigger, useGSAP); const ScrollTimeline: React.FC<ScrollTimelineProps> = ({ }) => { const testRef = useRef(null); const elRef = useRef(null); const videoRef = useRef<VideoRef>(null); useGSAP(() => { const trigger = testRef.current; const tl = gsap.timeline({ defaults: { duration: 1 }, scrollTrigger: { trigger: trigger, start: "top top", pin: true, end: "+=600%", scrub: true } }); const el = elRef.current; tl .fromTo( el, { rotation: 0 }, { rotation: 180 } , 0 ) // FIX THIS, GET REF PROPERLY // This is to just get the video element after its properly rendered var interval if (!initialised) { setInitialised(true) interval = setInterval(() => { const videoEl = document.querySelector('video') if (videoEl) { clearInterval(interval); tl.fromTo( videoEl, { currentTime: 0 }, { currentTime: videoEl.duration, }, 0 ) } }, 2000) } }, []); return ( <div className={clsx(styles.page)}> <div className={clsx(styles.scrollTimeline)} ref={testRef}> {/* This element contains the video element */} <BackgroundMedia {...mediaArgs} /> <div className={clsx(styles.test)} ref={elRef}> TEST </div> </div> </div> ); } -
Hi GSAP Team! I'm trying to use the scope feature to scope selector and make components more reusable that they don't trigger each others' animation if there are multiple of them in the scene. In the doc, the usage example is pretty simple, and I am trying to put more things into useGSAP, like creating a timeline (in the demo), or ScrollTrigger.Create() (not in the demo) with normal classname selector. However, in the demo, the second page's boxes will fade out with the first page's boxes fading out, even with a ref selector. I can solve this by a dedicated select using the gsap utils like this q = gsap.utils.selector(containerRef) tl.to(q(".className"), { ... }) and it will help finding the correct child element. So, my question is, is the scope not working if I use timeline or create a scrollTrigger pinning the element? I can only use simple gsap.to/from/fromto etc? a scrollTirgger example might be: useGSAP(() => { // pin ScrollTrigger.create({ trigger: ".section", start: "top top", end: "bottom top", pin: ".section-content", pinSpacing: false, scrub: 0.00001, markers: true, }); }, {scope: sectionRef}) this is the demo, it contains the behavior I am talking about. https://stackblitz.com/edit/gsap-react-basic-f48716-c6w4dfnr?file=src%2FApp.js Thank you GSAP Team for helping!
-
issue help please GSAP horizontal scrolling slider issues with vertical scroll
CamelCase posted a topic in GSAP
Hello, I'm new to the GSAP library, I've been using it for 3 days now and I'm having some difficulties implementing what I want to create. I've read several topics hoping to find a solution to my problem, but I haven't managed to solve it on my own. To get to the point! I'm trying to make a horizontal scroll slider with several possible user interactions, namely the possibility of dragging elements to scroll, the possibility of scrolling via buttons on the right and left of the screen and finally the possibility of scrolling elements with the mouse wheel. My slider seems to be synchronized with the vertical scroll, but the latter scrolls even before the element is visible on the screen, which produces a rather confusing effect. Is it possible to freeze my slider so that I can scroll left or right only when the slider is visible on the screen, or when my mouse is over it without taking vertical scrolling into account ? I've put together a codePen to give you an idea of what I'm working on and the code I've got so far. Have a nice day, Laura
-
I was trying to convert this codepen into react but things are not going very good. import { useRef } from "react"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import "./split-scroll.less"; import { useGSAP } from "@gsap/react"; gsap.registerPlugin(ScrollTrigger); const ScrollSections = () => { const containerRef = useRef(null); const rightSectionRef = useRef(null); useGSAP(() => { function goToSection(section, st) { gsap.to(containerRef.current, { scrollTo: { y: section.offsetTop, autoKill: false, }, overwrite: true, duration: 1, onUpdate: () => setRightScroll(st.scroll() * 2), }); } const setRightScroll = gsap.quickSetter(rightSectionRef.current, "y", "px"); gsap.utils.toArray(".left-section .box").forEach((section) => { ScrollTrigger.create({ trigger: section, onEnter: (self) => goToSection(section, self), }); ScrollTrigger.create({ trigger: section, start: "bottom bottom", onEnterBack: (self) => goToSection(section, self), }); }); }); return ( <div className="sections-container" ref={containerRef}> <div className="left-section"> <div className="box box1"></div> <div className="box box3"></div> <div className="box box5"></div> </div> <div className="right-section" ref={rightSectionRef}> <div className="box box6"></div> <div className="box box4"></div> <div className="box box2"></div> </div> </div> ); }; export default ScrollSections;
-
Hello. Using GSAP, I’d like to replicate the behavior on the site below. When you scroll from the very top of the page with the mouse wheel, it should stop exactly at the next section regardless of how much you scroll. https://www.yadohouse.jp/ In my current code, if I scroll vigorously, the page moves down proportionally to the amount scrolled. I want it to move only by the specified transform3D value, without being affected by the user’s scroll amount. Is it possible to fix this with GSAP’s configuration? Also, on the reference site, the vertical scrollbar is always visible, but on my end, when the main visual is displayed, the scrollbar is not. And when I scroll from the top, the scrollbar itself starts moving. I’d like to move the main visual only by the transform3D amount while keeping the scrollbar fixed at the top. I’m not sure if the issue is with my GSAP code, so I decided to ask here. I would appreciate any insights you can provide.
-
how I can animate my cards like ios notification on lockscreen, attached example scroll I need to make exactly the same card scroll animation position, transparency, movement, all this should be as similar as possible to the example
-
Hi everyone, I can't get my custom cursor to trigger when the target is hovered over during scrolling. Could you show me how to achieve this based on the following example? Thank you! https://codepen.io/GreenSock/pen/GRYLMzX
-
Hey everyone, I’m trying to create a scroll-triggered text effect using GSAP, but I’m not sure where to start. Here’s what I want to achieve: Initial State: The text “ELEVATING PERSPECTIVES” should appear in solid white on a black background. Scroll Effect: As the user scrolls down, the video should start appearing inside the text from the bottom. The video should follow the scroll movement, meaning scrolling up/down should affect how much of the video is visible inside the text. Final Effect: Once the video completely fills the text, I want to add a zoom effect on the text for emphasis. I’ve attached reference images of what I’m trying to achieve. Would really appreciate any guidance, code snippets, or direction on how to achieve this effect.
-
How to determine the height of a pinned section based on the number of scroll
Mitiss posted a topic in GSAP
Hello everyone, I am trying to solve a problem of synchronizing a section (pinned with scrollTrigger) with a certain amount of scroll until I reach the end of the scrollTrigger. Basically I have a counter that is inside my pinned section. Once it is pinned I have a Gsap Observer that animates my counter from counterSequence[n] to counterSequence[n+1] (this is obviously for an imageSequence animation). That means each time I scroll inside my pinned Section, I activate an animation of my counter... until I reach the end of my counterSequence (meaning my last frame on my real project). The problem is that scrollTrigger only allows to specify a start and end of the section and I don't know how to synchronize it with my number of scrolls until I finish all my counter Sequences (for now I did end: "+=800%" so that I am sure I have enough space to scroll to get all my counter sequences). Do you have any idea of the direction I should take ? (No need to spend too much time on my codepen just any idea ^^) Thank you ! -
Hello, I want to recreate the slide transition effect on this site: https://elementis.co/destinations. If anyone can help me, here is the CodePen. Thank you in advance.
-
Hello, I want to create a horizontal scroll animation with GSAP, like on this site: https://vantage.ava-case.com/work. I’m wondering if there are any resources I could consult, as I haven’t been able to find them. I found this CodePen: https://codepen.io/GreenSock/pen/BaQXjWw, which seems like a good starting point, but I can’t quite implement it correctly. See my GSAP starter template. Thank you in advance
-
Hello friends! I wanted to create an animation using GSAP and ScrollTrigger, but I can't. The essence of the animation is that when scrolling, the large picture is fixed in the center of the screen and decreases. Then, when the user scrolls to the section with the slider, by default these slides are transparent. As soon as the user scrolls to the slider, this fixed picture should decrease to the size of the pictures from the slider, and then from 1 fixed picture, 3 others should move out from under it to take the place of the pictures of the sliders, after that the title and description should appear in the slider. I was able to fix the picture, but I can't do anything further. Tell me how to do it. Thanks in advance! That is, when the user scrolls the page and sees a large picture in the middle of the screen, the picture itself should be fixed. Then, when scrolling down, it should decrease (I think it should decrease to the size of the pictures that are located in the slider) Then the user scrolls down and sees the section with the slider. Initially, the slides are transparent by default. But we see a fixed picture in the center (which we fixed earlier). And as soon as it becomes at the level of the pictures in the sliders, 4 pictures should come out of this picture (possibly under 1 large one, place 3 more that will be transparent). And these pictures should be placed in the place of the slide pictures, after that the title and description should appear in the slides.
-
Hello, I'm trying to create a diagonal scrolling effect on a large div. I have a wrapper div that is pinned and hides the overflow, and a grid div to diagonally scroll over. My problem is that despite setting pinSpacing to false, if you scroll down to the end of the animation pinspacing is suddenly set to true, and the page is doubled in length. This spacing does not appear before reaching the bottom of the animation, as indicated by the scroll bar. Any help is appreciated.
-
I’m trying to make a grid at first only first div of the grid should be visible then it should zoom out and show the other grids like this
-
as you can see on CodePen, my scrolling is not smooth (at least the horizontal animation), I've tried to add ease for horizontalLoop function but it didn't work, what should I do? I don't have much experience with ScrollTrigger, that's my first time using it. what I want to achieve with this section is a smooth horizontal scrolling, like, take more time after scrolling in a more natural way than now. One other thing, if you notice, the cloned items (I clone the images inside the row to make the seamless loop with js) don't have space between the first and last item of the row, I also don't know why, I've tried adding some margin left to the last item but that didn't work because of gsap transforms (to make animation alive).
-
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
-
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
-
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.
-
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.
