Search the Community

The start point of the element to be pinned does not match the element, the start point is way too much above the element itself. I don't mean the scroller-start and end, those ones are okay as i set them in the code but when i look at my markers the start of the pinned element is not on the element but somewhere about, which makes my scroll trigger start before it's support to. What can be the issue please // Create a GSAP timeline for the pinning effect const pinningTimeline = gsap.timeline({ scrollTrigger: { trigger: ".steps-count", start: "top 10%", end: "+=10000", pin: true, markers: true, pinSpacing: false, } }); // Your animations or timeline for the second div (div2) scroll const scrollTimeline = gsap.timeline({ scrollTrigger: { trigger: ".steps-cards-container", start: "top center", end: "bottom top", scrub: true, } }); // Define animations for the second div scrollTimeline.to(".steps-cards-container", { y: -200, // Adjust the scrolling direction as needed opacity: 0.5, });

Hi ! I am reaching out to seek assistance with a challenge I'm facing while using ScrollTrigger, particularly with the property pin: true. Problem Description: When utilizing pin: true, the ScrollTrigger generates a pin-spacer div. However, I've noticed that this generated div has a z-index value set to 'auto.' This is causing interference with certain parts of my code, preventing them from functioning as expected. I would appreciate your guidance on how to resolve or work around this issue. Specifically, I am looking for a way to adjust the z-index value of the pin-spacer div generated by ScrollTrigger when using pin: true. I appreciate your time and support in helping me overcome this challenge. If there are any additional details required, or if you need any extensive code snippet, please let me know. Thank you for your assistance.

<div id='app'> <div class='section1'> <h1>Section 1</h1> </div> <div class='section2'> <h1>Section 2</h1> </div> <div class='section3'> <h1>Section 3</h1> </div> <div class='section4'> <h1>Section 4</h1> </div> <div class='section5'> <h1>Section 5</h1> </div> </div> i have 5 sections and each sections height is 100vh. but i need more scroll area so i pin each of the 5 sections.Then i have a scrollTrigger method which the trigger is section1 and the start is from center but it is not starting from the center of the section1 . if any one knows how to fix this please help.Please

I created a test page for the GSAP Scroll Trigger with PIN. There is two section, each section trigger the scroll with pin. Currently the first section pin is working but second is broken layout. Can any one help please.

I've been experimenting with GSAP for the past few weeks using next, and I've been trying to use "pin" with "scrollTrigger." However, it seems like I'm getting extra white space every time I use "pin" with the scroll trigger. Is there something wrong with my code? first, I create two refs. const animatedPath = useRef(null) const svgref = useRef(null) and second I use `useLayoutEffect` for register scroll trigger plugin and define gasp animation useLayoutEffect(() => { gsap.registerPlugin(ScrollTrigger) const tl = gsap.timeline({ scrollTrigger: { trigger: svgref.current, start: "top top", end: "bottom 100", scrub: true, markers: true, pin: true } }) gsap.set(animatedPath.current, { strokeDasharray: 471.2, strokeDashoffset: 471.2, }) tl.to(animatedPath.current, { strokeDashoffset: 0 }) }, []) after that, i create svg with circle inside it <section style={{ height: "200vh" }}> <svg ref={svgref} style={{ width: "400px", height: "400px" }} xmlns="http://www.w3.org/2000/svg"> <circle cx={200} cy={200} r={75} fill="none" stroke="black" strokeWidth={10} ref={animatedPath} /> </svg> </section> The result shows that the `pin-spacer` class has a large padding/whitespace, and the animation doesn't start properly. full link https://codesandbox.io/p/sandbox/sad-lalande-q7c578?file=%2Fapp%2Fglobals.css%3A1%2C1 Thanks in advance!

Hello, I want the perspective to improve as the scroll moves down, and then I want the scroll to continue. In my example, the perspective improves, but the scroll does not have a pin, it moves normally. Can you help me?

Hello, I'm trying to get my head around on how to pin a div element to top using ScrollTrigger. Pin it when element's top side reaches the top of the browser viewport. Thank you, Yannis

I have some ScrollTriggers added to a few elements in a pinned ScrollTrigger, and when the page is loaded from the top, the behavior is exactly how I want it, even when scrolling back up through the pinned section—the animations just play in reverse of how they played when scrolling forward, but if you load the page below the pinned section, in the normal context of the site, if a person was given an anchor link below the pinned section, or refreshed the page after scrolling past the pinned section, and *then* you scroll back up through the pinned section, the animations still trigger at the right place, but they sort of skip the tween and just jump to the start/end value. In the codepen demo, you can set the `loadAtBottom` var at the top of the js panel to `true` to try to simulate this. I know that's not a perfect simulation, but the result is the same as I'm experiencing on the actual site. I'm afraid that the issue isn't an issue at all—that this is how it should be happening, but I'm misunderstanding something fundamental about how scrolltriggers work, but any insight or guidance would be greatly appreciated!

I'm trying to add animation when scrolling with pin:true property I expect something like this : original website : https://www.captions.ai/ I am trying to recreate this animation, but I am experiencing lag issues when implementing it. Whenever I scroll to the start position, the content of the section disappears. After some investigation, I realized that I had wrapped all my divs inside a container div which initialized a container query with the propertycontainer-type: inline-size However, when I removed this line, the animation started working again. I am not sure if GSAP doesn't work with the new container query or if I am missing something. Can someone please explain why this is happening? I also found that setting the property "pinRearent" to true fixes this problem. However, after reading the documentation, I discovered that it has some downsides. Therefore, I would like to avoid using it if there is another solution available. https://i.imgur.com/QLqWIGl.gif

Hello, I have some problem with GSAP. Hope can find the solution here. I want to use a scrollTrigger with {pin: true;}. Then onLeave, the animation should stop, so that when going up (onEnterBack), the animation shouldn't reverse. Then on leaveBack, I would like to re-enable the animation as at the beginning, so that scrolling down again would animate. I want to find something like this example, but also to use the setting with {pin: true;} , and I want the progress stop at (1) when onLeave. https://codepen.io/GreenSock/pen/Rwqozzx I don't know how to fix it, please help me, thanks for all good peoples here.? This is my codepen: https://codepen.io/lin-hsienli/pen/KKrvmgE

Hello there, I would like to make a slider at the same time as a pinned element so that scrolling is possible only after all slides have been scrolled. Please, look at the example i have prepared. I've made a slider that work, but so many bugs there Could you please help me to find a better way to solve my problem?

Hi all.To avoid indents at the bottom I made a couple of manipulations.I added "margin" for the "pin-spacer" element at "onUpdate" method "scrollTigger".But when scrolling it is noticeable how the whole section jumps.Everywhere examples where the "pin" element covers the whole screen,but there are no examples where the elements keep their positions and without any gaps. I just wanted the section with cards was pinned to the top of the screen until it does not scroll to the end horizontally and that the gaps at the bottom was not, as the screens are different and everywhere look different.As you already know "pinSpacing:false" does not help, as the sections are layered on top of each other, and I do not need it.I will be glad to any suggestions. Pls check on full screen mode to better understand what i mean

Hi everyone, I am trying to detect if a pinned sidebar (box element in the codepen-example) is next to (between) a specific element (section element in the codepen-example) when scrolling. For this, the top corner of the blue box should act as "scroller-end" and the its bottom-corner as "scroller-start". At the moment the "scroller-start" and "scroller-end" is related to the viewport. Changing the "scroller" does not give the result I expected. I would appreciate any guidance or suggestions on how to solve this issue. Thanks in advance for your help!

I have two scrolltrigger based pins in separate React components, WorkContainer.jsx and SkillsWrapper.jsx. Both pieces of pinned content appear to jump positions on enter. The second pin, in SkillsWrapper, will also jump randomly on page refresh and will appear before or after it's pinned content section. I've tried to remove all padding/margin to the affected sections, added context, and added "anticipatePin" to both scrolltriggers but the issue persists. See useEffect for WorkContainer: useEffect(() => { let ctx = gsap.context(() => { // Pin featured work text ScrollTrigger.create({ trigger: '#featured-work-text', start: 'top top', end: 'bottom 60px', pin: true, // markers: true, anticipatePin: 1, }); const videos = gsap.utils.toArray('video'); videos.forEach(function (video) { ScrollTrigger.create({ trigger: video, // scroller: ".appVideos", start: 'top 65%', end: 'bottom 0', // markers: true, onEnter: () => video.play(), onEnterBack: () => video.play(), onLeave: () => video.pause(), onLeaveBack: () => video.pause(), }); }); }, component); // <- selector scoping return () => ctx.revert(); }, []); See useEffect for SkillsWrapper: useEffect(() => { let ctx = gsap.context(() => { let mm = gsap.matchMedia(); mm.add( { isDesktop: '(max-width: 768px)', isMobile: '(min-width: 768px)', }, (context) => { // eslint-disable-next-line no-unused-vars let isDesktop = context.isDesktop; // Sets Scrolltrigger pin for circle let tl = gsap.timeline({ scrollTrigger: { trigger: '#circle-container', start: 'top top', end: '+=100%', pin: isDesktop ? false : true, pinSpacing: false, toggleActions: 'play none none reverse', anticipatePin: 1, invalidateOnRefresh: true, // markers: true, }, }); // ... additional commented out tl } ); }, component); // <- selector scoping return () => ctx.revert(); }, []); Please see attached video showing my issue and stackblitz links to project below: Stackblitz project editor Stackblitz application preview Any help with resolving this issue would be greatly appreciated. scrolltrigger-issues-small-2.mp4

Hello everyone, I'm seeking to create an opacity transition effect that changes from 0 to 1 as soon as a section enters the viewport and becomes pinned. During this time, the opacity of the current section should transition from 0 to 1. After the pinned section's scrolling progress is complete and it is unpinned, I aim to have the opacity of the section transition from 1 to 0 while the section is being unpinned and until it moves out of the viewport. Despite attempting various approaches, I have been unable to find a successful solution. Any assistance and guidance would be immensely appreciated.

I have taken a scroll effect from the codepen and tried to edit it. I want to create an effect where when the user scrolls a bit the page gets snapped to the top and also I want the page that is snapped to the top to get pin so the next page will show on top of that and while scrolling the pinned page don't scroll and remain fixed. the first problem I am facing is that pin is giving space at the top of the page which I don't want and also my page is not getting pinned and also my fifth page is not showing. why it is happening and how to solve it. (I am completely new in gsap) index.html scroll.js

I'm trying to use different components with ScrollTrigger, but I don't know why the calculations don't work and I don't know what I'm doing wrong If I use the components separately it works, but together it doesn't... Can anybody help me? Thanks!

I want to pin a dropdown menu to a specific spot when my navbar gets pinned to the top. When you click the "Day 1" element in the navbar, then .dropdownL scrolls down. I need .dropdownL to be positioned absolutely so that it scrolls down directly beneath "Day 1" UNTIL "Day 1" gets pinned to the top of the screen. At that point, I want .dropdownL to have a position: fixed, top: 50px and left: 2.5vw. How do I set the pin position to this very specific spot please?

hey the first page on my screen disappears during the entire duration of the scroll using scroll-trigger can someone help me with this. it reappears only after end crosses over scroll-start. 11zon_compressed.zip

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 all, I am trying to create an effect in which I can loop through all sections of a page and make them all overlapping. This is for a site where I don't know how many sections there are per page, since that can change. The effect in my codepen is almost what I want, but ideally section 1, 2 and 3 should all be overlapping at the end of the page. I have tried using "pintype: ''transform" ad setting the pinspacing to true but to no avail. Can anyone help me with a solution?

Hi, I'm having this issue – is there any thing I can do about it. Seems like flex and align-items:center is breaking the scrolltrigger pin I'm very happy for any help

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

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?