Jump to content

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!


  • Posts

  • Joined

  • Last visited

  • Days Won


PointC last won the day on September 19

PointC had the most liked content!

About PointC

Profile Information

  • Gender
  • Location
    Seattle area
  • Interests
    web design, motion graphics, 3D animation, video production, all things sci-fi, Mt. Rainier hiking and my dachshunds

Recent Profile Visitors

45,182 profile views
  1. You're using an elastic ease. gsap.timeline() .to("#image1", { opacity: 1, duration: 0.75, ease: "power1" }) .to("#image2", { opacity: 1, duration: 1, ease: "elastic" }) .to("#image3", { opacity: 1, duration: 1.25, ease: "elastic" }); Please try "linear" or "none"
  2. Probably use a linear or 'none' ease. We can better assist you with a minimal demo. Happy tweening.
  3. Just another approach. Happy tweening and welcome to the forum. https://codepen.io/PointC/pen/rNzVgLO
  4. Seems okay to me with svgOrigin. https://codepen.io/PointC/pen/c6c91bf19db5378f18eac5c9f4ec7810
  5. Hi @Anna Leach Welcome to the forum and thanks for joining Club GreenSock. Yeah - that happens a lot. A demo is posted with a problem and once a solution is found, the original demo is corrected. That's why it's usually best to fork the original demo and then add the solution to the fork. You can check to make sure you have a stroke on the target path along with the usual suspects: Is the DrawSVG plugin loaded? Are you registering the plugin? Are you targeting a specific path rather than the whole SVG? Other than that, as Blake mentioned, a minimal demo would be most helpful. Happy tweening and welcome aboard.
  6. Yep - masking is the best choice IMHO. I have a whole tutorial about variable width strokes and calligraphy handwriting. I also cover how to handle it when sections of the letters overlap themselves. https://www.motiontricks.com/svg-calligraphy-handwriting-animation/ https://codepen.io/PointC/pen/zYqYOrp Happy tweening.
  7. Here's a quick example with your image and a play/pause on click with GSAP3 syntax. https://codepen.io/PointC/pen/556a6fa102f4f01982796a7b52e4cc11 Happy tweening.
  8. I don't think I understand the question. Do you want the whole animation to pause/play on click? Side note: you should upgrade to the GSAP3 syntax. More info:
  9. Hi @Ahmed Khalil We've had a few threads about this topic. Maybe these will help. Happy tweening.
  10. You can tween the progress() or timeScale() of the master timeline. Something like this should work. gsap.to(master, { duration: master.duration(), progress: 1, ease: "expo.inOut" }); Happy tweening.
  11. Pretty neat Jack. I can see this being a pretty handy little plugin. I did a little test run comparing some of the usual ways I write an overshoot. ease:back is my usual quick choice, multiple tweeens when I need a specific overshoot point and a custom ease when I want to really slingshot it. Having another option in the toolbox would be good. It's nice and quick to change values too. 👍 https://codepen.io/PointC/pen/XWgwjjZ My vote would be for a plugin rather than in the core. No idea on the "keys" name. 🤷‍♂️ Cool stuff.
  12. Ha. I knew you were gonna post a solution with CSS variables - that's why I went with the real DOM elements. Gotta have options.
  13. Hi @rsheppard Welcome to the forum. I don't think that'll work correctly since you're targeting the rule. I'd probably just loop through and add some real DOM elements. https://codepen.io/PointC/pen/37cfe9e3ace3288e866a771c96526fcf Happy tweening.
  14. Hi @Tagliavia This should work for you. Draggable.create("#yourTargetBox", { onDragEnd: () => { gsap.to(this.target, { x: 0, y: 0 }); } }); Happy tweening.