Jump to content
Search Community

Search the Community

Showing results for 'normalize lerp clamp'.

Didn't find what you were looking for? Try searching for:

  • Search By Tags

    Type tags separated by commas.

  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.

Find results in...

Find results that contain...


Date Created

  • Start

    End

Last Updated

  • Start

    End

Filter by number of...

Joined

  • Start

    End

Group

Personal Website

Twitter

CodePen

Company Website

Location

Interests

Found 373 results

2
3
4
...
15
Page 3 of 15  
  1. Nuendo
    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?
  2. Rodrigo
    Hi, Yeah, indeed iOS and Safari especially continue to be such a thorn on the side. Normalize Scroll is the best that can be done in order to address some issues, especially on iOS. I'm no expert on the subject, but my guess in terms of what happens when you keep your finger on the screen, could be related to the fact that the JS thread and the one that handles the scroll (or maybe just the one handling the scroll) are updating constantly while the finger is on the screen thus creating the lag. Unfortunately I don't have an android 10 device (mine is running android 9) and I'm finishing updating my ios device to check another solution. I created a fork of the codepen you linked using will-change: contents; on the sections without normalizeScroll, can you test it and let us know how it works? Here is the debug view (no iframes) so you can test directly on your devices: https://cdpn.io/pen/debug/WNmeyRO Happy Tweening!
  3. Grommas Dietz
    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.
  4. Rodrigo
    Hi, I've been fiddling with your demo for some time and I find it a bit confusing to be honest. The way you're using selectors and classes doesn't really make a lot of sense to me as I think is quite convoluted. Then all your elements have the same start and end positions (check your ScrollTrigger markers), so that is not going to create a lot of differences since all the elements will be animating at the same time. That is because of this: .bigPlanetTimeline, .bigPlanet2Timeline, .bigPlanet3Timeline, .bigPlanet4Timeline { position: absolute; } Those are the trigger elements of ScrollTrigger and they are all at the top of the viewport. I forked your demo and removed a bunch of stuff that is not needed to show this behaviour I'm mentioning right now, that could or could not influence the end result: https://stackblitz.com/edit/react-gui4a9?file=src%2FApp.js Finally I added the clamp feature for the start values: I think most of your issues stem from HTML/CSS more than GSAP. I'd strongly recommend you to create a more robust HTML/CSS in order to have this working the way you intend. Unfortunately this is beyond the scope of what we do in these free forums, since we try to keep things related to GSAP around here. Good luck with your project! Happy Tweening!
  5. Rodrigo
    Hi @Jusi and welcome to the GSAP Forums! What happens in mobile devices is that the scroll is handled in a different thread, that's why sometimes there is some lag in terms of the updates. For that we have normalize scroll in order to move the scrolling into the JS thread and keep everything in sync: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll() I recommend you to use normalizeScroll only on touch devices, for that you can use the isTouch property ScrollTrigger offers to give you a basic information regarding the device being used: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.isTouch Hopefully this helps. Happy Tweening!
  6. Rodrigo
    Hi, Normalize scroll acts on tha way the scroll works, Soto speak. From the ScrollTrigger docs : Forces scrolling to be done on the JavaScript thread, ensuring screen updates are synchronized and the address bar doesn't show/hide on [most] mobile devices. As you can see it doesn't act on the way ScrollTrigger works directly but on the scroll, which obviously has an effect on how ScrollTrigger instances behave especially in devices. Hopefully this helps Happy Tweening!
  7. GreenSock
    No, that is not the correct way to do it. You can't just add normalize: true in a ScrollTrigger object. It's not a per-ScrollTrigger setting. It's a global setting. Here is the correct way, as the docs indicate: ScrollTrigger.normalizeScroll(true); Does that help?
  8. Toso
    no >>> normalize: true yes >>>> ScrollTrigger.normalizeScroll(true) ss @stefanobartoletti i get it wrong but leaving my wrong answer in case anyone else misunderstood https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()/
  9. ektorp
    Hi @Rodrigo - Thanks again for your assistance with this issue. I've made some updates to have the element animate and ease into place. As you mousemove and mouseleave, everything moves nice and smooth. The only outstanding issue is on the mousemove event. On the initial mousemove event, the ball nicely animates into place. And this continues as you mousemove and mouseleave the ball. But once you come back to it and mousemove it again, the ball just jumps into place without the animation or easing. The user experience is not ideal. Is this an issue you can assist with? Again, your help and assistance is greatly appreciated. GSAP Clamp Mouse Follow (codepen.io)
  10. Webit Interactive
    @GreenSock There does not seem a way to put it so that it actually scrolls up rather than down as shown in the initial use case here: Using "clamp(0.5)" versus "clamp(-0.5)" versus "clamp(1.5)" versus "clamp(-1.5)" you can compare the issue in your forked codepen. https://codepen.io/mpare/pen/XWYKOMM I also feel like there must be something with the calculations for the translating. I may have things backwards for the way ScrollSmoother uses it for its logic, but shouldn't a positive data-speed like "2" make the element go up faster rather than down faster? Since we are scrolling down, an element with a higher data-speed should behave as though every pixel scrolled down increases it's speed going out from the top and a value below 1 should mean that it scrolls slower than than a normal item and therefore stays in the viewport longer. However, the logic can also be reversed and used as the way it is at the moment, but should allow for elements to also scroll up faster rather than scrolling down.
  11. ashura
    So I'm not really having a trouble but I have a case here wherein the Flip only works in ScrollTrigger.create() attribute of "animation" works for lip but in gsap.timeline({ scrollTrigger: { animate:flip, } ) ... something like that...and this is sample in ScrollTrigger.create() I am talking about. const state = Flip.getState(midLayerRef.current,{ }); showMovieRef.current.appendChild(midLayerRef.current); const flip = Flip.from(state, { absolute: true, }); ScrollTrigger.create({ trigger: ".banner", scrub: true, start: "clamp(+=40% center)", endTrigger: '.showInside', // end: "clamp(+=100% 100%)", end: () => { return "clamp(+=150% 100%)" }, pin:true, animation: flip, onEnterBack:() => { console.log('leave') }, onLeaveBack:() => { console.log('enter') }, onLeave: ({progress, direction, isActive}) => { showText.play() } }); I'm not asking for anything issues..just asking what makes the different of animate and animation in different ScrollTrigger style thanks in advance.
  12. ektorp
    @alig01 @Rodrigo Thank you both for your input and feedback. The getBoundingClientRect and GSAP’s clamp utility were both key points for this solution. Thank you so much for your help and assistance.
  13. Tulip781
    Hi Ryan, Thank you for your guidance; it's been really helpful and has sparked an idea for my project. I'm currently facing a challenge with maintaining consistent scrolling speeds in a dynamically changing list. To provide some context, I have developed a function that clones text blocks vertically to fill the screen. Each time the list is filtered, I destroy and recreate the vertical loop to adjust for the new content. The text blocks are within a parent DIV, which I initially tried to animate using the scroll loop function. I've realized that for seamless scrolling, I need at least two instances of my list, so I've cloned this full-height DIV twice. This setup now works as intended. However, an issue arises when I filter the list: the overall height of the list changes to fit the different text blocks off-screen, which inadvertently alters the scrolling speed. Is there a way I can modify the function to normalize the scrolling speeds in relation to the varying heights of the elements? Once I resolve this, my next step is to implement intersection observers and manage them through the onChange callback in the timeline. Any assistance you can provide on this matter would be greatly appreciated. Thank you for your help.
  14. mvaneijgen
    Hi @Aiysen welcome to the forum! It's really hard to understand what you're trying to do without seeing a minimal demo. What sprang to mind are the GSAP util functions (https://greensock.com/docs/v3/GSAP/gsap.utils), which are a set of amazing functions. For instance you could use .clamp() to clamp some value between two numbers. See the docs page (https://greensock.com/docs/v3/GSAP/UtilityMethods/clamp()) gsap.utils.clamp(0, 100, 105); // returns 100 If you feed 105 to this function it will clamp it to 100. You could do something like this to have your value be maximum of 100 and a minimum of 0. Hope it helps and happy tweening! Be sure to include a minimal demo next time, so that we can better understand your questions a thus better help you. const myClamp = gsap.utils.clamp(0, 100); gsap.to(item,{ x: myClamp(myValue), y: myClamp(myOtherValue), })
  15. Zhiyi Zeng
    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.
  16. Mendieta
    @noahtrotman I'm a bit late for this, almost a year late. I coded Francisca's portfolio. I will explain how it was built. I used ScrollTrigger+SmoothScroller; the Observer plugin did not exist at the time. - I created a CSS invisible layout; it's full screen and has a div for each element on the slider, the div is also fullscreen. I use the usual technique for infinite scroll with ScrollTrigger. - I have a separate div, outside of the scroll container, with the slider images; they are sized with the aspect ratio and size of the viewport. - I synchronize the position of the "fake" divs to the image slider; I get the position percentage-wise within the viewport and then use that on the image slider, text slider, etc. - The slider images are not exactly animated diagonally; they have anchor points, kind of like a bezier. [ {x, y, rotation}, {x, y, rotation}, {x,y, rotation}, {x, y, rotation}, {x,y,rotation} ]. From left to right, bottom offscreen, bottom edge, center, top edge, top offscreen. I use the percentage to animate through the bezier - I use different lerping values on each thing; slider images have a different lerp than for example line 1 of the title, line 2 has a different value, the number on line 1 a different one, and so on. - The scrollbar is hidden with CSS - I have several canvases to handle the masks on the texts and the color shift on the texts, too. - Everything is synced to that "fake" divs scrolling with ScrollTrigger. - When clicking on the prev/next image, left or right keyboard arrow, I just scrollTo to the desired "fake" div within the scroll. This is one approach, another one could be something like this: https://tympanus.net/codrops/2021/02/23/creating-an-infinite-circular-gallery-using-webgl-with-ogl-and-glsl-shaders/
  17. SergiArias
    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!!
  18. gmullinix
    Got this working for two different scenarios I often run into. I'm happy with the solve for #1, but would appreciate some eyes on my solve for #2 Scenario #1 --------------------- Problem: Div height changes because of media query Solution: Swap start value at breakpoint using MatchMedia In this example, the pages are full height above 769px but swap to height: auto for mobile. Since there is a clear pixel value for the breakpoint, I used Match Media contexts to change my start value. Seems pretty straightforward and easy to code. 👍🏻 https://codepen.io/gem0303/pen/LYqNmJJ Scenario #2 --------------------- Problem: Div height changes because translated text is different lengths Solution: Start function checks the height of the div and returns different start point if div is too short Some context on this example: we create content that is translated into 20+ languages. Some languages have very long translations (German, Russian) while others are quite short (symbol languages like Japanese and Korean). This means we occasionally run into short languages not triggering start values depending on layout and/or screen size. We typically avoid coding custom animations on a per-language basis because we build tons of these. In my solution, I wrote a function that checks the div height against the window height and returns a different start value if needed. Haven't tested thoroughly but seems to be working ok. Thoughts? I couldn't figure out how "clamp()" would help me in this instance (though the video linked by @mvaneijgen was excellent, thank you for including it). https://codepen.io/gem0303/pen/LYqNrxo I envisioned the Scrolltrigger would be watching both of the start values and fire when it hits either/any of them. Subsequent hits would just be ignored.
  19. GreenSock
    Yep, I think @mvaneijgen is right - the existing API should allow you to accomplish this, but if you're struggling please just post a minimal demo and we'd be happy to offer some advice once we see it in context. Might a simple "clamp()" solve things for you? I'd be reluctant to have an API where you can define multiple start values like that because it seems like it could lend itself to confusion. Logically, it's impossible to have multiple start values but you seem to be proposing that it'd only use the 2nd one if the first one is beyond the edges of the scrollable area...is that right? Anyway, once we see a minimal demo I'm sure it'll become more clear to us (if you still need help).
  20. mvaneijgen
    Hi @gmullinix I think this is the most simple solution, have you seen the gsap.matchMedia() https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/ Check out this demo. https://codepen.io/GreenSock/pen/KKoMpMv?editors=0010 Next to that, did you know you can now use clamp() in your start values, check out the fowling video! Hope it helps and happy tweening!
  21. kobracode
    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?
  22. Matevz
    Hi, im having big issues on safari browsers with scroll and scroll trigger: https://clou.agency/ works perfectly in Chrome. the page is laging and resizing when u scroll on mobile.. gsap.registerPlugin(ScrollTrigger, ScrollSmoother); // normalize scroll behavior ScrollTrigger.normalizeScroll(true); // create a ScrollSmoother instance let smoother = ScrollSmoother.create({ smooth: 3, effects: true, smoothTouch: 0.2 }); Where can i start to resolve this u isuess?
  23. tailbreezy
    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?
  24. ashura
    Thanks buddy @daniel.mt but I already got fixed it. It seems its not possible to separate each item and make a scrollTrigger for them so it needs only one parent containing two 100vh to make it possible. const anim = () => { flipCtx && flipCtx.revert(); wrapperRef.current.appendChild(midLayerRef.current); flipCtx = gsap.context(() => { const state = Flip.getState(midLayerRef.current,{ }); showMovieRef.current.appendChild(midLayerRef.current); const flip = Flip.from(state, {absolute: true }); ScrollTrigger.create({ trigger: ".banner", scrub: true, start: "clamp(+=50% center)", endTrigger: '.showcases', end: "clamp(+=200% bottom)", pin:true, markers:true, animation: flip, }); }); } useEffect(() => { if (animState2) { anim() } },[animState2]) return ( <div className='anim2-component'> <section className="banner"> <div className="wrapper" ref={wrapperRef}> <div className="layer lf"> <h1> ANIME </h1> </div> <div className="mid-layer" ref={midLayerRef}> <img src="./products/OshiB.jpg" alt="" /> </div> <div className="layer rt"> <h1> ANIME </h1> </div> </div> <section className="showcases"> <div className="showMovie" ref={showMovieRef}> </div> </section> </section> </div> ) Which is now this is the modification..and its easy more to transition the Flip lol.
  25. RLM
    Hi, Sorry earlier I wasn't able to showcase what problem I have, but now I can share it properly. The misalignment of the laptop and the video with respect to the screen, that you said earlier, is maybe a feature or a bug in sandbox. ( Please to preview the app, open the preview of the website on a new tab.) To fix that so that we can see the images & videos aligned properly with the viewport, we need to inspect the app running on the localhost/preview in sandbox and then we need to click ->"toggle device toolbar". After that select the dimensions as Responsive and stretch the viewport to the right. Then just zoom out a bit and we can see that everything is aligned. Maybe BTS, sandbox do some changes in the resolution. Now that this is fixed. Following is the link to the code --> https://codesandbox.io/p/sandbox/sharp-sutherland-vcjvnw?welcome=true The code is in the file --> src/components/intro/index.jsx As you said, I should put ScrollTrigger configurations inside a Timeline, but when I am doing it, let tl = gsap.timeline({ scrollTrigger: { trigger: hivEl, markers: true, start: "clamp(top center)", end: () => `clamp(bottom+=${mbEl.height * 8} top)`, onEnter: () => { mbEl.style.top = "0px"; }, onEnterBack: () => { mbEl.style.top = "0px"; }, scrub: 1, pin: mbEl } }); tl.fromTo( mbEl, { scale: 1 }, { scale: 0.75, } ); all I am getting is a blank screen. Can you help me why am I getting a blank screen?
2
3
4
...
15
Page 3 of 15  
×
×
  • Create New...