Jump to content
GreenSock

PointC last won the day on October 30

PointC had the most liked content!

PointC

Moderators
  • Posts

    4,964
  • Joined

  • Last visited

  • Days Won

    401

Everything posted by PointC

  1. Just my two cents but that feels pretty strange to me as a user to be scrolling along and the whole page takes off like that.
  2. I'm not sure I follow the question, but I think this is what you want it to do. https://codepen.io/PointC/pen/ExQReJL/807639eafe80fbc8953cbaa02922759f Does that help?
  3. 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. https://codepen.io/PointC/pen/eYVKKVP Happy morphing.
  4. Nope - just making sure you were using it on the stickman project as I couldn't remember seeing it in that thread. What you have here with the buttons on the path is great. Looking forward to it.
  5. 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. https://codepen.io/PointC/pen/vYdryOY/0e45afe970b94555a8cfef422944ec97 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?
  6. Sounds like this here: Happy tweening.
  7. 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.
  8. 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. https://codepen.io/PointC/pen/wvyXKRO/5a5b57ee5b2604c55c96196a107460b1 It also works fine just setting the property with some vanilla JS. https://codepen.io/PointC/pen/VwQdvJx/1fc0ed60e7cb73262d264d47e447e3f6 Maybe I'm missing something obvious with quickTo. Hopefully @GreenSock can clarify. Happy tweening and welcome aboard.
  9. 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. https://codepen.io/PointC/pen/dydKYqZ/29bacc336e2b6b66474c023dfc2cba7a Happy tweening.
  10. 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.
  11. PS Have you tried the MotionPathPlugin for those icons? Makes it super easy. https://greensock.com/docs/v3/Plugins/MotionPathPlugin Happy tweening.
  12. 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?
  13. A fun new image format. This will explain it better than I can here. https://developers.google.com/speed/webp Excellent support. https://caniuse.com/?search=webp I personally use this site for my conversions. https://cloudconvert.com/ Hopefully that helps. Happy tweening.
  14. Hi @fatima.osman@gmail.com Welcome to the forum I don't know anything about banners, but is .webp an option for you? Sometimes smaller file size than .jpg and supports transparency. Some of our resident banner experts may jump in too, but that's my two cents. Happy tweening.
  15. Here's an oldie but a goodie. https://codepen.io/PointC/pen/vRzmeO
  16. 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.
  17. ahhh... I thought maybe I was imagining the other video, but it was originally there. Yeah, just wiping over sections is even easier than the above demo. You'd just stack up your targets in the container and animate the clip-path to reveal them. https://codepen.io/PointC/pen/YzeLYNB
  18. 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.
  19. stagger: { each: -0.15, repeat: -1, }, Happy tweening.
  20. 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. 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. 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. https://codepen.io/PointC/pen/jOZxarR Does that make sense? PS Pro tip: Always use percentages in the clip-path even if it's 0.
  21. So, is the goal to reveal section 1 and then section 2 over the top of section 1? I ask, because they are not stacked on top of each other. From what I saw in the video, that seems to be the goal, but I need to clarify. Thanks.
  22. This should work. https://codepen.io/PointC/pen/poaVvQp/3bd8fbccb6ed4a2c47de269ddaac0cb9 Happy tweening.
  23. 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.
  24. Yeah, I'm a little confused too. Isn't scaleY:0 the default value?
×