Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

PointC last won the day on June 18

PointC had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Posts posted by PointC

  1. yPercent and xPercent are ways of aligning (translating) the element relative to itself in percentages. Super useful for centering the target or, in this case, hiding it just above or below the top/bottom of the window. 


    Here's a basic example. Just a simple div 100px x 100px.

    See the Pen 0e45afe970b94555a8cfef422944ec97 by PointC (@PointC) on CodePen


    Notice a yPercent of 100 moved it down by the height of itself? Same thing for xPercent:100. You can use negative values as well.


    So, what is happening in the demo? I'm just using that as a little cheat to make sure the element is fully out of view. At the bottom of the screen the yPercent is 100, in the middle of the screen it goes to 50 and at the top it goes back to 0. If we left it at 50, only half of the box would disappear at the top before if reappeared at the bottom. It would probably be so fast you may not notice, but this ensures it's completely out of view.


    You do not have to use yPercent like I did. Another approach would be to get the height of your target element and add/subtract that value from the inner height variable when you tween the box. It's entirely up to you. I just found it quicker and easier to use yPercent in this case.


    Does that make sense?

    • Like 3
  2. Hi @jmsv :)


    Welcome to the forum.


    I'm not 100% sure why that isn't working but I've never use a CSS variable in a quickTo like that.


    I forked your pen and used regular .to() tween with overwrite:true and that seems to work just fine.

    See the Pen 5a5b57ee5b2604c55c96196a107460b1 by PointC (@PointC) on CodePen


    It also works fine just setting the property with some vanilla JS.

    See the Pen 1fc0ed60e7cb73262d264d47e447e3f6 by PointC (@PointC) on CodePen


    Maybe I'm missing something obvious with quickTo. Hopefully @GreenSock can clarify.


    Happy tweening and welcome aboard.




    • Like 1
  3. Hi @FARIOA,


    Welcome to the forum.


    You'd want to use relative values for that. This will add a new tween to the timeline on each click.

    let spin = function () {
      spinSquare.to(".outer", {
        duration: 1,
        delay: 0.5,
        ease: "power1",
        rotation: "+=45",
        x: "+=200"

    Keep in mind that you are adding a new tween to the timeline on each click, but you're also playing the timeline from 0 each click as well so it still jumps back to the beginning.


    See the Pen 29bacc336e2b6b66474c023dfc2cba7a by PointC (@PointC) on CodePen


    Happy tweening.



    • Like 1
  4. Welcome to the forum and thanks for being a Club member. 🎉


    When you use a .from() tween, you're saying animate to the current value and start from some other value. In this case, you're saying animate from 100% to the current value which is already 100%. So it looks like nothing happened. You'll want to tween from 0 like this.


    gsap.from(".PVWave", { duration: 3, drawSVG: 0 });

    Hopefully that makes sense. Happy tweening.


  5. First , I didn't realize this was the same project as stickman. I'd love to see this when it's all done. :)


    Okay, the way you had it wired, you had these listeners:

    btn.addEventListener("mouseenter", () => {doCoolStuff(btn, idx)});
    btn.addEventListener("mouseleave", () => {doCoolStuff(btn, idx)});

    Inside that doCoolStuff() function you call the typeText() function.

    btn.anim = typeText(p, rect);

    Inside that function a timeline is created and returned. This is happening on every mouse enter/leave event. That's why the text wasn't working correctly. A bunch of timelines are now competing to control the same element.


    The big difference with mine is we loop through the buttons one time only to create the timelines. The mouse enter/leave events then play/reverse that timeline. The mouse events do not call the timeline creation function at all. That's all done ahead of time. 


    Make sense?

    • Like 2
  6. I don't think you'll find an online generator that will give you negative values. It's usually easiest to just grab a pencil and paper and sketch what you need. Clip-paths are relative to the element so in this case - upper left → 0% 0%, upper right → 100% 0%, lower right → 100% 100% and lower left → 0% 100%. You can exceed 100% and you can use negative values.


    Also keep in mind that you are not limited to 4 points. You can add as many as you like and come up with interesting animations.


    But like I said, it's usually best to sketch it out on paper. Think about where the start and end points would need to be to achieve a diagonal. 


    Give it a whirl. Happy tweening.

    • Like 2
    • Thanks 1
  7. What other div? That's what I was asking about above. ;) The video shows the elements erase to black.


    The short answer is yes, you can show another element. You may need to wrap the target and the text in another div and erase that to reveal another div or section underneath them. You can stack as many elements as you like. It's all in the planning and layering. Give it a shot.

  8. Okay, let's see if this helps you.


    I made a quick modification to my demo from above. I moved the star background to the #container rather than the target div  and just gave the target a blue background. So, now the timeline has two tweens.

    1. The first uses the clip path to show the blue background. The clip-path was originally set in the CSS to hide all of it. That appears behind the text because of the HTML stacking.
    2. The next one uses a clip-path for the #container. The original clip-path was set to a full reveal and we're just shrinking that down to nothing. This will hide everything since the .target div and the <h1> are children of the main #container element.

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


    Does that make sense?


    PS Pro tip: Always use percentages in the clip-path even if it's 0.


    • Like 1
  9. So, mouseenter on 1,2 or 4 causes that button to animate and #3 to reverse? Is that correct? All the animations are mouseenter/mouseleave only? Does anything happen on click? 


    I'd probably assign all the tweens/timelines just like above and then create an active variable so you can reverse the active timeline when one of the non-active others is hovered. If something happens on click, there may be a bit more to the logic.

    • Like 1
  10. I have a whole article about organic morphing which may prove useful for you as well.



    Bottom line - easy SVG animation comes down to 3 things:

    • Asset Prep
    • Asset Prep
    • Asset Prep

    Even though morphSVG can use shapes without the same number of points, I almost always try to use the same number. You can accomplish this by duplicating your start shape and push/pull the points until you get your end shape. The puppet warp tool is also great for that kind of thing.


    Best of luck on your project and happy tweening.



    • Like 2
  11. I'd start like this:

    Forget about ScrollTrigger for the moment. Create a simple div and place your child containers inside of it. They'll need to be stacked so you'll have absolute positioning. Once you have that, create a clip-path for each. Don't worry about diagonal yet - just a basic right → left or left → right. Create a timeline that animates each clip path in sequence to reveal (or hide) each container. After that animates to your liking, it'll be very easy to wire it up to a ScrollTrigger and change the clip-paths to diagonal.


    Please give that a whirl and I'll help you if you get stuck.


    • Like 1
  12. You can use the same clip-path and a .fromTo() tween if you're just targeting the background again.  If you need to clip all the elements, you can use multiple clip-paths. Say the first one is for the background image as in my demo. The second one could be for the whole container. Just stack up your elements in the proper parent child relationships and you'll be good to go.


    Have fun.


    • Like 1