Search the Community

hello everyone, i am having trouble with scrolltrigger pin method. i seem to cannot solved is at all , cannot figure out if its reacts problem or gsap need help pleaseeeeeeeee https://codesandbox.io/s/zen-fast-ogesxo?file=/src/App.js

Hi I follow the example provided by @Rodrigo. But I want to add title and pinned the title with card stack section, yes the title pinned for now but all the cards are going down with the scroll. Can you guys help me? Thank you so much. Here

Hey all. I'm trying to learn GSAP and am blown away (and a bit overwhelmed) by the immense amount of options. What I am trying to achieve is having a page that has full width sections that are stacked on top of eachother. When the user scrolls, it will scrub but will snap to the next vertical section which ideally would be variable height. On a specific section(s), I would like to be able to add the ability to pin and slide sideways with scrub and snap as well. It would be great if it enabled 'end' where it would unpin to be dynamic such as detecting the offsetwidth of the section. I am 'guessing' that it could be done using gsap.utils.toArray for both the sections and sidescroll slides/subsections and I have tried to get it as far as I could but I know to the right person, it's probably pretty straight forward. Any assistance or insight would be great. I'm excited by what I can see GSAP can do and hope to do a lot more so I can in turn help the community as well. Thanks in advance. Cheers Murray

Hi, i try to make a pinned element on my page. If you go to the section "Découvrez mon histoire" all down (or discover link in the menu) the section on the right should be pinned. but i don't understand why, the fixed position is relative to the page instead of the screen. I tried to do the same on codepen, and everything works well. Do you have any idea ? https://justhugo.fr/

Hello, I wanted to make a horizontal scroll structure under four headings. And these four titles have their own content and the videos will be side by side and will be horizontal scrolling while scrolling. and when the content content is finished it will move to the next one. I made a script like this but when I get to the title the pin works correctly but the horizontal scroll does not move. can you help me?

I made an animation of the vertical scrolling of the cards, everything works fine, the only thing is that when the "pin: true" property of the scrollTrigger is enabled, a large indent appears at the bottom of the animation block, how to deal with it? Without the "pin: true" property, the animation doesn't work the way I want it to.

This is my code https://github.com/akrdesign/gsap-pin-problem.git . I'm using Next.js and TypeScript. I have made three sections, one at the top, one in the center, and one at the bottom. I am trying to pin the center section and it's pinning too. You will see some navigation in the header, as soon as I switch from the home page to the About page, I get to see an error which is [NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.]. When I remove the pin from the scrollTrigger timeline then it runs perfectly. The section in which the problem is occurring will be found in the code on the home page inside the templates folder. I was trying to show the example on codesandbox but it could not be setup. That's why I have given the link of GitHub. Forgive me for this.🙏Also i provide code file gsap-pin-problem.zip

Hello, I am making a project with gsap. Everything works very well, but when the content comes from the bottom to the top or when the content is independent from each other, a flickering line occurs, I searched, but I could not solve it, can you help? I am sharing the photo with you. Error image https://freeimage.host/i/screenshot-2023-04-05-005609.HOYGZMb

I create a simple demo for this issue. https://stackblitz.com/edit/nuxt-starter-nsqfvz?file=pages/index.vue I use scrollTrigger in gsap.matchMedia(), 1. if I add the "pin" in home page (pages/index.vue), 2. and then go to other pages (pages/page2.vue) 3. resize with different breakpoint it will show this kind of error, Uncaught TypeError: trigger.revert is not a functio After I back to the home page, the scrollTrigger will not work anymore. And seems the scrollTrigger should be killed in "onUnmounted" ? Thank you~~~

I'm working on a project currently with Vite. I'm using scrollTrigger on a component so that it animates a scale on a video in the background while also animating in some text in the foreground. I originally used Gatsby with the project and was able to set the #root { position: fixed; } in my index.scss but now that i'm Vite I can't do that otherwise i'm unable to scroll altogether. I don't know think it's worth the time of completely recreating three sections in codePen to achieve the same effect but I will post screenshots with the code since i'm fairly certain it's just a positioning issue with my css. This is the Reel.jsx Below is the index.scss Below this is the Reel.scss If the images and everything are too much, I understand and feel free to remove the post. Otherwise, any help is super appreciated since this has been buggy for hours now.

Hi All Please take a look at animation in full view mode https://codepen.io/av-fwstudio/full/BaOrYOm Couldn't figure out how we can pin the rim so it will go till the end of the yellow container?

Hello! I am having an issue when using scrolltrigger and pins, I have the scrolltrigger start to be when the bottom of the container hits the bottom of the screen, but I think due to this it creates a harsh "snapping" to its pinned spot when moving in to the next section of the scrolltrigger. The reason I have the scrolltrigger set to "bottom bottom" is because when I have the scrolltrigger start to be "top top" depending on screen size it doesn't show all of the content in the previous section before moving to the next scrolltrigger section (however when I was using "top top" the harsh snapping wasn't an issue). Is there a way to either 1) Fix the harsh snapping in to the pinned spot when the scrolltrigger is set to "bottom bottom" OR 2) Fix the cutting off of content when the scrolltrigger is set to "top top" ?

hey!! suuupper new to GSAP. I am trying to replicate this website's "master your money" section animation https://jupiter.money/ . I have tried to implement it. Below is my code which I tried so far. import React, { ReactElement, useEffect, useState } from "react"; import gsap from "gsap"; import { useLayoutEffect, useRef } from "react"; import ScrollTrigger from "gsap/dist/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); const spotlights = [ { id: 1, icon: "", title: "Master coding with interactive practice.", }, { id: 2, icon: "", title: "Build coding skills with practice problems.", }, { id: 3, icon: "", title: "Practice coding, unlock your potential.", }, { id: 4, icon: "", title: "Earn coding certifications with tests.", }, { id: 5, icon: "", title: "Guided learning with courses.", }, ]; const togglePosition = "fixed left-0 right-0 w-full"; const Spotlights = () => { const [mount, setMount] = useState<boolean>(false); const [activeSlide, setActiveSlide] = useState<number>(0); const component = useRef() as React.MutableRefObject<HTMLDivElement>; const sliderContainer = useRef() as React.MutableRefObject<HTMLDivElement>; useEffect(() => { setMount(true); }, []); const tl = useRef(); useLayoutEffect(() => { let ctx = gsap.context(() => { let container = document.getElementById("spotlights"); let contents: HTMLElement[] = gsap.utils.toArray(".content"); gsap.set(contents, { autoAlpha: 0, y: 500 }); let tl = gsap.timeline({ scrollTrigger: { trigger: component?.current, scrub: 1, pin: true, pinType: "fixed", pinSpacing: true, start: "center center", end: () => "+=" + window?.innerHeight * 3, markers: true, onUpdate: (self) => { // get the active slide index based on the ScrollTrigger progress const activeIndex = Math.round(self.progress * contents.length); setActiveSlide(activeIndex - 1); }, }, }); contents.forEach((content: any, idx) => { tl.to(content, { duration: 0.33, opacity: 1, autoAlpha: 1, keyframes: { y: [1000, 200, idx * -content.offsetHeight], }, }); }); }, component); return () => ctx.revert(); }); return ( <section id="spotlights" className={` spotlights bg-[color:var(--theme-color5)] h-full`} > {/* /* -------------------------------- LEFT PANE ------------------------------- */} <div ref={component} className="spotlight--container md:flex px-4 h-full flex-col-reverse md:flex-row items-start hidden max-w-6xl mx-auto" > <div className={`py-12 lg:py-20 relative lex-1 text-center lg:text-left lg:mr-6`} > <h2 className="text-[1.5rem] sm:text-4xl md:text-4xl lg:text-4xl pt-2 pb-3 mb-7"> <span className="text-[color:var(--secondary-color)]"> spotlights&nbsp; </span> of abc </h2> <ul className="flex flex-col gap-2"> {spotlights.map((item, idx) => { return ( <> <li key={item.id} className={`transition-all ease duration-300 ${ activeSlide === idx && "bg-[color:var(--theme-color3)] rounded-md" }`} > <h4 className="flex p-4 rounded-md font-medium transition-all ease duration-1000 text-xl text-[color:var(--theme-color2)]"> <span className="ml-4">{item.title}</span> </h4> </li> </> ); })} </ul> </div> {/* /* ------------------------------- RIGHT PANE ------------------------------- */} <div id="right" ref={sliderContainer} className="container flex-1 ml-6 relative h-[inherit]" > {spotlights.map((item, idx) => { return ( <> <div key={idx} data-controller="scroll-spotlight" id="one" className={`content content1 h-full transition-transform ease duration-2000 bg-[color:var(--secondary-color-light)] flex justify-center items-center z-[${ idx * 10 }] absolute w-full`} > {item.title} </div> <div className="spacer h-[inherit]"></div> </> ); })} </div> </div> </section> ); }; export default Spotlights; It's behaving weird. I am not sure what is actually going wrong. The animation speed is too fast and the sliding animation on scroll isn't working i want it to. I have been stuck with this for two days. Any help is appreciated. the link to current working is attached below https://drive.google.com/file/d/1u89IQHwBlYncTxg3e64OzRV2I1sl6lqE/view

Hi team greensock, First off, thank you for building such an amazing animation library! Having only discoved greensock recently I can honestly say I haven't had this much fun making things for the web since the days of yore when flash ruled supreme. I think I might have come across a weird edge case in which nested scrollTrigger animations don't seem to be initializing properly, please see the codepen. It's a relatively straightforward setup with a pinned container. Inside the container is a horizontally moving list in which each of the items has it's own animation. The items are positioned to look more or less random, and the scrubbed item animation moves them back to their initial state. Before the container animation hits the start point for the first time, the nested items are positioned as if they themselves are off screen, rather than the position they should actually be in according to the scrubbed timeline. Once the start point of the container has been hit, they jump into place. From there on everything is fine. Perhaps I am doing something wrong myself, although there does also seem to be a difference between different gsap versions. If you change the version in the codepen to 3.11.1 or lower, the items are positioned correctly the first time. Gsap 3.11.2 or higher, and they're not. Any ideas what might be going on? And what could be done to fix the initial position? Thanks! Bart

hello there, im trying to create section with cards to scroll horizontal in (React), the animation works fine but when i add scroll trigger to start animation when the section in viewport, something is wrong. here is a demo on codesandbox https://codesandbox.io/s/intelligent-rain-866rkd?file=/src/Services.js

Hello everyone! I'm dealing with this animation: When the background image is in the middle of the viewport, an animation should start on its black gradient overlay that leaves only the center of the photo visible with a spotlight (in Italy we call it bull's-eye light) effect (the one used in theaters on actors) and an svg appears (always on scroll) with a scale effect. Also the animation should be pinned untill it's finished. But when I pin it, the overlay square moves down and scroll on its own. In the JS code of the Codepen I wrote the functions maskRadialGradientReveal() which takes care of the timeline (scale the backround image, then apply the overlay and then scale the logo svg I'm not ble to pin the section untill the animation is finished in the maskRadialGradientReveal function. Thank you in advance as always and any suggestions are welcome!😊

Hi, I'm implementing ScrollTriggers with pinning on a website I'm working on but having issues when accordions are being opened/closed. When the user scrolls to the product image gallery it becomes pinned to allow for the scrolling of the product content. This works great initially but once I open the INGREDIENTS tab (any tab for that matter), it obviously increases the height of the parent container while the slider stays the height of the viewport. But if I scroll down to the next product, that products slider jumps. You can see a video reference here and you can also see this in the browser by visiting: https://eldetalleusa.myshopify.com/ (view at a 13") This is the code that I'm using to init the ScrollTriggers is: this.fixedElements.forEach(element => { ScrollTrigger.create({ trigger: element, start: "top top", end: "bottom top", pin: true, markers: true, pinSpacing: true, }) }) And the code I'm using to trigger the ScrollRefresh is: I've also tried ScrollTrigger.update() this.accordions.forEach(accordion => { accordion.addEventListener('click', e => { ScrollTrigger.refresh() }) }) Any help would be greatly appreciated. Thanks, Dayne

Hola comunidad, hice un ejemplo de un elemento pin con gsap y reaccion, creo que lo hice bien, me gustaria saber si hay alguna forma de optimizar el codigo o si esta bien planeado, intente hacer un arreglo con utils para lograr el efecto del texto pero no lo conseguí, solo pude hacerlo usando cada componente individualmente, ¿es posible lograr ese efecto con "gsap.utils.toArray"? Caja de arena: https://codesandbox.io/s/gsap-react-pin-scroll-24c7fc?file=/src/App.js

Hey guys, Started playing a bit with ScrollTrigger and loving it, great job! Is it possible to pin elements taller than the viewport and make them scrollable though? Like this: https://abouolia.github.io/sticky-sidebar/ check out the "Scrollable Sticky Element" example, try scrolling up and down to see what I mean. Fingers crossed

Hello, I want to reduce the initial section height while scrolling and I do this, but there is a space between the section below it? Can you help?

Hello, the problem I'm facing is that when I scroll pin, the top part gets darker and smaller slowly. I made it smaller, but I couldn't center the beginning in the darkening part, you will see other markers. When I do " start: "center center , end: center center"," the markers do not appear. When the site is first opened, it is not actually white, but actually a very slightly dark color. This should not happen with white > and then > dark tone with scroll... I would appreciate it if you could help. I am sharing the test link I made in this project. https://clever-seahorse-227af4.netlify.app/

Hello, I want the content part to be pin and scroll by hovering over the start part. One problem is that the content doesn't get auto height and scrolls gradually. Example website; https://www.rose-island.co/

I created a simple vertical scrolling page with different sections. I would like to display the title for each section with a fixed position when the section is in the viewport. I have an issue in the first section (orange). The position of the title is broken. I'm not sure but perhaps it's related to the HTML element .pin-spacer. I'm new in GSAP and not really sure that my code is ok with what I'm trying to achieve. Any help would much appreciated, thanks.

I try to do when I scroll down, the top section which name is "container" will be pin and I saw it' pinned but scrub not working, and another the image will be go one by one layout

When I set pin: true on the target element, it will get a set of max-height, max-width styles, which causes me to lose the effect of its original size gradient. How can I turn off this feature?