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

Rodrigo last won the day on March 27

Rodrigo had the most liked content!

About Rodrigo

Profile Information

  • Location
    Santiago - Chile

Recent Profile Visitors

41,373 profile views
  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!
×
×
  • Create New...