Jump to content
GreenSock

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

PointC last won the day on September 15

PointC had the most liked content!

PointC

Moderators
  • Content Count

    3,464
  • Joined

  • Last visited

  • Days Won

    314

Everything posted by PointC

  1. Yep, you can use DrawSVG and a mask to animate the dotted line and animating on scroll should be pretty easy by allowing ScrollMagic to hijack the tween. We're more than happy to help if/when you get stuck. Please post an updated demo to show your progress and any new questions. Happy tweening.
  2. You're trying to get path data from the whole SVG. You'll want to use your path ID of Path-3. var motionPath = MorphSVGPlugin.pathDataToBezier("#Path-3", { align: "#plane" }); You'll also need to move that image inside the SVG or you'll get BBox errors. Use something like this: <image id="plane" xlink:href="https://cdn.pixabay.com/photo/2013/07/12/13/56/paper-plane-147602_960_720.png" x="0" y="0" width="150"/>
  3. I forgot the link to that method above. https://greensock.com/docs/v2/Plugins/MorphSVGPlugin/static.pathDataToBezier()
  4. This is the MorphSVG plugin — it has a pathDataToBezier() method which helps animate elements along a path. It is a bonus plugin for Club GreenSock members. https://greensock.com/club/ You can try it and any other Club plugins for free on CodePen. Check this pen for links and info. https://codepen.io/GreenSock/pen/OPqpRJ Happy tweening.
  5. This is from another project, but may help. See how the target follows the path on the first tween, but draws the path on the second part. https://codepen.io/PointC/pen/WpPRxo Lines 12-14 are the important part. tl.add("label") tl.to("#path2", 3, {drawSVG:true}, "label"); tl.to("#target", 3, { bezier:{values:motionPath2, type:"cubic"} }, "label"); By using a label, both tweens play at the same time. One animates the target along the path while the other draws the actual path. Hopefully that helps a bit. Happy tweening.
  6. You can set the plane to follow the path in the SVG and then, as @ZachSaucier mentioned above, use DrawSVG to animate the stroke of the path drawing at the same time. If the path is dotted like your example, you'll need to use a mask to reveal it. I wrote about that here:
  7. I'm confused — is the plane supposed to follow the dotted path or your bezier coordinates path? You also want the dotted path to draw on as you scroll? Is that right?
  8. Just paste the link into your reply.
  9. It sounds like you're looking for the onReverseComplete callback. let animateMenu = new TimelineMax({onReverseComplete: yourFunction}); More info in the docs: https://greensock.com/docs/v2/TimelineMax If you have other questions, a demo is always helpful. Happy tweening.
  10. Good grief. It's back. The last time you posted that demo I couldn't get that song out of my head for several days. Thanks a lot Blake.🎵
  11. Hi and welcome to the forums. I'm not quite sure I follow what you're trying to do, but your pen is loading the text plugin — not SplitText. Check out this demo for CodePen safe versions of the Club plugins. https://codepen.io/GreenSock/pen/OPqpRJ SplitText breaks the text into divs so I'd recommend creating separate SplitText elements for each phrase and animating them rather than trying to change the innerHTML between tweens. Hopefully that helps a bit. Happy tweening.
  12. You'll need to check the distance from the top for each element and figure out how many rows you have. Then you can create a scene for each row and stagger the targets. You'll use a global trigger element, but set an offset for each row. Here's a demo from a different thread, but shows the technique. https://codepen.io/PointC/pen/aeJxJE This is not responsive. You'll need to make adjustments and listen for a resize event if that's a requirement for your project, but it should get you started. Happy tweening.
  13. You can check out my article about using GSAP and ScrollMagic together. It may be helpful. Happy tweening.
  14. PointC

    Parallax layers

    Wouldn't reducing the movement factor and duration a bit give you the desired result? https://codepen.io/PointC/pen/GRKBdYZ Does that help? Happy tweening.
  15. You could set a global counter like @mikel did. You could set a count limit on each timeline. You could also use a dummy tween as a timer and check its progress to see if you want to restart the speedline timelines. As with all things GSAP and JS, there are a bunch of ways to make it happen. Here's the dummy tween timer solution. https://codepen.io/PointC/pen/gOYjXKy Hopefully that helps. Happy tweening.
  16. There's a lot to look at here and it's difficult to troubleshoot a live site. I do see that TweenMax is not loading until you've loaded your main.js and ScrollMagic scripts. I'm wondering if changing that load order would fix this for you. If you could create a super simple demo that demonstrates the problem, we'd have a better chance of pointing you in the right direction. More info: Happy tweening.
  17. If you want a different delay or repeatDelay each time, I think I'd skip the repeat altogether. You can use an onComplete callback and then a delayedCall to restart the timeline. Here's another fork with that possibility. https://codepen.io/PointC/pen/eYOjBEq Hopefully that helps a bit. Happy tweening. PS Just a FYI — your pen is using gsap 1.16.1 which is over 4 years old. The latest is 2.1.3.
  18. Hi and welcome to the forum. If I understand your question correctly, I think you need to regroup some of the eye elements and rotate using svgOrigin for the group. Is this what you wanted to happen? https://codepen.io/PointC/pen/qBWKeav Hopefully that helps. Happy tweening.
  19. I'd probably do something like this: https://codepen.io/PointC/pen/XWrYwQK I just used the loop index to make a little delay. You could also use a function to randomly generate one. Or manually create an array of delays if you want detailed control. That's what I did in this demo. https://codepen.io/PointC/pen/yPbYRY Hopefully that helps. Happy tweening.
  20. PointC

    GreenSock loot

    Can we have comma club shirts in there too?
  21. PointC

    GreenSock loot

    I think this is still the place, but @GreenSock would need to verify that. https://www.djmdesigns.net/greensock-apparel
  22. Yeah, if you have some demo you like, we can point you in the right direction of how to animate it. A lot depends on what you're creating. Will the pieces be dynamically generated or will you be creating a simple SVG chart? What will the wedges need to do, etc. GSAP can certainly handle all the animation whether you use DOM, SVG, canvas, WebGl. Good luck with your search.
  23. There are probably some charts running around the forum here, but you'll probably have better luck and find a larger variety of examples at CodePen. Have you tried a search over there for some chart demos?
  24. Did somebody say confetti cannon? https://codepen.io/PointC/pen/RyaJmj I'd recommend going with something like what @OSUblake posted above. Simple and easy. Happy tweening.
×