Jump to content

PointC last won the day on October 30 2022

PointC had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Community Answers

  1. PointC's post in GSAP set pause when unhover was marked as the answer   
    I'd probably add a small delay on the "reset" tween and set overwrite to true. Something like this:

    See the Pen 364a470e414172b8fbd6a7420de056f6 by PointC (@PointC) on CodePen
    More info about overwrite.
    Happy tweening.

  2. PointC's post in removeEventListener timeline was marked as the answer   
    I think that will only work if you assign the arrow function to a variable as removeEventListener requires a reference to the function.

    See the Pen 58144ad0414b9266b9556f00d0b0f91c by PointC (@PointC) on CodePen
  3. PointC's post in MorphSvg Rotational not working any help? was marked as the answer   
    You'll need to write with an object like this:
    tl.to(waveAC, {   morphSVG: {     shape: waveA,     type: "rotational",     origin: "20% 0%"   } }); Happy morphing.  
  4. PointC's post in SVG appendChild at specific childNode was marked as the answer   
    Clone and append certainly works. Depending on your needs, insertAdjacentElement() could also work. 
    theSVG.insertAdjacentElement("afterbegin", theAppendedItem); More info:
    Happy tweening.

  5. PointC's post in clearprops issue was marked as the answer   
    Please try this:
    onReverseComplete: function() { gsap.set(swatches[i], {clearProps: 'transform'}); },  
  6. PointC's post in Animated handwriting effect with complicated font (multiple masks and open paths) was marked as the answer   
    Anything is possible. Some fonts will require much more work and several masks to complete the effect. Whether that's worth all the extra time... 🤷‍♂️
    I have a tutorial here:
    See the Pen ba382ee79baa22bfd47028edd4e9247e by PointC (@PointC) on CodePen

    Hopefully that helps. Happy tweening.

  7. PointC's post in Scale circle to follow the shape size while rotating along the path was marked as the answer   
    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.

  8. PointC's post in Blob Morph using morph svg was marked as the answer   
    You'll need to up your filter width/height. I used 150% but you can set it to your liking.

    See the Pen 6ac6bf4810ef1c0892f473088e6c6a46 by PointC (@PointC) on CodePen
    But as @Rodrigo mentioned, I'd recommend restraint with that kind of animation when it's so large.
    Happy tweening.
  9. PointC's post in Trying draw svg arrow was marked as the answer   
    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.
    Happy tweening.

  10. PointC's post in Basic Connected Nodes was marked as the answer   
    FWIW - I'd probably try a custom random wiggle. I used that on my TP pen. Pay no attention to the Pixi related code. The wiggle stuff is all in the wiggle() function.

    See the Pen BaNVpWN by PointC (@PointC) on CodePen
    I also used something similar for all the little floaty shapes on the header of Motion Tricks.
    Happy tweening.

  11. PointC's post in Insert text inside SVG polygon was marked as the answer   
    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.

  12. PointC's post in Generate and Animate Arrow was marked as the answer   
    A few examples of cloning your target and putting it on a MotionPath.

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

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

    See the Pen pojmBKJ by PointC (@PointC) on CodePen
    And for simple dashes, you can animate the strokeDashoffset

    See the Pen YzYvLqN by PointC (@PointC) on CodePen
    Good luck and happy tweening.
  13. PointC's post in Any suggestions how to improve animation was marked as the answer   
    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.
    See the Pen BaYbaNb by PointC (@PointC) on CodePen

    Hopefully that helps. Happy tweening and welcome aboard.

  14. PointC's post in scrollTrigger start new item on same line was marked as the answer   
    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.

    See the Pen d0c1bbfdfaf738f29d61540e2eef6e19 by PointC (@PointC) on CodePen
    Happy tweening.
  15. PointC's post in Sticky Div on left column - Images changing on scroll in right Column was marked as the answer   
    If I understand the question correctly, I think you'd want to loop though your targets and add each to the timeline. This avoids manually adding a bunch of tweens like you have now. That way you can add as many divs as you like and it'll all still work perfectly. 

    See the Pen 5f9381468bbc6444d1ea73ff780a291a by PointC (@PointC) on CodePen
    Hopefully that helps. Happy tweening.
  16. PointC's post in How to smoothen behind animation was marked as the answer   
    Hi @mangobanan 
    Welcome to the forum.
    It sounds like you're looking for something like this?
    See the Pen ea1b2a2e3c17fb66429ff548629f39d5 by PointC (@PointC) on CodePen

    Adding a transform perspective on the containing element can add a lot. You'll also see I split the tween into two as I thought it worked better in this case. Other than that, it's just a little finessing with timing and eases.
    Happy tweening.

  17. PointC's post in Timeline restart has delay? was marked as the answer   
    That's because of your onComplete. You're adding tweens to the end of the timeline on each repeat so the timeline is getting longer and longer. I assume you just wanted something like this.

    See the Pen 9ad77250a0432d7baf26d1e377b56d5d by PointC (@PointC) on CodePen
    Hopefully that helps. Happy tweening.

  18. PointC's post in Rotation is jerky and too much pause before loop starts again was marked as the answer   
    We all are. Nobody knows it all. 
    FTR - I'd set this up in a single SVG and do something like this.
    See the Pen vYdVwVP by PointC (@PointC) on CodePen

    You can use a little Math to figure up the necessary radius of the SVG circle to fill the window. The only downside to this approach is that group 3 is actually above group 1 in the stacking order because SVGs don't have z-index. I think it's acceptable though as group 3 is almost faded out before group 1 restarts. At any rate, it should give you some ideas how to loop through the targets and create timelines.
    Happy tweening.
  19. PointC's post in MorphSVG: Trouble with finetuning was marked as the answer   
    Another pro tip for these kinds of morphs: change the start point of the path. The current start point is the upper left corner of the path. That's just the natural start when you create the element. Changing the start point is super easy with the scissors. I have a short tutorial about it.
    If you ever have any doubt about the start point or path direction, you can add an arrowhead to check. More info.
    Here's a screengrab of your project arrow and I've cut the path to start at the middle point of the arrow. I've also added an arrowhead in AI to double check.

    When we make those changes, it all works quite smoothly and should give you the desired results.

    See the Pen eYVKKVP by PointC (@PointC) on CodePen
    Happy morphing.

  20. PointC's post in .from() not working latest shockingly green was marked as the answer   
    Sounds like this here:
    Happy tweening.

  21. PointC's post in Issue with object resetting after timeline call was marked as the answer   
    Sounds like you're looking for the invalidate method.
    If that doesn't help, an updated demo would be great. Thanks.

  22. PointC's post in animating pseudo elements, ie ::after was marked as the answer   
    Hi @fcdobbs 
    Welcome to the forum and thanks for being a club member. 🎉
    It's almost always easier to use CSS variables rather then the CSSRuleplugin. Here's a fork with that change. 
    See the Pen 439cdf2bdddcefdfd533e9c2a852747b by PointC (@PointC) on CodePen

    You'd also want to avoid any CSS transitions on elements that will be animated with GSAP so you don't cause any conflicts.
    Happy tweening and welcome aboard.

  23. PointC's post in onComplete callback function question was marked as the answer   
    Okay, I think I understand. Is this what you need it to do?

    See the Pen ca4d3807850dfc1444f3273ce0365138 by PointC (@PointC) on CodePen
  24. PointC's post in Can I make my code in a more elegant way? was marked as the answer   
    Hi @soma  
    Here's a nice little function @GreenSock showed me when I was learning about the new quickTo. I was using a Draggable, but I've modified it a tiny bit to listen for your mousemove event.

    See the Pen LYQdRWa by PointC (@PointC) on CodePen
    Happy tweening.