Search the Community
Showing results for tags 'pinning'.
Found 9 results
-
Hello Everyone, Hope you guys having a great day. So, here i am trying to achieve pin scrolling form left to right and right to left achieved nicely by @akapowl using locomotive scroll and how to make horizontal scroll section to display vertical on mobile and display horizontally at tab and desktop. and if i want to achieve horizontal scroll at mobile then this will be kind of bad for user experience as it will cause problem to scroll. https://codepen.io/akapowl/pen/8a383f202ba53d6b11cc83da39b6f5b5 I want to achieve left to right in second section and want to make them display vertical on mobile coz its overlapping -
Hi there! Thanks a lot first for creating this library! I am only starting to using it more often but love how easy it can make powerful, performant transitions. This is my first time using ScrollTrigger however and I am unsure how to use it in a good way for my use case. I've spent a few hours on trying to put this together but did not get it fully working and hope that some of you can guide me in the right direction. What I am trying to achieve Once Section Two ('section .two') reaches the middle of the viewport it should be pinned. After that the text elements on the right of Section Two ('.stepped-animation .single-step') should fade in / out one after another when I scroll further. There should be a "direct" transition to the next text element, meaning for example it shouldn't stop during animation at opacity 0.5 of a text element (I tried to achieve this using snap). The last one should stay visible when I scroll on. After the last text element is shown and the user scrolls further the Section Two should be unpinned and it should scroll on further to the next section (no need to snap to the next section, just go on). What I could do so far As you can see in the codepen I've somehow got it to work, but: I've manually added the transitions for the text elements and durations (see stepsTimeline) which is not a plausible way The number of text elements can vary. Somehow the whole Section Two now also snaps in place, which is not really what I intend. It should just normaly scroll into place until it is pinned without the snapping. Less important, maybe a second question: I would like to get rid of the white space above / below the pinned section but also do not want the following content to go under the pinned section (what happens when I disable pinSpacing). A few thoughts on how I tried to achieve the solution Two scroll triggers: - one that pins / unpins the Section Two - one that goes through the text elements and shows / hides then when the time is right I feel like there is probably a better way on how to setup the whole thing and maybe use ScrollTrigger it in another way combined with timeline - but I cannot see it 😓 Thanks for any help! Aaron
-
Hello everyone, This is a reformulation of a topic that I created a few days ago. I am creating a new one here because I think it is more a ScrollTrigger+React-related problem and that it might benefit from being referenced as such. Context There are two consecutive "sections" that are both a 100vw/100vh. Each section is a React component (in the CodeSandbox below, they're called respectively WorkOverview and HomeAbout). They both get pinned one after the other. Problem The second element gets pinned too early, exactly as if the padding of the first section's .pin-spacer wasn't taken into account. The weirdest thing is that it doesn't happen all the time (but must of the time). Please note that (1) the ScrollTriggers are created in the order they happen on the page and that (2) it is not caused by any asynchronously-loaded content on what the sections' sizing might rely (images are inside a pre-sized container). Here's a video that illustrate the problem: Here's the CodeSandbox link https://codesandbox.io/s/clever-rhodes-16ic1. Note: if you don't see the problem, refresh the page 1 or 2 times. Thanks in advance for you precious help! -
Hello, I have a question although I don't know if I can't find the answer here but I thought I should give it a try since I exhausted all other options. I have an image/video that needs to be pin and it's going to be move to another section, so what I need it's to be able to un-pin the image once the center of the image/video hits the center of the content of the section. The problem is that the image can be larger or smaller depending of the size of the screen (since it's inside a grid) so I don't know how to calculate this so the centers always meet regardless of the image size. Any help would be appreciated
-
Hi, newbie here. I'm desperately trying to figure out how to pin the second div to the top of the screen, beneath the first div, then releasing it as the div above it ends. Just like - https://jeongsteph.design/ I've tried toggleclass too but I just can't get it and I don't know where I'm going wrong. Please help me Thank you
-
Hello devs , i'm trying to implement smooth scroll and scrollTrigger pinning on same view port. As the smooth scroll works by disabling scroll and translating -Y , pinned div also translates instead of pinning. Reference : https://codepen.io/wooooosky/pen/LQNZgv Can anyone give me a solution , would be helpful. Thanks in advance.
-
Hi there, I’ve just started using the ScrollTrigger plugin, which is SO awesome - thank you for all the work put into this. I’m worried I’m over complicating things, especially in regards to making my ScrollTrigger instances responsive. Basically I have 2 ScrollTrigger instances for desktop (anything above 800px) and 1 tween with a ScrollTrigger instance for mobile (anything below 800px). I want the 2 desktop ScrollTrigger instances to only run on desktop and the mobile tween with ScrollTrigger to only run on mobile. Everything works great on initial load for both desktop and mobile, but if resizing the viewport, everything goes a bit whacky/breaks (things go out of place/overflow, and I can’t tell if the instances are duplicating or if just the markers are being repeated). As well, my desktop ScrollTrigger instances won’t run if resizing from mobile and my mobile tween with ScrollTrigger won’t run if resizing from desktop. I’ve been wracking my brain, searching high and low in the docs and forums trying different things for 3 days now, but I’m not quite getting it. Any help would be incredibly appreciated. Thank you so much. -
Hi, I have created a gsap animation in my website. Inorder for it to autoplay i have not specified the duration while creating the scrollmagic scene. Now the animation is autoplaying (which is the intended effect if was going for) but now the section stays locked in place since there is no duration to tell the animation that it is over. So currently, the next elements are being overlapped by the pinned element. How can i fix this ? How can i unpin the element after the animation ?
-
Hi there I'm using the scrollorama plugin to achieve some fairly simple pinned animations, and the plugin works extremely well. However, I'm trying to use the scrollTo plugin to provide a simple navigation for users to scroll with animation to the critical point in each animation, and this is the part I'm stuck on. If anyone can provide any guidance on how to determine the way to scroll directly to a certain point in a pinned animation, I'd greatly appreciate it! Thanks.
