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,902 profile views
  1. I'm not sure I follow the question, but it kinda sounds like you'd want some labels and the ScrollTo Plugin. More about labels and the position parameter here: ScrollToPlug https://greensock.com/docs/v3/Plugins/ScrollToPlugin Happy tweening.
  2. Hi and welcome to the forum @GSdaBlessedFist. Is this what you needed? https://codepen.io/PointC/pen/dacd3a7defb8cacc8a1556648f50b9a9 Happy tweening and welcome aboard..
  3. Seems a little tricky since the <li>s are block level elements. I'd probably pull the <a> tags out of the li. Just a thought. https://codepen.io/PointC/pen/5495d6020fc56b581e684c1388ab9574
  4. Hi @Ian Robinson Welcome to the forum and thanks for being a Club member. Is this what you needed? https://codepen.io/PointC/pen/4b2ce82c10dd89ff7ed572d4bf40dd5b Happy tweening and welcome aboard.
  5. If that first link is an exact duplicate of your local code, it looks like you haven't loaded jQuery. These two lines of your JS call it: var $hamburger = $('.hamburger'); $hamburger.on('click', function(e) { hamburgerMotion.reversed(!hamburgerMotion.reversed()); }); It is being loaded in your functional pen. Hopefully that helps. Happy tweening.
  6. Hi @buster808 Looks like you're stuck with the meters. Here's a fork of your demo in which I used a forEach loop to make the animations and add a ScrollTrigger to each one. I think it should get you moving in the right direction. I used a small array for the dial values, but you can also use data attributes as @elegantseagulls mentioned above. Lots of ways to make it happen. https://codepen.io/PointC/pen/gOGNEOr Happy tweening and thanks for reading Motion Tricks.
  7. Hi @buster808 Thanks for reading Motion Tricks. Glad to see you're having some fun with meters. In this case I think measuring the length of the path and tweening to an absolute length would be the easiest approach. I've forked your pen with a couple small changes. If we get the desired percentage by dividing your target count (600) by the hard coded max of 1140 and then multiply that by the max rotation of 180 you get the needle rotation. Multiplying that same percentage times the length of path we're drawing and you'll get the target length. Use those values in the tween and you'll get this. https://codepen.io/PointC/pen/b19e05f7c111c7d3a6ecef9762fc5c61 I'd also recommend using a function to create everything since the dials are the same. Then just feed in the desired count and you'll be good to go. Hopefully this all makes sense. Happy tweening.
  8. That's great to hear @BrownsFanForLife. Thanks.
  9. 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.
  10. 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.
  11. 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.
  12. 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.
  13. Bingo! Good job figuring it out. Glad to hear it's all working now. Happy tweening and thanks for being a Club member.
  14. PS You can: //switch this let x = gsap.getProperty(this.target, "x"); //to this let x = this.x; Happy tweening.
  15. 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.