Search the Community
Showing results for 'normalize lerp clamp'.
Found 16 results
-
Given my following animation import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger); const icons = document.querySelectorAll('.icon'); icons.forEach(icon => { gsap.to(icon, { rotate: 180, ease: 'linear', duration: 10, scrollTrigger: { trigger: icon.parentNode, start: 'top 100%', end: 'bottom 0%', scrub: 5, } }); }); I need to implement the normalizeScroll function on ScrollTrigger, but it is not very clear to me how to do it when using Scrolltrigger inside Gsap like in my example. Can somebody help me?
-
is it possible to make a lerp effect with gsap, I want when scrolling the distance between elements expands and returns to its original value again.
-
normalizescroll ScrollTrigger: Normalize scroll on custom scroller
Grommas Dietz posted a topic in GSAP
Hey there Thanks for all your tools, the updates and new features. Really appreciate and love to work with it! Is it possible to normalize scroll on custom scrollers in future releases of ScrollTrigger? Currently the normalisation only works for the overall page, similar to ScrollSmoother, right? The CodePen provided is just a quick test in reference. Comment out ScrollTrigger.normalizeScroll(true); to see how it breaks the scrolling. -
Hello! Thank you very much for such an amazing library! I've been using locomotive scroll for some time to achieve smooth scroll, but I had occasional performance issues when I would use power save mode on my laptop. So I decided to become a club member and use scrollsmoother. After removing locomotive related code and updating JavaScript , website started to work perfectly on desktops, even on power save mode! But unfortunately on my phone and tablet performance dropped drastically and way worse than used to be. Address bar would show/hide sometimes despite setting normalize scroll to "true". After setting normalize scroll to "false", performance gets slightly better, but still very jumpy... I would provide codepen demo but I am not sure what causing this behavior on phone and tablet and which part to isolate and put in codepen. I really don't want to go back to using locomotive scroll, but it had better performance on mobile which doesn't make any sense. I am sure I am doing something wrong, but can't figure out what... I would appreciate any help and advice! this is demo https://gsap-test-smoothscroll.netlify.app/ this is javascript snippet I use // create the scrollSmoother before your scrollTriggers let scroller = ScrollSmoother.create({ wrapper: "#smooth-wrapper", content: "#smooth-content", normalizeScroll: true, ignoreMobileResize: true, smooth: 2.5, // how long (in seconds) it takes to "catch up" to the native scroll position effects: true, // looks for data-speed and data-lag attributes on elements smoothTouch: 0.3, // much shorter smoothing time on touch devices (default is NO smoothing on touch devices) }); -
Hi! I do a lot of research but i can't resolve this thing. Maybe it's the delta normalization of smoothscroller. As you can see in my pen if you scroll really fast the animation is not smooth. It is an easier example of a complicated morph particles on scroll in threejs but the fact is the same. I try to use preventOverlaps and fastScrollEnd but maybe i can't understand as they works. If look at this website: https://dnacapital.com/ and try a big scroll it is has a very good normalization of delta. So i think i have 2 problems: 1 is to understand as preventOverlaps and fastScrollEnd works and second the delta of the scroll. Can anyone help me? Thank you
-
Hello folks ?, I am using Draggability from desandro (https://draggabilly.desandro.com) in order to create 2 draggable images in a menu. I have set a lerp effect to them which I find super nice. It works well but I am looking to optimize my code and I think that draggable + inertia plugin can gave me a better results in term of performance. If you have some ideas or advises for building these draggable images using gsap plugins, it would be super nice ! (example of my code using Draggability is on the codepen link) Thank you all, Benjamin
-
Hi guys! I'm currently trying to make a horizontal landing page with combination of scroll and draggable. I tried using this approach similar to this https://codepen.io/Pixouls/pen/YzWNrmx and added the normalizescroll. But it seems is not working since its contradicting to each other. Can anyone help me pointing to a direction on what to do to make it possible?
-
normalizescroll ScrollTrigger: Normalize scroll and CSS Scroll Snap
Grommas Dietz posted a topic in GSAP
I’m still fiddling around with ScrollTrigger’s brand new normalizeScroll option. I tested it on CSS native Scroll Snap. Sadly it doesn’t play nice together and ends up in jumping directly to the scroll snap points without any visual scroll. I remember there was a bug with ScrollToPlugin and CSS Scroll Snap last year which got fixed. The fix was probably quite an easy task since the CSS Snap can be turned off while scrolling to the content. Is there any chance to get the normalization on native Scroll Snap, or is it required to move completely to GSAP snapping for that? It would be great to get a hint about the restriction in the docs to be aware of the limitation. -
shape How to clamp shapes like the color block in the middle container?
Zhiyi Zeng posted a topic in GSAP
Hi, I'm new here. I'm trying to figure out how to realize what's in the link rallyinteractive. However, I have some troubles in clamping the color block in the middle. Any help would be appreciated. -
Hi!! I need to line clamp some text like in instagram or like this design: There are a lot of discussions around coding forums, and I finally used this plugin: https://github.com/jmenglis/clamp-js-main but it doesn't work with html content, only plain text. Here there is another example and coding practices of what I want: https://css-tricks.com/line-clampin/ So I was thinking that splittext plugin is capable of splitting text while respecting html tags, so it would be interesting to create an example of line clamping with a nice expanding animation (which by the way isn't very common in many websites). How would you approach the problem? I will create a codepen once I have some strategies but for now I would like to know if someone thought about this problem and how to solve it as elegantly as possible. Thank you!!
-
Hello, is there any quick way with gsap to make the animation of https://locomotivemtl.github.io/locomotive-scroll/ at section 3. with the Lerp elements?
-
Hello, Yesterday I was playing with morphSVGs and wanted to get the morph path data at a certain progress. Today, I am wondering what options are available in GSAP for extrapolating a path beyond the clamp values (e.g the actual path data). As you can see from the example the dragging causes the dragged element to extrapolate beyond the actual paths used. If you drag slowly it stays within bounds, but if you drag quickly you get extrapolated paths. Which what I am after. How can you get such a result in GSAP?
-
Hi there, I'm using scrollTrigger `onUpdate` method which gives access to `progress` and this indicates the `start` and the `end` value which are the range`0` between `1` , I have tried to clamp those values to get like `0` and `2.8` but this is not working function clamp(num, min, max) { return num <= min ? min : num >= max ? max : num; } I'm trying to use scrollTrigger with video onUpdate(evt) { videoScrollNode.currentTime = evt.progress } the video length is 00:28 , any idea how can i achieve this Thanks for the help.
-
Hey all, I'm looking for the GSAP 2.x demo of using the Modifiers Plugin to make an infinitely scrolling carousel. While I'd love to use GSAP 3 as shown in this example, I have to use GSAP because our animation tools haven't been updated quite yet, and I need to get some client work out the door. Any pointers for where I can find the older syntax? Thanks!
-
Hello, I've tried achieving the smooth scrolling LERP effect for a website but it seems that it does not work with the horizontal scrolling section. When I try to activate it the horizontal section just turns white or just messed up. Any ideas how to overcome this? My pen: https://codepen.io/rulloliver/pen/LYEvomN I've followed this example: https://greensock.com/forums/topic/17300-smooth-page-scroll/ Thanks in advance!
-
Hi to everyone, I am trying to make an skewX effect with Gsap and mouse move. I want to use the Linear Interpolation function in order to have transition on timeline progress. As you can see in the codepen demo, onmousenter the effect doesn't have any transition because the Lerp fuction doesn't work well. On mouseleave works fine. Can anyone help me?
