Jump to content

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

PointC last won the day on January 8

PointC had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


PointC last won the day on January 8

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

47,621 profile views
  1. That's great to hear @BrownsFanForLife. Thanks.
  2. Hi @camiloignaval Welcome to the forum. Looks to me like you'll need to set the overwrite property to true in those tweens. (It's false by default) You could also create a timeline for each element and play/reverse it on enter/leave. Hopefully that helps. Happy tweening and welcome aboard.
  3. Path data looks fine and it clearly works correctly as seen in this demo. https://codepen.io/PointC/pen/920f23b493b302b6a111a733ce12e559 Definitely look at joining Club GreenSock so you can use MorphSVG in the wild. Happy tweening.
  4. Definitely worth it. Private pens are a must. You get a quite a bit of asset storage. Debug is super helpful. I use the custom embed themes for my motiontricks.com tutorials. Plus, as Jack mentioned, it's good to support useful products and services like CodePen. My two cents. YMMV.
  5. Hi @Aaron Robb Welcome to the forum and thanks for being a Club member. That's a common problem (FOUC) and we have a quick tip about how to deal with it right here: Happy tweening an welcome aboard.
  6. Bingo! Good job figuring it out. Glad to hear it's all working now. Happy tweening and thanks for being a Club member.
  7. PS You can: //switch this let x = gsap.getProperty(this.target, "x"); //to this let x = this.x; Happy tweening.
  8. I just meant the x position set() in your matchMedia query. So your original code would look like: gsap.utils.toArray(".section-avant-apres").forEach((section, i) => { let theTarget = section.querySelector(".dragger") if (window.matchMedia("(max-width: 689px)").matches) { gsap.set(theTarget, { x: "50" }); } else { gsap.set(theTarget, { x: "450" }); } Draggable.create(theTarget, { type: "x", bounds: ".logo-new", onDrag: function () { let x = gsap.getProperty(this.target, "x"); gsap.set(".logo-old", { clipPath: `inset(0px 0px 0px ${x}px)` }); } }); }); Happy tweening.
  9. Looks like you're targeting all elements with the .dragger class in each iteration of the loop. You'll want to target the specific .dragger in each section like this: let yourTarget = section.querySelector(".dragger"); Then set() the target and create a Draggable for the target rather than the .dragger class. Happy tweening.
  10. Very cool @celli. Thanks for sharing.
  11. Not at all. I've never tried it. (or had a need to try it) It was just the first thing that popped into my head.
  12. ha. true. could get a little timey-wimey. Not sure why I thought would work. 🤦‍♂️ 🤷‍♂️ Leave me alone - it's the weekend. I should be napping.
  13. Looks like @GreenSock beat me to it, but yeah - add() will work just fine here too. I was just throwing out call as an option since it sounds like you might have something more complex going on in the final project. But here's a fork with add(). I upped the duration of the extra timeline to a ridiculous number just so it's obvious that it's not changing the duration of the master. https://codepen.io/PointC/pen/a05cb90ba6666b21bf151de6a407f758 Happy tweening.
  14. That's the array of params for the function. In this case we have none so we use null. This is necessary in this case as we are using the position parameter. From the docs. .call( callback:Function, params:Array, position:* ) Correct. The call will take place at 1 second. You can use absolute times, relative times, labels, etc. The call will play the timeline from 0. It could be a 1 second timeline or a 60 second timeline. Doesn't matter. It won't affect the overall duration of the master timeline. We're just saying at 1 second into the master to play the extra timeline from its own start point. That's because we have infinite repeat on the master. You can also use no repeat and set GSDevTools to loop like this. https://codepen.io/PointC/pen/ab4cd62686afdf42473734ebd0f3fee4 Make sense?
  15. Still not sure I'm following correctly. Or maybe it's weekend brain. 🤷‍♂️ You could create the longer timeline separately and just use a call in your main timeline to play it. Something like this maybe. https://codepen.io/PointC/pen/f1d052fa8b01d55a870f415592edd6af