Search the Community

Is it possible to manipulate opacity on both scroll Trigger and also on hover Pls help i am not able to find a solution , i also tried framer motion it also did not help , problem is either scrollTrigger based animation is working for opacity or the hover one and both dont work

Hello ! I'm new with scrollTrigger and I don't understand how I can pin elements inside my horizontal scroll section. For example, in this codepen : https://codepen.io/PaulettePaillette/pen/MWjeqdb I would like the scroll to stop when the number 3 (grey div) "touch" the left side of the screen. And then the number 4 scroll above the number 3 section and the classic horizontal scroll continue. I think it's possible, I hope, but I don't understand how to make it. I hope my issue is clear, and someone could help me on it. Thanks

Hello everyone, I'm new to GSAP and I'm having trouble with the scroll trigger. In the last "Hello", as you can see in the demo, it is scrolling out of view. But I want to let it stay in the screen. But I just couldn't make it work. If anyone can help me I much appreciate. Thanks!

Hello everyone! I have problems with the grid section, where each of the elements must in turn "open up" to the full screen. At the same time, it is important that the elements "feel" each other next to each other, so that each of the elements is pushed out of the screen. Right now my animation is not working properly, as each of the elements does not expand to the full screen. Please help me! https://codepen.io/karjala_kilka/pen/qBwyoab

Hey all, I have been using the forum resources and demos to help build the linked GSAP/Scrolltrigger section. It's pretty straightforward in objective, but I can't get it to enter and exit how I want and was hoping someone could take a look at my code and let me know if there's a solution. I have 4 sections or "slides" Patented copy + motionless video 1 2.) Unrivaled copy + video 2 3.) Meticulous copy + video 3 4.) 70% copy + video 4 Each video plays and pauses when it is finished, waiting for the scroll to trigger the next section and "continue" playing the video (by playing the next video). My goal: a.) Scroll into this section and have slide #1 be default, so you do not need to scroll past a blank section to get to it. b.) Once slide 4 appears, I would like the user to be able to scroll away from this section without, instead, scrolling to a blank space before being allowed to continue. bonus goal: remove the flashing fade transition between videos I'm sure I have made some grave mistakes with this code, and am looking to this community for a fresh set of eyes. Any help is appreciated. Thank you! Joseph

Hi there, I am new to ScrollTrigger and was trying to create a simple scrollytelling page as shown in the codepen below. The pinning of sections 1 and 3 works well. However, for section 2, pinning didn't work and it just scrolled passed without pausing. Expected behavior: On enter section 2, it is supposed to be pinned like the previous section. After 2 scrolls, unpin and then proceed to the next section. Any advice is greatly appreciated. Thanks!

code sandbox I'm new to GSAP and am struggling getting a certain animation to work using scrollTrigger when my elements are in a grid layout. The animation aims to move the content horizontally as the user scrolls, and I've taken out the relevant components into this code sandbox. Apologies if there's still too much code in there, but I wanted to make sure the code is representative of the components I have in my project, in case there are nuances causing the problem. In App.tsx, if you uncomment all the code, you'll find a grid layout containing a 'navbar' on the left, and the main content on the right. Currently, with the grid commented out, the animation works fine, but if you include the grid, it all breaks for reasons I don't understand. I've read through the common mistakes for GSAP and scrollTrigger and don't think this is covered. I also have a couple of other smaller issues as well please in the ExperiencePage.tsx component: toggleClass on scrollTrigger doesn't apply the .active class to components. the width variable isn't being updated as the browser window is resized, despite me setting invalidateOnRefresh to true and using a function to define the end attribute in the scrollTrigger configuration. Appreciate any help with this please.

I am struggling to get this effect to work. There is a hero image with parallax that is working. But the logo, which starts full size and fixed to the bottom of the hero container (with a slight overlap of about 75px at the bottom), needs to resize smaller to fit in the sticky header at the top. This should scrub with the scrollbar and be sticky at the top shortly before the hero is fully scrolled past. I've spent days trying to get this to work, and I can't find any examples anywhere that have helped me get to the bottom of the issue. Any help would be greatly appreciated!

Hello, I have a simple implementation of ScrollTrigger that pins a heading while scrolling until the next one comes in. All nice and good but I'm getting extra space at the bottom. Can someone help me please. Thank you!

Hey there, so I have a ScrollTrigger I've created for a 3D model on my home page. It's really amazing how I didn't know about GSAP before this. So I have this object in Threlte, which is a ThreeJs wrapper essentially (with a lot more functionality IMO and better codebase), and I have a reactive var bound to headRot (headRotation) X, Y, and Z. As the user scrolls, I'm trying to have the head rotate a fixed amount of degrees every X part e.g. so it starts at 0, and then at my first section I'd like it to be 90, then 180, 270, and 360, but for some reason tweening the head rotation doesn't work, probably because it doesn't change the reactive variable, anyways. I'd post a CodePen, but I feel like it's just my error in my code -- Portrait is just an object that was a GLB file imported into Threlte, there's nothing special about it and idiomatically it's the same as using a base Cube Oh, and the trigger is the main body content essentially, it's basically the entire body without the header and footer <script lang="ts"> import { T, useThrelte, useTask } from '@threlte/core' import Portrait from './portrait.svelte' import { Suspense, Text } from '@threlte/extras' import { onMount } from 'svelte' import { gsap } from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' import { MathUtils } from 'three' gsap.registerPlugin(ScrollTrigger) const { camera, renderer } = useThrelte() export let headPos = { x: 0, y: 0, z: 0 } export let headRot = { x: 0, y: 0, z: 0 } export let scale = 1 export let animationStarted: boolean = false let portrait: Portrait onMount(() => { const trigger = document.getElementById('main-content') // const tl = gsap // .timeline().add('start') // .from(headRot, { // y: -0.15, // ease: 'power3.inOut', // }) // .to(headRotation, { // y: 1800, // ease: 'power3.inOut', // }) const scrollTrigger = ScrollTrigger.create({ trigger: trigger, start: 'top top', end: 'bottom bottom', scrub: 3, markers: false, onUpdate: (self) => { if (!portrait.ref) return // Define the start and end values for the rotation const startRotationY = -0.15 const endRotationY = MathUtils.degToRad(-1420 - MathUtils.degToRad(-0.15)) // Calculate the current rotation based on the scroll progress // Linear interpolation: start + (end - start) * progress const currentRotationY = startRotationY + (endRotationY - startRotationY) * self.progress // Apply the calculated rotation to the headRot.y headRot.y = currentRotationY }, }) }) $: headXSize = 0 $: headYSize = 0 $: headPosition = { x: headPos.x, y: headPos.y, z: headPos.z } $: headRotation = { x: headRot.x, y: headRot.y, z: headRot.z } $: scaleFinal = scale </script> <Suspense> <Text slot="fallback" text="Loading..." color="black" position={[headPosition.x, headPosition.y, headPosition.z]} scale={[0.1, 0.1, 0.1]} /> <Portrait bind:this={portrait} {scaleFinal} position={[headPosition.x, headPosition.y, headPosition.z]} rotation={[headRotation.x, headRotation.y, headRotation.z]} color="red" /> </Suspense> I had previously removed the headRotation from the binding in case that was interfering but it didn't seem to have any effect

I'm trying to get ScrollTrigger to work in my Vue 3 SPA. The page layout is: <body> <div id="#app"> <div class=".scrollable"> <div class=".content"></div> </div> </div> </body> The catch is that #app and .scrollable both have height: 100vh, and .scrollable has overflow: auto. Unfortunately, it looks like ScrollTrigger is only listening for scroll events on body. Here's a minimal example that demonstrates the problem: https://codesandbox.io/p/devbox/vue-scrolltrigger-test-k8qmt8?file=%2Fsrc%2Fcomponents%2FTallComponent.vue%3A17%2C7 [EDIT: above demo is now working, thanks to the answer below.] Is this a known limitation, or am I missing something? I'm new to GSAP, so probably — hopefully — the latter! Thanks.

Hello friends! I have a very specific issue with a project I'm working on. There are multiple sections that get loaded in dynamically and to be rearranged by the end-users, hence the foreach loop I've used on the different types of sections. I've attached a small demo with the exact same problem I'm facing on the project. I would love to hear your input on this. Thanks!

How can I make it so, as user scrolls, it snaps on every "slide", so user can scroll only one by one panel, without skipping some if he scrolls harder? Thanks

KakaoTalk_Video_2024-04-07-21-26-01.mp4 Hello GSAP community! I am quite new to GSAP and here to get some help! I was using on GSAP for scroll animation on my web page and I met weird behavior with scrollTrigger on iOS environment. I tried to pin an element inside of a scrollable container and it worked smoothly in desktop and Chrome. But when I open the page using Safari on my iOS device, the pin position is broke and jumps around depending on browser's address bar appearance. You can see it's behavior on the video I recorded. Where I found this behavior for the first time is in much different code base, but it is still happening while I tried to reproduce it with minimal code example. Basic scrollTrigger settings with Vite, React, Tailwind Any advice to remove this behavior or any walk arounds for this situation? Thanks! This is the all I wrote for the example page the video shows import "./App.css"; import { useEffect } from "react"; import gsap from "gsap"; import ScrollTrigger from "gsap/ScrollTrigger"; function App() { useEffect(() => { gsap.registerPlugin(ScrollTrigger); const SC = ScrollTrigger.create({ trigger: ".container", start: "top top", end: "bottom top", scrub: true, pin: ".pin", markers: true, }); return () => { SC.kill(); }; }, []); return ( <div> <div className="w-full h-dvh bg-green-500"></div> <div className="container w-full h-[200dvh] bg-yellow-500"> <h1 className="pin text-4xl font-extrabold bg-blue-400">PIN ME</h1> </div> </div> ); } export default App;

Hi, I'm trying to recreate the landing animation of this site: https://formoitalia.com/about. I just need the animation up until the main paragraph appears, included. In the CodePen attached you can see what I've done so far. Only for desktop, not optimized for mobile. I have 3 problems: When you scroll back, the animation won't behave correctly. The translation on the X axis is broken and I don't know how to fix it. When trying to enlarge the text, since it's divided in 3 rows, it messes with line heights. How to obtain the paragraph "scroll up" effect. Now, the second and third points I know are vague, and I don't expect a tutorial nor that someone does that for me. I would like to receive some guidance, on how to implement it. Instead I would like to get some help with the first point, since I'm stuck and don't know the reason. Thank you so much for your help, Have a nice day!

Hello! I'd like to make this horizontal scrolling animation, to not be so "analog". Meaning I'd only want it to switch at certain scroll positions, until then it should just stay on the current slide. Thank you!

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

I have a section called lai-main__section4-bottom which has an accordion inside it. When the section hits the viewport I want to stop the page scroll and open the accordion one by scroll and once all the accordions are closed the scroll for the entire page needs to resume. I'm using gsap scrollTrigger for it. The issue I'm facing is once the section hits the viewport the accordion open is working fine, but the entire page view is also scrolling, which is kind of overlapping. I have attached the image for that and provided my code <section> <div class="lai-main__section4-bottom"> <div class="lai-main__section4-bottom-accordion"> <div class="lai-main__section4-bottom-accordion-item active first"> <span class="lai-main__section4-bottom-accordion-header">Keeps your documents secure</span> <div class="lai-main__section4-bottom-accordion-content"> <p>jadfs.</p> </div> <div class="lai-main__section4-bottom-accordion-scrolldiv"></div> </div> <div class="lai-main__section4-bottom-accordion-item"> <span class="lai-main__section4-bottom-accordion-header">Lightning - Fast processing speed</span> <div class="lai-main__section4-bottom-accordion-content"> <p>Oosfpojs</p> </div> <div class="lai-main__section4-bottom-accordion-scrolldiv"></div> </div> <div class="lai-main__section4-bottom-accordion-item"> <span class="lai-main__section4-bottom-accordion-header">Strike up a conversation with GenAI</span> <div class="lai-main__section4-bottom-accordion-content"> <p>Osodihfwious</p> </div> <div class="lai-main__section4-bottom-accordion-scrolldiv"></div> </div> </section> <section class="lai-main__section5"> <h2> Our solution across industries </h2> </section> js code: document.addEventListener("DOMContentLoaded", (event) => { gsap.registerPlugin(ScrollTrigger); var targets = gsap.utils.toArray( ".lai-main__section4-bottom-accordion-content" ); var middleTargets = targets; var first = middleTargets.shift(); var last = middleTargets.pop(); console.log(first); console.log(middleTargets); console.log(last); gsap.set(first, { display: "block" }); const timeline = gsap.timeline({ scrollTrigger: { trigger: ".lai-main__section4", scrub: 0.3, markers: true, pin: true, }, }); timeline .to(first, { display: "none", duration: 1 }) .to(middleTargets, { display: "block", duration: 1, stagger: { each: 2, yoyo: true, repeat: 1, }, }) .to(last, { duration: 1, display: "block", }); });

Hello! I encountered a problem when I was using the useGSAP hook for React, scrollTrigger, and content with dynamic height. The situation is as follows: somewhere on the page, we have a component with dynamic height, in this particular case we have tabs with their own content. Just below, there are expanding accordions. The height of the content in the tabs and accordions can vary. Further down the page, there is a block with GSAP animations (there will be several of them), which uses the React useGSAP hook. I have encountered 2 problems. The first problem is that, for example, the block with animation is not updated while opening an accordion. This can be clearly seen in this example - it contains the necessary minimum to see the error. When clicking on the accordion toggler, the animation start label remains in the same place. When scrolling to it with the accordion open, the animation fails. https://codepen.io/tis-cake/pen/OJGxdVG The second issue is related to passing dependencies into the useGSAP hook. If I understand correctly, one of the solutions to my problem is to pass the height of, for instance, the body tag as a dependency. When the accordion is expanded, the height of the body changes - and at this stage, do I need to update the animation? When passing this value into the dependencies array, the animation fails even with the accordion closed. Would u mind helping me with the understanding of the direction in order to solve this problem? I'm convinced I'm doing something wrong?

My scrollTrigger items inside other scrollTrigger start their animation at the same time But i need them to start one-by-one and parent scroll to stop until each animation ends. I'm completely frustrated with this Here's my code: const horizontalSections = gsap.utils.toArray('section.horizontal') horizontalSections.forEach(function (sec, i) { var thisPinWrap = sec.querySelector('.pin-wrap'); var thisAnimWrap = thisPinWrap.querySelector('.animation-wrap'); var getToValue = () => -(thisAnimWrap.scrollWidth - window.innerWidth); st.value = gsap.fromTo(thisAnimWrap, { x: () => thisAnimWrap.classList.contains('to-right') ? 0 : getToValue() }, { x: () => thisAnimWrap.classList.contains('to-right') ? getToValue() : 0, ease: "none", scrollTrigger: { trigger: sec, start: "top top", end: () => "+=" + (thisAnimWrap.scrollWidth - window.innerWidth), pin: thisPinWrap, invalidateOnRefresh: true, anticipatePin: 1, scrub: 1, } }); gsap.utils.toArray(`.portfolio`).forEach((section, index) => { const tl = gsap.timeline({ scrollTrigger: { trigger: section, start: "center center", end: () => "+=" + ((section.offsetWidth)), scrub: true, pinReparent: true, anticipatePin: 1, immediateRender: false, onUpdate: (self) => { if (self.progress < 1) { stopSt() } if (self.progress === 1 || self.progress === 0) { runSt() } } }, defaults: {ease: "none"} }); tl.fromTo(section.querySelector(".afterImage"), { xPercent: 100, x: 0}, {xPercent: 60}) .fromTo(section.querySelector(".afterImage img"), {xPercent: -100, x: 0}, {xPercent: -60}, 0); });

Hi everyone, I'm experiencing an issue with my animation. I've searched through existing topics, but couldn't find a solution that matches my problem. To provide some context, I've created a dynamic page for displaying project details. It consists of a description section on the left and an image section on the right. The description is scrollable, and the image changes based on the current description. The issue like i start from project/1 i show all there descriptions all good but when i go to the project/2 or project/^n the scroll still in the register or some where that affect to my animation (the scroll affect to the first image because the scroll still ) ,However, everything works fine if I refresh the page like what i want , So, I'm looking for a solution to reset the ScrollTrigger and resizing functionality dynamically. (methods or props in the useGSAP) Thanks for your help, and I apologize for the lengthy explanation. I just wanted to ensure the context is clear. gsap.registerPlugin(ScrollTrigger); const workInfoItemsRef = useRef(); let imageRefs = useRef([]); const ParrentRef = useRef(); useGSAP( () => { // initialise the imageRefs if ( workInfoItemsRef.current && imageRefs.current.length > 0 && NumberOfFeature > 1 ) { // N2aficti ZIndex directly lrefs: imageRefs.current.forEach((item, index) => { item.style.zIndex = imageRefs.current.length - index; }); // nInitialiser clip-path b refs: gsap.set(imageRefs.current, { clipPath: function () { return "inset(0px)"; }, }); // nCriyi l'animation : const animation = gsap.to( imageRefs.current, // fiha ta last child ! rd lball { clipPath: function (i) { return i != imageRefs.current.length - 1 ? "inset(0px 0px 100% 0px)" : "inset(0px)"; }, stagger: 2, ease: "none", } ); // nCriyi ScrollTrigger l Parrent ref: ScrollTrigger.create({ trigger: ParrentRef.current, start: "top bottom", // markers:true, animation: animation, scrub: 1, }); } }, { dependencies: [CurrentProject], scope: ParrentRef, revertOnUpdate: true } );

Hi there, pretty new to GSAP - loving it so far! 🤠 I am trying to combine these two examples, Variable height stacked pinning and Combined lateral sections to achieve an animation where the sections that vary in height are pinned, and where some sections with split content allow overflowing text to be scrolled into view. I've created a minimal demo here - I think the issue is that I'm trying to create nested ScrollTriggers and they're not playing well together / one is overriding the other. Any help / advice on how to achieve this with GSAP would be great! Thanks.

Hi Forum, i'm having troubles refreshing the scrolltriggers in my angular project. So when the site is loaded, everything works fine, but when i resize the video in the container i not perfectly aligned anymore. I've set up a minimal demo on stackblitz: Stackblitz Demo EDITNOTE: changed from codesandbox to stackblitz due to sharing issues see: app/src/pages/home/home.component.ts as you can see, i tried some solutions I found on here the forums like invalidateOnRefresh and ScrollTrigger.refresh(true), but none of these work. Desired behaviour after resize: Actual behaviour after resize: I appreciate any help/hint/idea Thank you!

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.

Hi, I'm quite frustrated, and I might did something wrong with my whole code.. I am trying to make a scrollytelling project, and I wanted to trigger certain animations by clicking a button, and make all the other elements of the rest of the website appear on the bottom part of the whole page, depending on which button got clicked (2 buttons, you can select from) My problem here is, that you click the button, the whole thing doesn't fire directly 1. you need to be at the very end of the document, which makes sense to me, but the bigger issue here:, 2. if you wait more than 3 sec before you click on one of the buttons, the whole thing doesn't animate, it just appears. 3. I thought, I could make the other elements appear, by clicking the button, so by scrolling it behaves like the things before. Instead, it just fires everything at once. Or animate it without the need of scrolling. I tried to use only gsap.to();, but the problem here is, that it doesn't revert by scrubbing. Also by defining the ScrollTrigger with the scrubbing, it doesn't make any difference, which value I use and the markers don't show up either..