Jump to content
GreenSock

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

PointC last won the day on September 19

PointC had the most liked content!

PointC

Moderators
  • Posts

    4,445
  • Joined

  • Last visited

  • Days Won

    363

Everything posted by PointC

  1. expo would be a little softer than the power4 you're currently using, but I think increasing the duration a bit would soften the landing as well. Check out the Ease Visualizer. If you want total control, check out CustomEase. Happy tweening.
  2. I think you're looking for the ScrollTo plugin. https://greensock.com/docs/v3/Plugins/ScrollToPlugin Happy tweening.
  3. 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. https://codepen.io/PointC/pen/39240edef3cb0cc070c789e9074aba45 Happy tweening.
  4. 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.
  5. PointC

    ScrollTrigger

    Since each of your .circle_icon divs are children of the parent circle they will rotate along with the parent. By using a tween targeting only the icon rotation in the opposite direction, you give the appearance of the icons/text remaining upright. It just needs to be the opposite of the parent. If the parent circle is rotating 720 then you'd need to rotate the icons -720 over the same duration. Make sense?
  6. Sure. An easy way would be to use .addPause() and then call for the other timeline to start playing. https://greensock.com/docs/v3/GSAP/Timeline/addPause() 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.
  7. You can get rid of this as you're already loading gsap. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.1/TweenMax.min.js"></script> Did you register the plugin? gsap.registerPlugin(MotionPathPlugin, MorphSVGPlugin);
  8. I would think there are times to use the attr:{} wrapper. Something like targeting the actual x attribute of an SVG <rect> vs. a transform. GSAP is very smart, but if you specifically want to target an attribute in a situation where the attribute and CSS property have the same name, you can do so with the attr:{}. Just my two cents.
  9. BTW - here's an older demo from another thread in which there is an additional target to create the illusion of orbiting behind the planet. Maybe it'll be helpful for your project. https://codepen.io/PointC/pen/yLYJbjL Happy tweening.
  10. 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. https://codepen.io/PointC/pen/576a99f87ecf0a9aea713b8beb894f00 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.
  11. Maybe this would work for you. gsap.set(".drag", { xPercent: -50, yPercent: -50 }); Happy tweening.
  12. In addition to Professor Blake's excellent advice, don't forget you can use the handy normalize() utility method. let progress = gsap.utils.normalize(this.maxX, this.minX, this.x); More info: https://greensock.com/docs/v3/GSAP/UtilityMethods/normalize() Lots of great methods over there that sometimes get overlooked. https://greensock.com/docs/v3/GSAP/UtilityMethods Happy tweening.
  13. Hi @simoncoudeville Welcome to the forum. In addition to Blake's excellent advice above, you can also set defaults like this: gsap.defaults({ duration: 0.75, ease: 'power2.inOut', yoyoEase: 'sine.out' }); More info: https://greensock.com/docs/v3/GSAP/gsap.defaults() Happy tweening.
  14. I'm not seeing anything either. 🤷‍♂️
  15. 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. https://codepen.io/PointC/pen/77a4780b72feb6ee6c0ab901c1511aea Happy tweening.
  16. 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. https://codepen.io/PointC/pen/c021734385ff870f52b9c574cfef5703
  17. Happy to help. Thanks for being Club member. We really appreciate the support. Happy tweening.
  18. On second thought I guess you could reverse the first tween and make this happen. Maybe something like this: https://codepen.io/PointC/pen/7658a5f21db59cb183374e8fbd04e474 If you want to go the SplitText route, we do have several 'typewriter' themed threads. Here are a couple. Hopefully that helps. Happy tweening.
  19. I don't think there is a right-to-left option with the TextPlugin. ScrambleText has a right-to-left Boolean, but AFAIK there is no way to do that with the TextPlugin. You'd want to use SplitText. Happy tweening.
  20. Just a little FYI - I do have a tutorial all about meters, needles and dials which may be helpful. https://www.motiontricks.com/svg-skill-level-meter/ Happy tweening.
  21. Correct. It won't work with any child elements of the SVG, but you can rotate the whole SVG in 3D space. Or you can put the SVG in a div and rotate the div. Happy tweening.
  22. Looks like it's working now. Thanks. Unfortunately 3D transforms are not supported by SVG elements. You can apply the transforms to the entire SVG as a workaround. Happy tweening. PS Just FYI - the new syntax would be. gsap.to("#G", { duration: 1, rotation: 90, transformOrigin: "101.5px 55px -120px", ease: "none" });
  23. Hi @alexeiv We'd be happy to help, but the demo you posted is coming up 404. Could you please check the link? Thanks.
  24. I see. Maybe you can set just .b to absolute so your button wrapper will take the size of .a. .parent { position: relative; } .a, .b { color: white; padding: 5px 10px; border-radius: 5px; white-space: nowrap; } .a { background: teal; } .b { background: crimson; position: absolute; } Then use a little GSAP magic. gsap.set(".b", { yPercent:-100, x: 400, opacity: 0 }); Or skip the GSAP magic and do it all with CSS. .b { background: crimson; position: absolute; right: 0; top: 0; } Does that help?
×