Search the Community

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 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/

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" ?