Jump to content
Search Community

All Activity

This stream auto-updates

  1. Past hour
  2. Today
  3. I'm trying to create a Background colour changing animation based on data attributes from a section. I have the base logic in place however it doesn't seem to work backwards. The idea is that as a section scrolls into view the background colour would change and stay like that until the endTrigger. Although i tried doing this with a single scrollTrigger but couldn't quite get it right, However this method kind of works going forwards but it's wrong backwards. The logic isn't quite right but if anyone could point me in the correct direction that would be appreciated!
  4. Hello @jo85 I have experience with GSAP and Webflow. Please connect with me for further discussion. Waiting for your reply. Regards Ian
  5. For the text I would use SplitText https://gsap.com/docs/v3/Plugins/SplitText/ and then stagger each the letters Keep in mind all ScrollTrigger is doing is animating your animation on scroll, so just build the animation and don't worry about ScrollTrigger at all. I've written a guide how to create card stacking effects and the logic can be applied here 1 on 1, you just have more elements that stack, so before doing anything you first want to lay everything out with CSS. See the post below and a demo from the post that animates a clipPath, which is also part of the animation I would suggest just start building in Codepen and first do all the CSS, then try to animate some things and only when you're done start thinking about ScrollTrigger. Pro tip in between fork your work, so you have versions on which you can fall back. When you get stuck post back here with a demo and one particular question and some one here will be sure to point you in the right direction. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/GReQYBr
  6. Hello there Greetings!!! I've reviewed your requirements and I'm eager to help you with the work. Please reach out using the contact details provided below to delve deeper into this discussion. E- alanjones(dot)tis(at)gmail(dot)com Skype - live:.cid.6a62b7b34d1aa390 Looking forward to hearing from you Regards Alan Jones
  7. hello, i need support from a gsap expert for two website elements (slider & scrolltriggered sections). the implementation and construction of the html framework should be done in webflow. who has the time and inclination?
  8. hello dear community, i have seen this scroll triggered slider element on this website: https://pave.ai/, attached as a screenshot: i know i can't expect anyone here to give me the exact code, but maybe you have some hints / keywords on how i could approach building this element. for example, how do i achieve the text change? thanks for any advice. best regards from berlin
  9. You're making one of the common ScrollTrigger mistakes - nesting ScrollTriggers inside of a timeline. That can't logically work because you can't have the parent timeline AND the scroll position both control the same playhead(s), as they could be going in different directions. So either separate out each tween into its own individual tween that has a ScrollTrigger on it, OR put your tweens into a timeline that has a ScrollTrigger applied to that timeline. As for once: true, you could do something like this instead: onLeave: self => { let max = ScrollTrigger.maxScroll(window), // record maximum scroll amount, and the current scroll position scroll = self.scroll(); self.kill(true, true); self.scroll(scroll - (max - ScrollTrigger.maxScroll(window))); // adjust the scroll based on how much was lost when self.kill() was called. } https://codepen.io/GreenSock/pen/jORLdmy?editors=0010 (I didn't fix all your nested ScrollTriggers - you'll need to work through those).
  10. scrolltrigger use pin and once, but pin-spacer cause padding space when scroll back I want it run once , when scroll back it show self.progress(1) without pin-spacer how can i do~~ pls help~~
  11. No, sorry. But hopefully my description gets you going in the right direction. I'm not sure if it'd be any easier or work the way you want, but another idea is to use DrawSVGPlugin to basically draw a super fat orange stroke, and see if you can do a blur effect on the end of it (you'd likely need to clip/mask the other end to keep that sharp). If you need more help, we do offer paid consulting services which you can contact us about. 👍 Good luck with the project, and thanks for being a Club GSAP member! 💚
  12. That's exactly why - you put it outside the wrapper. Why would you do that? If your goal is to have a position: fixed element (not pinned with ScrollTrigger), that's fine to have it outside the wrapper. Otherwise, it should be inside. https://codepen.io/GreenSock/pen/KKYvbRw
  13. I am facing weird issue while pinning the element outside of the smooth scroll wrapper. The pinned elements gets scrolled along while scrolling and comes back to the original place after some time. https://codepen.io/Limboo/pen/xxeLQQw
  14. Even though there was no demo, only lines of code, you still helped, and it worked very well in my case. I am very grateful for this. Have a good day my brothers!!!
  15. The second one sounds quite complex, but probably closer to what I am after. As I'm pretty new to GSAP, have you seen any examples of this method? Cheers!
  16. Is that orange "fill" supposed to be gradated like that (feathered/blurred)? That makes things more difficult, but not impossible. I mean in its most simple form, you could place pie-cut segments of orange along the circle, and just animate the opacity in a staggered fashion. If you need it to be gradated in a totally smooth way, you might need to make a .png that's basically HALF of the circle. Make a mask of the opposite half, and animate the rotation of that .png so that it comes into that mask on the other half. Then when that reaches 180 degrees (half the circle), pop that out of the mask and keep going to 360 degrees while you do exactly the same thing with another .png that's half the circle but fully opaque orange. Rinse and repeat until that first one gets to 540 degrees and the other two half-circle .png files are filling the circle. Good luck!
  17. Yesterday
  18. I wonder if some kind soul could help me with the following ask. We have a segmented circle (ask1.png attached) When the user clicks on a segment, an orange wash fills the circle up in an anti-clockwise animation (ask2.png attached) until the whole circle is orange, when some text will appear (ask3.png). I have been racking my brains trying to work out how to approach this, so any help would be gratefully received!
  19. thank you , it worked like a charm 🙏 gonna stick it into Nextjs now 🫡
  20. This is the simplest thing I can think of: https://codepen.io/GreenSock/pen/NWmvBLB As you can see is not a lot of effort to get it done. Probably the CSS and other SVG stuff could be a bit more work, but that is not really a GSAP related issue. Hopefully this helps. Happy Tweening!
  21. Yeah is right there at the top of your log, splitScreenSlideshow is actually a collection of DOM nodes and not a single DOM node. Most likely you're using document.querySelectorAll()when you should be using document.querySelector() instead. Hopefully this helps. Happy Tweening!
  22. @Rodrigo I've implemented the .toggle strategy and it works great in codepen, however when placing on my development environment there is an error "Cannot read properties of undefined (reading 'toggle'). I was able to log the container, array of colors and the index so i'm not sure what is missing here. Anything I'm missing here? Thank you in advance!
  23. Yeah, that's because you're listening to the window's "scroll" event, but ScrollSmoother gradually applies that. So you're using stale values. Just set up an onUpdate event handler on the ScrollSmoother, and for maximum performance you can leverage a cache boolean to only trigger updates when absolutely necessary: https://codepen.io/GreenSock/pen/RwOZBjp?editors=0010 Is that what you're looking for?
  24. Hi @VishnuNaatha and welcome to the GSAP Forums! The latest version of the Lottie helper function has an endFrameOffset property that allows you to tell ScrollTrigger the last frame it should scrub the lottie to, then you can use an onLeave callback to play the lottie animation: const animation = LottieScrollTrigger({ target: container, path: "src/assets/Home_Hero.json", speed: "medium", scrub: 1, // seconds it takes for the playhead to "catch up" endFrameOffset: 100, onLeave: () => { gsap.delayedCall(1, () => animation.play()); }, }); You have to add that delayed call there in order to accommodate for the scrub time. Keep in mind that the helper function is calling lottie's goToAndStop on every update, so if you have any scrub that is not true, you have to wait until the lottie helper is completed in order to play the animation, otherwise it will be stopped. https://gsap.com/docs/v3/HelperFunctions/helpers/LottieScrollTrigger Here is a fork of your demo: https://codesandbox.io/p/devbox/animation-forked-fs69y4?file=%2Fsrc%2Futility%2FheroAnimation.js%3A65%2C1-75%2C4 Hopefully this helps. Happy Tweening!
  25. Hi everyone, I hope you're all doing great! I'm creating a magnet effect for the cursor, and I've run into a small issue. Everything works perfectly until I add ScrollSmoother to the mix. The issue arises when I try to calculate the bounding rectangles of the buttons (`btns`). It seems that the calculations go wrong for buttons that are not initially within the viewport. I suspect that this discrepancy might be due to the way the `getBoundingClientRect` function captures the positions of the buttons before the scrolling comes to a complete stop. you can comment the smoother part and everything will work fine Thanks in advance for your help.
  26. Hello GSAP, I'm working on implementing an animation using Lottie and GSAP within an Astro project. My goal is to have the animation play on scroll, where the scroll controls the animation progress. However, when the animation reaches approximately 30 frames, I want the animation to not be scrubbed but it should play on on it's own and when it ends it should loop only the latter half of the animation. Could you please provide guidance on how to achieve this functionality using GSAP and Lottie within an Astro project? Here is a sandbox link to what I have tried till now: https://codesandbox.io/p/devbox/animation-85thrt
  27. Thanks for the help! Combined with a debouncer, this is exactly what I need. Just to clarify, this isn't a concern when animating percentages, such as 0% height to 100% height? The pixel value of an auto height is recorded for fast interpolation whereas a percentage based animations interpolate between the percentage values?
  1. Load more activity
×
×
  • Create New...