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 Animating Arrays - Giving each item a different random value was marked as the answer   
    I think I'd probably put it into a function that called itself after each iteration. Maybe something like this.

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

  2. PointC's post in Morphing background gradient based on cursor position was marked as the answer   
    Hi @Durkan Group 
    Welcome to the forum and thanks for being a Club member.
    That would probably be a bit much for SVG to handle. Looks like that site is using some WebGL and PixiJS. 
    Happy tweening.

  3. PointC's post in Direction Aware on hover was marked as the answer   
    It took me a minute to see what was happening because the original TweenMax version was only showing 2 child nodes and the new GSAP3 version was showing 4 child nodes.


    Looking further I see the HTML in the original demo is all minified whereas the new version is all formatted and pretty so it's picking up the space as a text node I guess. If you use CodePen's "format HTML" feature on the original version, it will break too.
    Best  to use children or querySelector. 
    Happy tweening.

  4. PointC's post in Underlined Split Text? was marked as the answer   
    Hi @PixelDynamics 
    Welcome to the forum.
    I think I'd just add a pseudo-element to that div for the underline effect. Something like this.
    See the Pen aa65e5941028e17a675bfb20504f3867 by PointC (@PointC) on CodePen

    Hopefully that helps. Happy tweening and welcome aboard.

  5. PointC's post in Multiple SVG elements not hiding while using DrawSVG was marked as the answer   
    Hi @maddylobb 
    Welcome to the forum and thanks for being a Club member. We really appreciate the support.
    Looks like you're running into some .from() tweens and an immediateRender issue. My advice would be to set each path to drawSVG:0 and then then use .to() tweens. Here's that change.

    See the Pen e600a675c2e25009c37c3b7880e1d236 by PointC (@PointC) on CodePen
    An even easier approach with much less code would be to use a stagger. Here's that change.

    See the Pen fca02b2075d4760899cfec8efb693738 by PointC (@PointC) on CodePen
    Hopefully that helps. Happy tweening and welcome aboard.

  6. PointC's post in Continuous loop, billowing smoke effect was marked as the answer   
    I'm not quite sure I understood the desired results, but here's a fork with each path on its own timeline so it can restart before the others finish.

    See the Pen c73801de29974fd27cf355bba4a1905b by PointC (@PointC) on CodePen
    Is that what you meant?
    Happy tweening.

  7. PointC's post in At a loss of how to create this animation was marked as the answer   
    Hi @tjefe 
    Welcome to the forum.
    Masks and/or clipPaths would be the way to go here. The handwriting can easily be handled with the DrawSVG plugin.
    If your stroke width is the same width throughout the letters, you can animate the stroke itself. I have a couple tutorials about that.
    If the stroke width of the letters is variable, you'll want to mask them and use DrawSVG to animate the mask. Tutorials about that here:
    The trick is having a duplicate set of the letter paths in your mask (or clip-path) and animating the opacity of those paths once the lettering is done drawing itself. Then scale both groups of paths up at the same time to reveal the underlying image. Something like this:

    See the Pen zYdPXXa by PointC (@PointC) on CodePen
    Hopefully that gets you started. Happy tweening and welcome aboard.

    PS The DrawSVG plugin is a Club perk. More info:
  8. PointC's post in svg mask on a motion path? was marked as the answer   
    I don't think that grouping trick is gonna work in Firefox. I'd probably use the plain circle as a proxy like this. YMMV.
    See the Pen aa3b8fdadd3578ddd7844143265a4b92 by PointC (@PointC) on CodePen

  9. PointC's post in Transform Rotate changes to Matrix was marked as the answer   
    Seems okay to me with svgOrigin.

    See the Pen c6c91bf19db5378f18eac5c9f4ec7810 by PointC (@PointC) on CodePen
  10. PointC's post in Draggable return object to start position on end drag was marked as the answer   
    Hi @Tagliavia 
    This should work for you.
    Draggable.create("#yourTargetBox", {   onDragEnd: () => {     gsap.to(this.target, { x: 0, y: 0 });   } }); Happy tweening.

  11. PointC's post in Making an individual object repeat animation straight away. was marked as the answer   
    Hi @joelreed 
    Welcome to the forum.
    I'd probably do something like this.
    See the Pen 505bddb65f7a38b7cf4e482e5b41d709 by PointC (@PointC) on CodePen

    Happy tweening and welcome aboard.

  12. PointC's post in Stop one timeline and start another timeline was marked as the answer   
    Sure. An easy way would be to use .addPause() and then call for the other timeline to start playing. 
    There are also other ways to make it happen, but we'd need a minimal demo to see exactly what you're trying to do.
    Happy tweening.
  13. PointC's post in Split Text (Lines) on DIV with Paragraphs and Plain Text was marked as the answer   
    Welcome to the forum.
    Probably easiest to just wrap that first text in a <span>. Here's a fork of your pen with that option and I've also updated everything to GSAP3 syntax.
    See the Pen 39240edef3cb0cc070c789e9074aba45 by PointC (@PointC) on CodePen

    Happy tweening.

  14. PointC's post in how use gsap to scroll "nicely" from the bottom of the document to the top was marked as the answer   
    I think you're looking for the ScrollTo plugin.
    Happy tweening.

  15. PointC's post in I'm failing to draw an svg path by tweening the strokeDashoffset was marked as the answer   
    Since you're adding the ScrollTrigger to a timeline, you need to write it like this.
    gsap   .timeline({     scrollTrigger: {       trigger: "#action-inventory",       start: "center center",       toggleActions: "restart none none restart",       markers: true,       onEnter: () => console.log("enter"),       onLeave: () => console.log("leave"),       id: "act-inventory"     }   })   .to("#path-link-1", {     strokeDashoffset: 0,     duration: 3   }); Also take a look at drawSVG. It'll make your life easier.
    Happy tweening.

  16. PointC's post in MotionPath plugin not working as expected with react was marked as the answer   
    Hi @Sibteali Baqar
    Welcome to the forum.
    Looks like the problem is that your orbit path (#ellipse_1) is a filled path so the circle wouldn't animate along it as you expect. I've created a little demo using your SVG. The path you were using has no fill and a red stroke. See how the circle would orbit along the outside of that path? Probably not what you want here. I added a simple ellipse and converted it to a path to show you that everything is working correctly with the MotionPathPlugin. I'd think an actual ellipse would be the easiest method here.

    See the Pen 576a99f87ecf0a9aea713b8beb894f00 by PointC (@PointC) on CodePen
    Hopefully that helps.
    If you have additional questions, you'll need to create a demo. Just strip it down to the minimum like I did above and we'll be able to provide the most accurate and helpful answers.
    Happy tweening and welcome aboard.
  17. PointC's post in Is there a property defining a draggables center value? was marked as the answer   
    Maybe this would work for you.
    gsap.set(".drag", {   xPercent: -50,   yPercent: -50 }); Happy tweening.

  18. PointC's post in Infinite scrolling arrows was marked as the answer   
    I'll throw my two cents in too.
    You could just move the first arrow to a yPercent of -100 and then animate each one to a relative yPercent of +=100. 
    See the Pen 77a4780b72feb6ee6c0ab901c1511aea by PointC (@PointC) on CodePen

    Happy tweening.

  19. PointC's post in Responsive text column to Image was marked as the answer   
    There would be several ways to handle this animation, but I think an easy solution would be to use overflow:hidden on your parent container which is animated from a width of 0 and then animate the two child divs (image and text) accordingly. Here's a fork of your pen. I've added some padding to the child text group so it doesn't get clipped when the image appears. Hopefully this gets you started in the right direction. Happy tweening.

    See the Pen c021734385ff870f52b9c574cfef5703 by PointC (@PointC) on CodePen
  20. PointC's post in SplitText .revert() bounce. Possibly due to hyphens? was marked as the answer   
    Sounds similar to this:
  21. PointC's post in TextPlugin - 'Backspace' when going from more characters to fewer? was marked as the answer   
    On second thought I guess you could reverse the first tween and make this happen. Maybe something like this:

    See the Pen 7658a5f21db59cb183374e8fbd04e474 by PointC (@PointC) on CodePen
    If you want to go the SplitText route, we do have several 'typewriter' themed threads. Here are a couple.
    Hopefully that helps. Happy tweening.

  22. PointC's post in Reverse was marked as the answer   
    I'd be remiss if I didn't also mention that you can use GSAP's toArray() utility method too.
    const targets = gsap.utils.toArray(".nav-link"); targets.forEach((obj) => {   obj.addEventListener("click", (e) => {     e.preventDefault();     tl.reverse();   }); }); Happy tweening.

  23. PointC's post in problem with Drawsvg when doing it multiple times. was marked as the answer   
    Please try this on line 9.
      tl.from("#line",{duration:2, drawSVG:0, immediateRender:false},"<");  
  24. PointC's post in DrawSVG moving very fast was marked as the answer   
    Hi @trousersthecat 
    Welcome to the forum.
    Since you've specified the pathLength attribute as "1", you need to write your GSAP tween like this to go from 0 → 1.
    tl.fromTo(pj1Paths, { drawSVG: 0 }, { duration: 6, drawSVG: 1 }); Or you can remove that attribute from the elements and your original tween will work correctly.
    Just FYI, the duration should be in the vars for GSAP 3 syntax.
    I hope that helps.
    Happy tweening.

  25. PointC's post in A tag click event GSAP timeline animation not working properly was marked as the answer   
    The problem here is you can interrupt the tween at any time and then start a new tween to 360 with a duration of 3 seconds. So if the current animation is at 330 degrees and you interrupt it with a click, it will then animate the final 30 degrees in 3 seconds making it seem like slow motion. In this case I think using a .fromTo() tween would be the easiest fix.

    See the Pen 6ef0faf495c9000cf1f553f5f7bbb773 by PointC (@PointC) on CodePen
    You can also create your tweens/timelines outside of your event handler and simply play/reverse/pause etc. them with your clicks.
    Hopefully that helps. 
    Happy tweening.