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

Community Answers

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

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

  4. 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.
    https://www.motiontricks.com/
     
    Happy tweening.

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

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

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

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

     
     
     
  12. 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.
     
  13. 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.
    https://www.motiontricks.com/cut-your-path-start-points-in-adobe-illustrator/
     
    If you ever have any doubt about the start point or path direction, you can add an arrowhead to check. More info.
    https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/
     
    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.

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

     
  15. 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.
    https://greensock.com/docs/v3/GSAP/Tween/invalidate()
     
    If that doesn't help, an updated demo would be great. Thanks.

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

  17. 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
     
     
  18. 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.

     
  19. PointC's post in Observer ignoring "ignore" parameter? was marked as the answer   
    I'm not 100% sure as I didn't build that demo, but all the sections are stacked on top of each other so this may be a target/z-index issue. If you add the .ignore class to the header, you see it is indeed ignored.
     
    Here's another simple example where I've told the Observer to ignore the .green and .orange targets.

    See the Pen cd77c0fbf45bc990d3baf4213529e43f by PointC (@PointC) on CodePen
     
    You can see that the ignore works exactly as expected. I didn't have much time to dive too deep into your forked demo to see the exact reason, but maybe @GreenSock can clarify a little bit.
     
    Happy tweening.

  20. PointC's post in Distorting a square (SVG) using draggable? was marked as the answer   
    Hi @Consequence 
     
    Thanks for being a Club member. We really appreciate it. 🎉
     
    I think I'd wire up a polygon to some Draggables and do something like this. The width and height are dynamic so all you need to do is adjust the w/h variables to your liking. 
     
    See the Pen zYRpBbm by PointC (@PointC) on CodePen

     
    Hopefully that helps. Happy tweening.

  21. PointC's post in Animate text color according to moving background (container) animation was marked as the answer   
    If you don't want to use two elements, it sounds like a good use case for CSS variables.
     

    See the Pen ZErvbPR by PointC (@PointC) on CodePen
     
    Happy tweening.
     
     
  22. PointC's post in Lines animation like lucid air was marked as the answer   
    This was just discussed and built in this thread.
     
    Happy tweening.

     
  23. PointC's post in ScrollTrigger: animating SVG element between sections was marked as the answer   
    So you want the blue target to just follow the sections up and down. Like this maybe?

    See the Pen 5fc0b34c5556a20c14682af588926e38 by PointC (@PointC) on CodePen
     
    Does that help?
  24. PointC's post in GSAP ScrollTrigger makes div disappear was marked as the answer   
    Hi @Tedev 
     
    Welcome to the forum.
     
    I'm pretty sure that's caused by the ScrollTrigger tween setting its starting value to zero on that first element in the from 0 opacity tween. So, you reverse the ScrollTrigger tween and it goes back to zero. The other three elements in that group of four have their starting opacity set to 0. If you flip one of the blue panels with the red one, you'll see the same thing happen to the first blue panel.
     
    Fixes: 
    Remove the opacity tween in your ScrollTrigger because it's not doing anything anyway. Switch the order of the tweens  Call a function containing the ScrollTrigger tween when the first opacity tween completes so the starting values are correct.  
    Here's a fork with #2.

    See the Pen 40f3539166669a535bddf0860dc34ace by PointC (@PointC) on CodePen
     
    Happy tweening and welcome aboard.

     
×