Jump to content
GreenSock

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!

PointC

Moderators
  • Posts

    4,591
  • Joined

  • Last visited

  • Days Won

    372

Everything posted by PointC

  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
  16. I'm not quite sure I follow, but you could use a negative repeatDelay. let masterCR = gsap.timeline({repeat:-1, repeatDelay:-1}); Does that help?
  17. We've had a few threads about Safari and clip-path weirdness. Maybe one of these will help. Happy tweening.
  18. PS I should also mention, since this is an SVG, you can also use the very handy svgOrigin. So this would work too. .from("#leafs > *", { scale: 0, svgOrigin: "192 192", duration: 1.4, ease: "power1.inOut", stagger: 0.5 }); Happy tweening.
  19. The right leaf needs to grow from the lower left so it would be: transformOrigin: "0% 100%", // or this works too transformOrigin: "left bottom", Make sense?
  20. Hi @animationmagic DrawSVG won't work on any of these elements because they are all filled paths. DrawSVG only works on strokes. If you simply want the scale to start at the lower right of your leaf, you can change the transformOrigin like this. https://codepen.io/PointC/pen/6fedd968003847755d5385b3f99edeb0 Happy tweening and thanks for being a Club member. We really appreciate the support.
  21. I need color changing paint like the new BMWs.
  22. I do see this disappearing on revert. I'm on PC so the only Safari I can test is on my iPad, but is does indeed disappear. Kinda weird. Googling Safari and problems with gradient text yields quite a few hits so it may be browser thing. Then again, it works before the split and during the animation. I'm kinda stumped on this one? 🤷‍♂️
  23. here you go https://codepen.io/PointC/pen/XWeBjrb I'll look for my Tesla later this week.
  24. You have a ScrollTrigger trigger of 'this'. Did you mean? scrollTrigger: { trigger: ".cp-animation", markers: true }, https://codepen.io/PointC/pen/0e3c7de27232f988c12cecb5e13368b4
  25. Here's a 3rd version that fills the containing div with blue. You'll probably need to get the screen size to make sure you add enough radius, but this should get you started. https://codepen.io/PointC/pen/BawPzaW Happy tweening.
×