Jump to content
GreenSock

PointC last won the day on June 18

PointC had the most liked content!

PointC

Moderators
  • Posts

    4,959
  • Joined

  • Last visited

  • Days Won

    400

Posts posted by PointC

  1. 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.

    :)

     

    • Like 1
  2. 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.

  3. 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.

  4. 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.

    See the Pen 1b01743fc6aa3e078c7d3cd2937967f6 by PointC (@PointC) on CodePen

     

    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.

    :)

     

    • Like 2
  5. 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.

    :)

     

    • Like 1
  6. 1 hour ago, Volt 22 said:

    I know close to nothing about SVGs

    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.

     

    See the Pen xxYBPYP by PointC (@PointC) on CodePen

     

    Happy tweening.

    :)

     

    • Like 3
  7. 11 hours ago, Ves said:

    We multiply by 3, because we want to show 3 items in a time.

    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.

    :)

     

    • Like 2
  8. 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.

    :)

     

    • Like 1
  9. 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;
    }

     

×