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 Animate SVG Dash line from start to end was marked as the answer   
    Hi @ELMNTL 
    Welcome to the forum. 
    The easiest way to animate a dashed line is by using a mask. I have a tutorial on my training site about that technique. I think you'll find it helpful.
    Happy tweening and welcome aboard.

  2. PointC's post in How to make an animation that, when scrolling, filled the circle with a strip like in the photo on ScrollTrigger? was marked as the answer   
    The 'cuts' in your path are because the stroke is overflowing the SVG.
    Here's a little example. The SVGs are 100x100 with a circle radius of 50. I've outlined the SVGs with a red dotted stroke so you can see what's happening. You can see the circle with a fill pushes right up to the edge in the first SVG. Now adding a stroke will cause problems because strokes are center aligned. Meaning half of the stroke will be outside the viewBox. You can see the 20 unit stroke is partially cut off in the second SVG. The third SVG is the same as the 2nd but I've set the SVG overflow to visible.  Now you can see the whole stroke.

    See the Pen c90655407d005eadb7af06e1941db0c7 by PointC (@PointC) on CodePen
    So the answer is either setting your SVG overflow to visible or make certain your elements remain inside the SVG viewBox. 
    In regards to your main question. You could set up the circle with a gradient stroke like this example. 

    See the Pen QWpJdpz by PointC (@PointC) on CodePen
    Another way would be to just use a rectangle in the background with a gradient fill which is then revealed by the stroke in the mask.
    Hopefully that helps. Happy tweening.

  3. PointC's post in Timeline loop with MotionPath on circle was marked as the answer   
    Just my two cents, but with these circular orbits, I find it easier to use svgOrigin and just animate the rotation. (Not that there's anything wrong with using a motion path.) Here's a quick fork for you. You'd need to adjust the rotations to meet your needs, but it shows how you could do it without a motion path.

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

  4. PointC's post in How to animate gradient mask of an image? was marked as the answer   
    Hi nep 
    You said you want to move the mask from right to left  so I'm assuming this is a soft reveal of the image?
    I'd agree with Jack and recommend an SVG mask. The pen Rodrigo pointed out is using a solid colored square as the mask, but we can add a black to white linear gradient to the square and get a nice soft edged reveal. Using GSAP we just need to animate the x1 and x2 attributes of the linear gradient:
    TweenMax.to("#theGradient", 2, {attr:{x1:-800, x2:1}, repeat:-1, yoyo:true, repeatDelay:0.5, ease:Power2.easeIn}) // adjusting the x1 value in the tween can change the reveal. switch it to your liking // the closer you get to 0, the more abrupt the end of the reveal will be Here's a CodePen to get you started:
    See the Pen yJjNOX by PointC (@PointC) on CodePen

    Hopefully that gets you closer to your goal.
    Happy tweening.

  5. PointC's post in Clip-path with SVGmorph was marked as the answer   
    When everything is "under one roof" I find it so much easier since all the elements scale nicely together.
    I'd recommend a simple rectangle in a clipPath which expands its height attribute at the same speed as the path morph. Here's a quick starter for you.

    See the Pen 6ab4a2fbf5620f43c8894ea05eee9221 by PointC (@PointC) on CodePen
    You can add the text to same group as the image so it's all revealed by the animating rectangle in the clipPath. You'll need to resize that rectangle to make it all pixel perfect. It's often easiest to pull it out of the clipPath and place it at the bottom of the SVG (so it's on top) for visual sizing purposes. Once you have the size right, pop it back into the clipPath and you're good to go.
    Make sense? Happy tweening.

  6. PointC's post in Scaling an SVG clip path was marked as the answer   
    Hi @BrianCross 
    If it's something GSAP will be animating, I always set its initial properties with GSAP as well. I think this should work for you.
    gsap.set("rect", { scaleY: 0, transformOrigin: "center bottom" });
    See the Pen 66a924c828d379b77b02351346376189 by PointC (@PointC) on CodePen
    Happy tweening.

  7. PointC's post in Animating Animal SVG was marked as the answer   
    Hey @Jakebogan
    For those types of animations I use the puppet warp tool in AI and usually get decent results with MorphSVG. It's all in how you set up the assets.
    Here's a really quick demo.

    See the Pen gOgGQrP by PointC (@PointC) on CodePen
    Hopefully that gives you some ideas. Happy tweening.

  8. PointC's post in Horizontal scrolling content not working correctly was marked as the answer   
    Whoops. I think I only read half of your question.
    For stuff like that I usually just clone the node and animate them both to an xPercent of -100. This is a demo from another thread, but shows the same basic idea. It just has a hover speed/slow effect.

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

  9. PointC's post in Flying a kite - rotation control was marked as the answer   
    Oh... I see. Yes - you'd add another tween to the timeline with the rotation of the kite and use the position parameter to start it at the correct point. 
    Say you have a 2 second motion path animation and you want the kite to rotate 15 degrees at 0.5 seconds into that animation, you'd then write it like this. 
    tl.to(yourKiteTarget, { rotation: 15 }, 0.5); More info on the position parameter.
    Happy tweening.

  10. PointC's post in Hover triggers sequence of animations was marked as the answer   
    Is this what you needed?

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

  11. PointC's post in Animated SVG as background-image (DrawSVG) was marked as the answer   
    Hi @todd.eagle 
    Welcome to the forum and thanks for being a Club member.
    If I understand the desired outcome correctly, I'd probably just put the image inside the SVG. That way it all scales nicely together. Does that make sense?
    Happy tweening and welcome aboard.

  12. PointC's post in Elements overlapping when near the end was marked as the answer   
    If I understand your question correctly, I think you're seeing the easing there. You'd need to set easing to "none" in order to space them out.
    .to(section, { bottom: "120%", ease:"none" }) Is that what you meant?
    Happy tweening.

  13. PointC's post in Draw SVG change direction WITHOUT fromTo tween was marked as the answer   
    Hi @jakob zabala 
    It's usually best to create the timeline outside of your event handlers and then play()/reverse() on hover so you don't get those weird overwrites.
    Make sense?
    Happy tweening.

  14. PointC's post in animation is laggy, page is slow was marked as the answer   
    Hi @Caroline_Portugal 
    It looks fine to me, but have you tried the slight rotation trick? rotation: 0.01 on your tweens?
    Just an FYI - you can set a default ease and duration since they are all the same.
    gsap.defaults({   ease: "none",   duration: 50 }); The duration should also be in the vars in GSAP 3. You can also use the set() method instead of those zero duration tweens.
    Please see if the rotation trick changes anything for you. Others may jump in with additional ideas.
    Happy tweening.

  15. PointC's post in animation on hover issues was marked as the answer   
    The problem here is you have multiple timelines fighting for control of the same element. This thread has a similar topic and may be helpful to read and check out the answer demo.
    If you want to take a slightly different approach, you could change the text in your placeholder element rather than adding the extra divs. The text plugin is great for that sort of thing. I created a function for the mouseenter and mouseleave events. In the enter function I check if we have an active hover timeline. If there is one, the progress is set back to 0 so there are no weird overlaps. Then just a quick timeline creation and play. In the leave function it's just a simple reverse of the timeline.

    See the Pen 6ef58b252a1b135fb2cad222407f79f5 by PointC (@PointC) on CodePen
    Of course if you want to use jQuery, add the divs, etc. that is totally fine too. I just thought I'd throw out another idea. Hopefully it helps.
    Happy tweening.

  16. PointC's post in How to animate a SVG path but only the stroke color? was marked as the answer   
    A few things. 
    1. You need to load the drawSVG plugin.
    2. Masks need to have a stroke of white and no dasharray.
    3. You have a lot of code from my demo that causes errors because the elements are not there. (button, marker etc.)
    I forked your demo, made those changes and commented out most of the code. I've set the mask path animation to yoyo so you can clearly see it working.

    See the Pen 4293bde8c57ac4c848692ef8a7d7ca92 by PointC (@PointC) on CodePen
    More info about masks can be found on my training site:
    I'd also recommend going through my dashed lines tutorial which was mentioned above.
    Happy tweening.

  17. PointC's post in CssRulePlugin, Keyframe Conversion, Repeat and Delay? was marked as the answer   
    Hi @Oli28
    Welcome to the forum.
    I'm not quite sure what the final result should look like here, but you'll probably want to put those two tweens on a timeline. Your pen also wasn't loading GSAP and the CSSRule plugin. Here's a fork that is working and should get you started. From here you should be able to adjust the durations and percentages to your liking.

    See the Pen 9060999ec705edea2807b824ddb6cf2d by PointC (@PointC) on CodePen
    If you're just getting started with GSAP, I'd recommend:
    Happy tweening and welcome aboard.

  18. PointC's post in set() after addPause() - what should we expect? was marked as the answer   
    Hi @hatim 
    hmmm... yeah -  I would expect that set() to fire after you resume. I'm not 100% sure but I'd guess that the addPause() and the set() fire on the same tick since the set() is a zero duration tween. I just added a position parameter as a quick experiment and it worked fine.
    t.set(".box", { backgroundColor: "red"}, "+=0.01"); I think we need to ask @GreenSock if this a bug or there's another reason for the behavior. He should stop by a little later with some more info.
    Happy tweening.

  19. PointC's post in Swaying Object with GSAP was marked as the answer   
    Hi @leonardpbd 
    Welcome to the forum.
    There would be a few ways to create that animation. I think the simplest approach would be to use a set() for the scaleX when the boat reaches the end of the first animation. For the rocking I would suggest a separate tween that just repeats. It doesn't need to be part of the timeline. Here's a fork with those changes.

    See the Pen 8fbce57328d58f78ed650789f756a4eb by PointC (@PointC) on CodePen
    If you're just getting started with GSAP, I'd recommend:
    Our very own @Carl also has loads of training materials to get you started.
    Hopefully that helps. Happy tweening and welcome aboard.

  20. PointC's post in Reveal Image - alternating entrances left/right/left/right was marked as the answer   
    Just my two cents but I'd take advantage of the .wrap() utility method and target the container and the image in the same tween. You could check the index of the loop target and flipflop the .wrap() array depending on whether the index is odd or even. That way you wouldn't need to add the extra class to your HTML markup. You can then add a bunch of copies of the targets without worrying about the left/right class. Maybe something like this:

    See the Pen 14db07e23ea1235bc448c229a757098c by PointC (@PointC) on CodePen
    More info about .wrap()
    Use it or not. Just a thought. YMMV.
    Happy tweening.

  21. PointC's post in Scroll to #div and += was marked as the answer   
    Have you tried offsetY?
    scrollTo: {y: "#yourID", offsetY: 100}  
  22. PointC's post in spinner not spinning! was marked as the answer   
    Sure. You can map the rotation to any other animation or value you like. I actually have an entire tutorial about mapping dials to change HSLA color values. 
    There are multiple demos in the tutorial, but this is the final result.

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

  23. PointC's post in Stop video on section leave was marked as the answer   
    Hi @scavaliere 
    Welcome to the forum and thanks for being a club member. We appreciate it.
    If you make this change to your code, it should work as expected.
    onEnter: () => document.getElementById("background_video").play(), onLeave: () => document.getElementById("background_video").pause(), onEnterBack: () => document.getElementById("background_video").pause(), Even more concise.
    const video = document.querySelector("#background_video") ScrollTrigger.create({   start: "top center",   end: "bottom bottom",   trigger: "#video",   onEnter: () => video.play(),   onLeave: () => video.pause(),   onEnterBack: () => video.pause(),   markers: true }); Happy tweening and welcome aboard.

  24. PointC's post in Morphing SVG Plugin was marked as the answer   
    Hi @Jakebogan 
    Welcome and thanks for being a Club member.
    That morph is behaving as I'd expect. You have some funky transforms on the group and a little bit of an odd viewBox size. Here's a fork of your pen showing the circle target and where it resides. I've outlined the SVG with red so you can see it better.
    See the Pen 01b4f32f5e6659d58d0d961600889795 by PointC (@PointC) on CodePen

    The secret to SVG vector prep is using a background rectangle the same size as your project. I have a whole post about that here.
    Hopefully that helps. Happy morphing.

  25. PointC's post in infinite loop circle in textpath was marked as the answer   
    Hi @RaúlSan.
    Welcome to the forum.
    Did you mean it appears and then the whole thing continues to rotate? Like this?

    See the Pen 5afd1ac07bef5ca027f83a552e70e11c by PointC (@PointC) on CodePen
    Does that help? Happy tweening.