Search the Community
Showing results for tags 'snap'.
Found 55 results
-
Hello, I'm creating a scroll animation with snapping. Is it possible to set the snap duration based on the remaining animation duration on the timeline? Between Step1 and Step2 I want the snap duration to be max 10; between Step2 and Step3 I want the snap duration to be max 3; between Step3 and end I want the snap duration to be max 6. Is that possible? In my test above, the duration is always round about 2000ms. Thanks Oliver
-
Hello everyone, I've been learning a lot from all of you, and I truly appreciate it. Currently, I'm working on an animation project, and it's about 90% complete. However, I'm encountering three main issues that I'm struggling to resolve. Firstly, I need each heading to snap to the center before scrolling it up. Secondly, I want the headings to be closer to each other. At the moment, there's a significant amount of white space between them during scrolling. Lastly, I'd like to slow down the scroll speed. Currently, when I scroll too fast, the headings come and go in a flash. I've tried various approaches to address these problems, but I'm still having trouble achieving the final animation effect. Any guidance or suggestions would be greatly appreciated. Thank you!
-
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
-
I have been stuck here for a week. I'm trying to make a scroll snap from section 1 to section 2 with a delay time for exit animation and reverse. From section 2 to section 4 it can be a normal scroll. I'm using overflow: hidden that I can't let it go. This is the reason that I think it prevents me from scrolling snap and normal scroll. The scroll way I try to achieve is exactly the same as this website: David | Creative Developer (david-hckh.com) Here is the codesandbox : https://codesandbox.io/s/scroll-rfjx9k How can I achieve this ? Please help me with this....
-
Hello, I am creating a multi-panel scrolling widget using the GSAP ScrollTrigger and ScrollTo plugins. When scrolling past the 2nd panel, I use ScrollTrigger to pin an SVG, and ScrollTo to override the snapping behaviour. I'm encountering a slight jump on the initial pinning of my SVG and am not sure what the cause is or how to alternatively smooth this out. My Codepen example isn't too bad, but still noticeable, and if i were to add more content the jump/glitch becomes more prominent. The Codepen example is identical to my project's widget markup and styling. If there are any questions or context needed, I can provide it in this thread. Thanks -
Hi there! I'm trying to replicate an effect in my snapping scroll, when I scroll up or down there is some kind of stop before the other section apears, and I want with a simple scroll go to the next section. I found a gsap code doing that exactly behaviour that I want but it is using scrollTo and gsap.to, and my code is already different, is there a way to replicate that in my code with the code that I already have? Because I have an "overlaping" effect with "pin: true" that I don't want to lose. https://codepen.io/akapowl/pen/YzxoEab/e9015efd3d44b24f9cce5bef29dee1dd My expected snap behaviour: https://codepen.io/urbgimtam/pen/XWXdypQ My snap behaviour: Thank you! Have a good day.
-
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
-
Hi! I am looking for a way to prevent the snap to labels functionality of ScrollTrigger if it is not close enough to any label (like an amount of pixels, or a function to build a logic to prevent snapping). The result I am looking for should be similar to the css property scroll-snap-type: proximity. Is it possible? Thanks! -
Hello, I tried to recreate material ui 3 carousel with GSAP. When we swipe on the carousel, width of next image in the line should increase and width of current image should decrease. I added labels in the timeline where one of the images are in expanded positions. When the timeline is linked to a ScrollTrigger, Snap to labels is working fine. And it is not working if timeline is linked to draggable. I tried snap: { snapTo: "labelsDirectional", duration: 0.01, ease: "none", }, and snap: "labelsDirectional", Is it not supported? Please help me with anything Im doing wrong. Thanks Carousel with ScrollTrigger
-
based on the scroll of the section I am adding an active class to the sticky menu by targeting href element through JS but while scrolling to Overview section which is a snapping section based on scroll trigger its not allowed to add an active class in the sticky menu of overview.
-
Hello, the animation is currently working how I want it to, but was wondering if there was a way so that each element on the left would snap to centered. The current way it is working is making it so that it snaps to the start or end of the container. Thanks for the help! Please note - I have just started learning GSAP. If there is a much better way to approach this animation, please let me know. Thanks!!!
-
How to scroll to only next element on mouse wheel and not to any other element ? how to scroll to specific element if I click from any random button from 1 - 5 ? (if I click from 1 - 5 or 5 - 1 incrementally it works fine but not with random button click) how to avoid dragging effect when I scroll in snap scrolling ? do you have any such examples where based on main div scroll, it's children is in sync ? -
Simple scrolltrigger v3 animation (The shoes moves on `Y` axis) - and I want to use snap. "my issue" - I want to snap to the next point only if the user very close to the end progress values(From 15 to 19.99999 => snap to 0.2). If not "do nothing". snap: { snapTo: [0, 0.2], directional: true, duration: { min: 0.5, max: 0.8 }, }, Any idea how to solve this (No examples out there related to this issue). Maybe it is not possible. Any related custom snap logic example could be helpful. **By default its snap to the closet point (So `0 to 0.09` snap to 0. `0.11 to 0.19999` snap to 0.2).
-
Hi y'all! I've been trying for a few days to get my sections working horizontally and vertically (https://codepen.io/EricCV/pen/wvPQXKB?editors=0010) with snap to the next or prev section(depending if you're scrolling down or up), but i'm not able to get it My logic tells me that it is not possible at all to have the first scrolled animation (the blue/white/orange svg) and then snap the sections but i'm not an expert and I tried everything? I only make it work in one direction, not both (https://codepen.io/EricCV/pen/JjOeZPL?editors=0010) Another option could be to do it in this way (https://codepen.io/EricCV/pen/dyZQKKE) but snapping the slides Any idea to try something? I'm stuck and I need some push I've created three different codepens to show the options I've tried to achieve it... Any help would be appreciated... Also any feedback to improve my gsap code would be perfect Many thanks
-
I have sections and one of them has boxes. I would like to have the snap effect for each section and each box Is it possible to have the snap effect for nested elements? As far as I understand native CCS snap does not work with nested Elements.
-
Hi! I was trying to achieve a similar effect to this codepen (found it in the gsap showcase) , but without all the complications of the loop. Most precisely, I was trying to achieve that instant snap effect, but without restarting when the array ends. Something exactly like this. I spent several hours yesterday without catching it, I would really apprec.iate any start point to work arround. Thanks in advance
-
Hello, I'm trying to animate a slideshow using ScrollTrigger & scrub. I have snap set up and it works ok, but if you scroll with too much momentum you'll blow right past a slide/snap point. Is there a way too make the snaps mandatory? I don't think I can use CSS as the slides are absolutely positioned on top of one another. Also with less momentum the snap animation seems to take a very long time to start. I would like the snap to happen at roughly the same speed regardless of momentum, is that possible? Apologies if this has been covered somewhere else, I did my best to read the docs and search the forum.
-
For some reason this codepen from the docs: https://codepen.io/GreenSock/pen/KKpLdWW does not seem to work in my case as when it's suppsoed to snap the next element, it I stripped it as much as possible and the issue persists as you can see in the codepen, the only issue I can think of is css but what am I doing wrong here?
-
Intro: Theres probably not a simple anwser to this but I wanted to see if someone more gsap experienced than me knew of some cool trick that could help me before I go on to do some overly complicated way of solving my issue. Whatver the case, thanks to anyone who is willing to give my issue a shot one way or another. Context: So, I want to create a component builder that lets users drag and drop blocks in place. As part of this I am using GSAP Draggable to drag and drop an element. The riddle im stuck on at the moment is I want the element to snap into place when its dragged over an area that can receive it. The simple solution is to just use the hitTest() function to detect if eligeble element is hit and then get either the points off that element to use in the livesnap, or get the transforms to match that element or something like that. Problem is that in a more complex example, for my use case, I dont actually want to manually create a uniqe function for every possible snappable area since there might be a lot. The ultimate solution would be if I could somehow dynamically fetch whatever snappable element we have hit. But as far as I can tell, from the docs, the hitTest() doesnt actually return the hit element, it just returns a boolean which kinda forces me to do something uniqley for each individual element that can get hit. Question: Is there a straight forward way to dynamically get whatever element I hit with the hitTest()? Codepen: Ive provided a codepen that acts like a massive simplification of what I am trying to do just to narrow it down to exactly what I am asking and making easy to experiement with solutions. Hope that makes it simpler to understand. -
Good day, folks! I would appreciate any idea or workaround for the following interaction. After landing on a webpage and scrolling down to a particular section, I would like to see the background of the section zooms in as the mouse scroll continues (I can make it happen but I need your suggestions regarding the following steps.) 1. A popup appears (but the zoom-in effect stays). Note: That popup contains several slides that move vertically, and it doesn't cover the entire width of the screen, only half of the screen, leaving almost equal space on each side 2. I want to get the Nested Scrolling effect like the background with zoom-in effect stays until I'm done with scrolling until the last slider. 3. Also, while scrolling, I need to apply the Scroll Snap effect to each of those sliders. I would really appreciate your support. Thanks in advance!
- 1 reply
-
- 1
-
-
- scrolltriger
- scroll snap
- (and 1 more)
-
HI, I would like to make an animation which will scroll inside a section. And the BG image will remain sticky until I complete my second scroll. But, I'm unable to complete my animation and need help badly. So this is my need- 1. Main section will remain until I finish the nested Scroll. 2. When The nested scroll first appear It has to an Scale up effect. There will be no effect for the rest. 3. Only 1 nested scroll can be pass at a time. No matter if it's slow or first scroll. 4. There will be an indicator which will be automatically marked. I mean which no of slider is viewing now will have an active color. I've tried the following but it skips the section. https://codepen.io/aaronmeder/pen/vYZGyJq Live Demo URL can be found http://18.136.138.101/ (Under the Globe Section)
-
I'm very new to GSAP and I tried to follow a tutorial and some demos however I couldn't get the results I wanted. I wanted as the user scrolls down for '.container' to be pin when it hits the top of the screen. So I set start to "top top". And when the user scrolls to the '.container' for the first '.panel' to already be displayed. I believe that part is working as I wanted. When '.container' is pinned, as the user scrolls, for each ".panel" moves into view and snaps into place. I think this works correct. However, It's not working the way I want it to look. I want the text inside '.panel" to be displayed in the center of screen / '.container'. But the only way I could get this scroll effect to work was to make the height of '.container' greater than 100% like 600vh. Oh and because I made it 600vh. There's extra whitespace at bottom. And I want to make sure everything is dynamic as possible. I also want it to snap to be more smooth or instant. There's a bounce there that I don't know what is causing it. How can I fix these problems. Is there a better way for me to set up animations.
-
draggable Draggable does not trigger OnDrag and Snap in React.
Thomas Devolder posted a topic in GSAP
So I am trying to rotate a circle and snap it to 90 degrees but I can rotate it but It doesn't trigger the onDrag en snap function. I don't know why, I also don't get any errors. let rotationSnap = 90; Draggable.create(vinyl, { type:"rotation", OnDrag: () => console.log('works'), snap: function(endValue) { console.log(endValue); console.log(Math.round(endValue / rotationSnap) * rotationSnap) //this function gets called when the mouse/finger is released and it plots where rotation should normally end and we can alter that value and return a new one instead. This gives us an easy way to apply custom snapping behavior with any logic we want. In this case, just make sure the end value snaps to 90-degree increments but only when the "snap" checkbox is selected. return Math.round(endValue / rotationSnap) * rotationSnap; } }) } -
Hi everyone, I have a question here, is there any possible way to start the snap at the end of a section (not at the start of a section)? Because as you guys can see in the codepen, it scroll the whole section until end of section. So there's no chance for the user to read the text in each section. Not sure if my code isn't implemented correctly. What I am going to achieve is, the user still should be able to control the scroll in order for them to read the text. Here's a visual reference for you guys in the attachment, hope it helps. Thank you! *in this pen, I use Scrolltrigger with smooth scrollbar
-
Wussup, GSAP! I`m experiencing some issues with snapping. My snap performs very laggy fo no reson. Here is my ST code: Here is an example of this snap performing at chrome mobile- And this is how it performs on my desktop (Yet another Russian local browser (chromium)). I have the same experience on different browsers including Chrome itself.- I`d like to say that my code is buggy, but all actual codeOpen demo examples of ScrollTrigger`s snap (from docs) are laggy on my desktop too. I briefly looked for latest snap related topics and found this post. https://greensock.com/forums/topic/25479-full-screen-sections/?do=findComment&comment=123493 So @akapowl, you might be interested too. Your demos, where you downgraded ScrollTrigger and GSAP to v3.4.2, works perfectly fine with snapping. Any other machines I tested works good. Is there a possibility it`s related to AMD processor I`m using? Or may be it`s Windows Insider program? Dunno. Any ideas what kind of information about my system could help with solving this issue. P.S. Have no idea, how to mention concrete person at this forum correctly(
