Jump to content
Search Community

Rodrigo last won the day on March 27

Rodrigo had the most liked content!

Rodrigo

Administrators
  • Posts

    6,318
  • Joined

  • Last visited

  • Days Won

    274

Everything posted by Rodrigo

  1. 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!
  2. 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!
  3. 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!
  4. Hi, You should first try to create the animation without ScrollTrigger first, just forget about that and focus only on the animation. Keep in mind that ScrollTrigger, in this particular case, just updates the timeline's playhead position nothing more, so is better to get the animation correctly first. Basically what's happening there is just some fade in/out with a pinned section. Here is a simple demo but instead of animating on the Y axis on the right you have to repeat the animation on the left: https://codepen.io/GreenSock/pen/wvYVjvb Hopefully this get you started. Happy Tweening!
  5. Hi, On top of @mvaneijgen's great solution you could also use the onToggle callback from ScrollTrigger: onToggle Function - A callback for when the ScrollTrigger toggles from inactive to active or the other way around. This is typically when the scroll position moves past the "start" or "end" in either direction, but if it shoots past BOTH on the same tick, like if the user scrolls extremely fast, onToggle won't fire because the state hasn't changed. You can often use this one callback in the place of onEnter, onLeave, onEnterBack, and onLeaveBack by just checking the isActive property for toggling things. Here is a simple fork of your demo: https://codepen.io/GreenSock/pen/XWQaZdV Hopefully this helps. Happy Tweening!
  6. Hi, The demo has been updated with the silhouettes so is working as it should now: https://codepen.io/GreenSock/pen/PoqRZOB Happy Tweening!
  7. Hi @abhisec_tech and welcome to the GSAP Forums! This is not something that can be done just with GSAP, you'll need other tools. The main one is a WebGL rendering engine (PIXI or THREE) and then you can plug GSAP into the mix. Here are a few links: https://codepen.io/sbrl/pen/zNdqdd https://codepen.io/emoc11/pen/RqeRvY https://codepen.io/kesuiket/pen/gxoQEx https://threejs-journey.com/lessons/coffee-smoke-shader https://tympanus.net/codrops/2020/01/28/how-to-create-procedural-clouds-using-three-js-sprites/ https://en.threejs-university.com/2021/08/04/creating-a-smoke-effect-in-three-js/ Happy Tweening!
  8. Hi, Sorry about the difficulties but without a minimal demo there is not much we can do to help. On top of that we don't have the time resources to provide free general consulting or create something from scratch for our users. What you're trying to achieve is not the simplest thing to do, here are a few demos: https://codepen.io/osublake/pen/LYYJNmQ https://codepen.io/GreenSock/pen/MWPOQmo https://codepen.io/GreenSock/pen/MWqWvom Hopefully this helps. Happy Tweening!
  9. Hi, Sorry but I don't quite follow what's the issue here. For #1 the effect is already done in the first demo isn't it? What exactly are you asking about that? You can explore how to build Clip Path with this tool: https://bennettfeely.com/clippy/ Keep in mind that is better to have all the values in the property with the percentage unit in them even if the value is 0: gsap.to(element, { clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)", }); As for the second issue your path is drawn incomplete, if you remove all the stroke animations you'll see it, so that's working the way is supposed to. If you want to remove the border of the buttons just add border: none to the button class: .button { border: none; } Also position your SVG so it actually uses the entire area of the button element and position your path inside of it correctly as well. Finally we have the DrawSVG Plugin for things like this: https://gsap.com/docs/v3/Plugins/DrawSVGPlugin Happy Tweening!
  10. Yeah, this seems more related to the mask setup more than anything else. Check this thread @mvaneijgen (one of the superheroes here in the forums) made on the subject of masks: A quick google search returned these: https://fossheim.io/writing/posts/css-text-gradient/ https://medium.com/@mattkenefick/css-gradient-text-reveal-739e7fe36221 https://cssgradient.io/blog/css-gradient-text/ https://ishadeed.com/article/css-masking/ Hopefully this helps. Happy Tweening!
  11. Yeah I don't really get what's the issue TBH, but it seems mostly related to the CSS mask rather than GSAP. GSAP and ScrollTrigger are doing what they're supposed to. I would recommend you to get your masking working as expected first and then add GSAP to the mix, since that is working as expected. Maybe you could be more explicit and post a URL to a live sample that works the way you intend. Happy Tweening!
  12. Hi @MineTech and welcome to the GSAP Forums! The main issue here is that your end point is passed before the start point, so your animation is finished before it starts: See that the end marker has already passed the end point at the bottom of the viewport? I made a fork of your demo with some tweaks: https://codepen.io/GreenSock/pen/zYXdrGB Hopefully this helps. Happy Tweening!
  13. Hi, I just forked your second demo, removed all the code I suggested to remove and everything seems to keep working as expected after several resizes, I tried to resize as fast as I could, which is worth noticing that 99.99% of normal users don't do, just developers with an itch for unrealistic testing do that (nothing personal against neither you or other developers, just a personal opinion based on working on this area for over 13 years): https://codepen.io/GreenSock/pen/eYoEpPO From the ScrollTrigger docs: invalidateOnRefresh Boolean - If true, the animation associated with the ScrollTrigger will have its invalidate() method called whenever a refresh() occurs (typically on resize). This flushes out any internally-recorded starting values. https://gsap.com/docs/v3/GSAP/Tween/invalidate() Sometimes you need GSAP to record again the initial values of the element being animated and dump the previous ones, because the new screen size (since this is triggered on ScrollTrigger's refresh method) could change those values and GSAP instances are mostly read-only, so GSAP only records the initial and final values once and then iterates between them over a specific amount of time, one of the many micro optimizations that makes GSAP super performant. Hopefully this helps. Happy Tweening!
  14. Hi, Sorry to hear about the issues but I'm afraid I can't replicate the problem in neither demo, I resized both of them quite a few times and they keep working in the same way. Unfortunately in your first demo there is too much code (over 500 lines between CSS and JS) and we don't have the time resources to comb through all that. Also in the same first demo you're not including jquery and there are a lot of warnings that point to elements not being found by GSAP on the DOM, so clearly there are quite a few elements that are missing. In your second demo I saw this: // Function to refresh ScrollTrigger on resize function refreshScrollTrigger() { ScrollTrigger.refresh(); } // Event listener for window resize window.addEventListener("resize", refreshScrollTrigger); // Initialize ScrollTrigger ScrollTrigger.create(scrollTriggerConfig); // Initial setup refreshScrollTrigger(); There is no need to manually call ScrollTrigger.refresh(), especially if nothing in the ScrollTrigger instances depends on something changing after some time when the user resizes the screen. ScrollTrigger calls the refresh method automatically when the screen is resized and does it with a debounce mechanism for better performance. You might need to call that if some content is added/removed asynchronously and you need for ScrollTrigger to run it's calculations again, so except for the create() method everything else in that code block is not really necessary IMHO. As for the issue please be more specific about how it can be replicated and what exactly is happening or not happening. Finally you might want to check GSAP MatchMedia: https://gsap.com/docs/v3/GSAP/gsap.matchMedia() Happy Tweening!
  15. Hi @nav and welcome to the GSAP Forums! Yeah it seems that some images were lost at some point with the domain change (from greensock.com to gsap.com). Basically a placeholder with a silhouette was in front of each image. For now I forked that demo with a placeholder instead for each card so you can see the effect https://codepen.io/GreenSock/pen/PoqRZOB Happy Tweening!
  16. Hi @nzetala and welcome to the GSAP Forums! I just tested your demo in the latest chrome and firefox on Ubuntu 20 & 22 and I can't seem to reproduce the issue 🤷‍♂️ The right section with the pictures remains pinned regardless of how fast I scroll up and down. Maybe you can check the fastScrollEnd config option as @Carl explains here: https://gsap.com/blog/3-8/#preventoverlaps-and-fastscrollend Happy Tweening!
  17. Hi, Maybe something like this: https://codepen.io/GreenSock/pen/wvZqwyg Happy Tweening!
  18. Hi, @akapowl one of the forums superheroes created this nice demo using locomotive that you can check: https://codepen.io/akapowl/pen/wvJroYy Happy Tweening!
  19. Hi, In general filters are really bad for performance since they drain the life out of the hardware,so you have to be carefully about them: https://codepen.io/GreenSock/pen/ZEZygeO Here is another option that uses a different approach: https://codepen.io/dperuo/pen/XWdeoW Happy Tweening!
  20. Yep I see that but I can confirm that is totally unrelated to GSAP: https://codesandbox.io/p/sandbox/section-snapping-with-section-animation-gsap-forked-dnkkwq?file=%2Fsrc%2Fcomponents%2FTesting.js%3A14%2C25 That is a fork of your demo using CSS transitions and the result is the same. I'm afraid that this is more related to the combination of transforms and scroll-snap that is beyond my knowledge. I'll look into this by removing react from the equation and keep everything as simple as possible. You can post in Stackoverflow or something like that in order to see if you can find something as well, but I can't promise you much though since we have to keep this forums focused on GSAP related issues and use our time on that primarily. Happy Tweening!
  21. Hi @leandronn and welcome to the GSAP Forums! Indeed this doesn't seem related to GSAP IMO. I have no experience with CSS scroll-snap so I couldn't really tell you what's the issue. Maybe is related to the height of the element at the moment the scroll starts or maybe is something else, honestly I don't know, but GSAP is definitely not in control of that part so that is not something GSAP is mishandling something or anything of the sort and I don't know how that a simple animation translating an element on the Y axis could cause such behaviour. Maybe you could look into the Observer Plugin and drop scrolling altogether: https://gsap.com/docs/v3/Plugins/Observer/ Sorry I can't be of more assistance. Happy Tweening!
  22. Hi @Future Forms and welcome to the GSAP Forums! Unfortunately I'm unable to save/fork any changes made to your demo since it seems I need to install something that is not working here locally and I really don't know what exactly. Any chance you can create a Stackblitz demo from scratch and not from an existing repo? We understand that deploying from a repo makes things far easier on your end but is definitely not helping on ours. Also have you tried this without Lenis? Do the GSAP animations and ScrollTrigger instances work as expected? Another thing that caught my attention is this: onResize() { console.log(this.animations[0]); ScrollTrigger.refresh(true); console.log('progress: ', this.animations[0].scrollTrigger?.progress); this.animations[0].scrollTrigger?.refresh(); } Any particular reason for this? ScrollTrigger has it's own refresh cycle/pipe (for naming it someway) that is debounced for better performance that is triggered on each resize event, so there is no need for all this. Finally you can use GSAP Context in order to group all your GSAP animations and ScrollTrigger instances under that particular scope and revert them a single method, so there is no really need for this as well: public ngOnDestroy(): void { this.lenis.destroy(); this.animations.forEach(a => a.scrollTrigger?.kill()); ScrollTrigger.getAll().forEach(t => t.kill()); } https://gsap.com/docs/v3/GSAP/gsap.context() You can create a GSAP Context instance earlier in your component (like on the class constructor or in the view init method) and then just revert it: export class HomeComponent implements AfterViewInit, OnDestroy { @ViewChild('showreel') showreel?: ElementRef<HTMLVideoElement>; @HostListener('window:resize', ['$event']) constructor( private readonly destroy$: DestroyService, private readonly changeDetector: ChangeDetectorRef, ) {} ngAfterViewInit(): void { this.ctx = gsap.context(); } public ngOnDestroy(): void { this.ctx?.revert(); } } Hopefully this helps in someway. Happy Tweening!
  23. Hi @SDCO Development and welcome to the GSAP Forums! Is great to hear that you were able to fix the problem! Just a minor clarification, if you don't want any snapping in ScrollTrigger just omit the snap configuration option, no need to pass snap: false in your config: let variantAnim = gsap.timeline({ scrollTrigger: { trigger: hero, start: "top top+=95px", pin: true, duration: 1, scrub: true, pinSpacing: true, markers: true, } }) Finally thanks for being a GSAP Club member and supporting GSAP! Happy Tweening!
  24. Hi @PaulSorry and welcome to the GSAP Forums! Maybe something like this: https://codepen.io/GreenSock/pen/yLrXKxm Hopefully this helps. Happy Tweening!
  25. Everything just fine and normal in GreenSock tower 😂
×
×
  • Create New...