Jump to content

PointC last won the day on June 18

PointC had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by PointC

  1. I'm not really sure what the problem is there, but I just wanted to point out that most of the time, using CSS variables is a much easier way to handle pseudo elements. No CSSRule plugin required. Here's a basic wired-up example. https://codepen.io/PointC/pen/rNpXXWq Hopefully that helps. Happy tweening.
  2. Yes, it's a member plugin. https://greensock.com/club/ Happy tweening.
  3. Use DrawSVG. https://codepen.io/PointC/pen/ExQJPRd/8d978de955d47404422a3c3037dab2ed
  4. I would think a simple stagger from a "random" start point would work just fine. Unless I'm missing something. https://codepen.io/PointC/pen/OJQGyZq/7ba0001b0a0436bece4757570b8b52ca Happy tweening.
  5. What are you trying to randomize? Duration, delay, repeatDelay, level of opacity, repeat count? I'm just not sure what the desired outcome is here. Any more info would be helpful. Thanks.
  6. Hi @Lollibomber Welcome to the forum and thanks for being a Club member. 🎉 I don't think that will work. @GreenSock will correct me if I'm wrong but I believe the Flip plugin is only for CSS properties. You can certainly set that attribute with GSAP and the Attr plugin. MDN docs does list preserveAspectRatio as animatable, but in my experiments, using the SVG built-in <animate> element produces a result that is no different than setting it with GSAP. You can animate the viewBox with GSAP if you like. Happy tweening and welcome aboard.
  7. Of course: Observer 🤦‍♂️ I still don't have the muscle (or brain) memory to reach for that one. Just my two cent opinion from a user perspective but that lucid site always feels odd to me. Like my mouse wheel is slipping or something. You get used to your wheel taking you a certain distance down the page and now you have to spin it twice as much. Again just my 2 cents though. Happy tweening.
  8. I guess you could do something like this: document.addEventListener("wheel", function (e) { e.preventDefault(); gsap.to(window, { scrollTo: "+=" + e.deltaY / 2 }); }); Though I'm not sure how well that would work with ScrollSmoother as it has the fixed wrapper and scrolls the inner content.
  9. Looks good. Use your new powers responsibly. Happy tweening.
  10. Welcome to the forum I'm not really sure what's going on with all your JS, but here's a simplified fork of your pen with a blur filter scrubbed with ScrollTrigger. https://codepen.io/PointC/pen/QWQoxZz/3e7e8e609e92cf29af7b0ea4841049a5 Simplified demos are greatly appreciated with questions. Happy tweening.
  11. Hi @klyvoon Welcome to the forum and thanks for joining Club GreenSock. 🎉 The issue here is an empty clip-path. If you want the yellow morph to reveal text, you'll need to use a duplicate path in the clip-path. I've forked your pen and just used one path to show you how to do it. https://codepen.io/PointC/pen/ExQMRba/1b01743fc6aa3e078c7d3cd2937967f6 A few other things: I'd recommend updating to the GSAP3 syntax. Stagger is a bit different now so be sure to check out that difference. Your pen was loading the latest GSAP, but also a really old TweenMax file. (could cause problems) Hopefully that gets you morphing. If you have other GSAP questions, let us know and we'll get you sorted out. Happy tweening and welcome aboard.
  12. Hi @WolfLTC Welcome to the forum and thanks for being a Club member. 🎉 Are you referring to how far the page scrolls on each mousewheel on that site? If so, I'm not 100% sure, but I'd think you'd need to intercept the wheel event and preventDefault. Then scroll the page as far as you'd like. Happy tweening and welcome aboard.
  13. Time to learn then. This is how I'd set it up. A couple big circles and eight smaller ones. Using svgOrigin we can rotate the small ones into place and use drawSVG to animate the path. This should get you started. https://codepen.io/PointC/pen/xxYBPYP Happy tweening.
  14. You should create your timeline outside of your click handler. All you're doing right now is adding tweens on each click and creating a longer and longer timeline.
  15. Exactly. You wouldn't need to do it with JS. You could also just set a height for the <li> elements and manually set a height for the <ul> in your CSS. The trialWarn:false thing is just for CodePen so you don't see any warnings in the console. Nothing at all to do with the animations. Happy tweening.
  16. Is there any reason you're not using SVG? That would be quite easy with DrawSVG. I'd also recommend using ScrollSmoother. You're a Club member so you already have access to all those awesome plugins. Happy tweening.
  17. Hi @Ves Welcome to the forum. I think I'd wire this up a bit differently. I'd create a timeline and scrub through it rather than add individual triggers to each element. Something like this. https://codepen.io/PointC/pen/BaYbaNb Hopefully that helps. Happy tweening and welcome aboard.
  18. PS I should also mention that our own @Carl is doing a whole summer of SVG training thing. Check out his tweets and website. Here's one showing the basics of Boxy SVG.
  19. A few examples of cloning your target and putting it on a MotionPath. https://codepen.io/PointC/pen/gOoKdOR https://codepen.io/PointC/pen/ExVzqdm https://codepen.io/PointC/pen/pojmBKJ And for simple dashes, you can animate the strokeDashoffset https://codepen.io/PointC/pen/YzYvLqN Good luck and happy tweening.
  20. This thread can probably help you.
  21. Okay, now I follow. Yeah - SplitText won't be the answer here. I'd just set it up as one timeline, use the parent container as a trigger and set scrub to true. https://codepen.io/PointC/pen/MWQLOYy/d0c1bbfdfaf738f29d61540e2eef6e19 Happy tweening.
  22. Isn't that what your original demo is doing? Each <li> is triggering a color change. I don't follow your desired outcome. If you want the <li> elements to be on individual lines, you'll need to change your CSS and get rid of the display:inline. ul#hometext li { /* display:inline; */ font-size:80px; }
  23. Hi @Jessiu Welcome to the forum. Sounds like you're looking for the SplitTextPlugin. That would allow you to split the text into lines and set up a ScrollTrigger for each one. The plugin is a perk for Club GreenSock members, but you can try it on CodePen for free. https://codepen.io/PointC/pen/RwQvZzp/462fb94d7a45cc5239461a133c8c6211 Hopefully that helps. Happy tweening and welcome aboard.
  24. I think @Aizy is referring to the updated pen in which scale has been used rather than scaleX and/or scaleY. @Aizy see how @SteveS has used a combination of scaleY and then scaleX to achieve the desired outcome? You'll also want to remove that scale(0) in your CSS. Happy tweening.