Jump to content
GreenSock

PointC last won the day on October 30 2022

PointC had the most liked content!

PointC

Moderators
  • Posts

    4,966
  • Joined

  • Last visited

  • Days Won

    401

Posts posted by PointC

  1. Probably easier to loop through and give each one its own timeline.

     

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

     

    I also used the GSAP utils.toArray method to select the <rect> targets. That way you don't need to manually create an array or give each one its own ID. You can add as many rectangles as you want and it'll still work as the delay is based on the length of the array. I added a few just for fun.

     

    Happy tweening.

    :)

     

    • Like 4
  2. 1. attr:{} is the attribute plugin. I'm more in the habit of specifically targeting attributes that way, but in this case, yes - simply using stroke without that wrapper will work just fine. Sometimes a property and an attribute may seem the same but they aren't. A rectangle for example has an x attribute. These 2 lines may appear the same but they are not. One will translate x:100 while the other targets the x attribute.

    .to("rect", {x:100})
    .to("rect", {attr:{x:100}})

    If you specifically want to target an attribute, use the attr:{} wrapper.

     

    2. You'll generally switch hyphenated properties to camelCase. So stroke-width becomes strokeWidth. If that's not to your liking you can also use the hyphenated version, but you'll need to use quotes. These two lines are effectively the same.

    .to("rect", {  "stroke-width": 40  })
    .to("rect", {  strokeWidth: 40  });

    3. You can use GSAP to set a gradient fill with no problem. That will work with or without the attr:{} wrapper.

    // add a fill this way
    gsap.set("rect", {attr:{fill:"url(#someGradient)"}})
    // inspect the element and you'll find this
    fill="url(#someGradient)"
    
    // add a fill this way
    gsap.set("rect", {fill:"url(#someGradient)"})
    // inspect the element and you'll find this
    style="fill: url("#someGradient");"

    4. I don't know that you could smoothly interpolate between a linear and radial gradient. A crossfade would probably be a better way to go.

    You can dynamically add stops with JS by creating the element and adding offset/color attributes, but since the gradient isn't rendered, I don't think it would refresh the changes.

     

    If you want to go from a couple stops to multiple stops, I'd probably add all the stops at the beginning and just set the color and offset the same on some of them so it will appear to only have two. You can then loop though and target any or all of the stops offsets/colors .

     

    I'd also add that animating gradients is pretty intensive so my recommendation would be to use it sparingly.

     

    Good luck.

    • Like 5
  3. You'll want a stroked path for that with a separate arrowhead element. The tricky bit with masks and motionPaths is that Firefox doesn't like them. To get around that you'll most likely need a proxy element that follows the path and set the position of the masked path to the proxy when the animation updates. Here's a quick example.

     

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

     

    Some additional reading.

    https://www.motiontricks.com/svg-calligraphy-handwriting-animation/

    https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/

    https://www.motiontricks.com/svg-masks-and-clippaths/

    https://www.motiontricks.com/svg-dashed-line-animation/

     

    Happy tweening.

    :)

    • Like 8
    • Thanks 1
  4. 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
  5. 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.

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

  7. 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
  8. 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
  9. 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
  10. 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
×