Jump to content

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

PointC last won the day on May 15

PointC had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


PointC last won the day on May 15

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

51,235 profile views
  1. Are you asking the same thing as your other thread here?
  2. If you want the opacity to fade in on each repeat, you'd need to add it to the smoke timeline. Right now you have it in the setTimeout function. Why not just make it part of the main smoke timeline?
  3. I'm pretty sure killTweensOf will indeed kill the associated ScrollTrigger. Though, any ScrollTriggers associated with timelines will remain. It's easy enough to kill all the ScrollTriggers if needed. ScrollTrigger.getAll().forEach((t) => { t.kill(); }); Happy tweening.
  4. You can do it like that or you could use a yoyo tween. Something like this should work: const anim = gsap.to(containerRef.current, { opacity: 1, ease: "none", yoyo: true, repeat: 1, repeatDelay: 2, scrollTrigger: { trigger: containerRef.current, start: "top center", end: "bottom center", scrub: true } }); Happy tweening.
  5. Glad to help and don't worry about overcomplicating it. It happens to all of us. Happy tweening.
  6. Yes - it's a good practice to use the most up-to-date version of GSAP and syntax. Sometimes a bug may have been squashed or a cool new feature was added so it's something to watch. Happy tweening.
  7. I think you're looking for the position parameter. This will allow you to start the opacity fade before the x movement completes. Happy tweening.
  8. I see. I think it would just be a matter of disabling or enabling the ScrollTriggers with your control button. Something like this should work. https://codepen.io/PointC/pen/RwQpgoQ/3cdce484c18fcfc71a262b3dd83e8a54 Happy tweening.
  9. So you want all the lines triggered by ScrollTrigger but also want a pause control? Do I understand that correctly?
  10. Hi @soma Welcome to the forum. Probably easiest to create a tween for each one and play/reverse on mouseenter/leave. Maybe something like this. https://codepen.io/PointC/pen/bGLqWqY/81af104f98ab206012f97eab84edc8b9 Happy tweening and welcome aboard.
  11. If I'm animating it with GSAP, I always use GSAP to set everything so we don't encounter any CSS problems. In this case, I think it'll be easier to use SVG origin for the head group rotation point. https://codepen.io/PointC/pen/wvyJgdR/3563d3883888a9bb19bc96e7fb6a9774 I'm not seeing that in any browser. Happy tweening.
  12. Hi @chailandau The problem is you're drawing to true, but the lines are already drawn so it looks like nothing is happening. You could set all the paths to 0 or use a from tween as I've done in this fork. https://codepen.io/PointC/pen/NWydeZv/c7c885cb4d645c1560429fc7574fd3e8 Happy tweening.
  13. You can drop the duration to get something quicker to avoid the ghosting of the prior image and then adjust the stagger to your liking. https://codepen.io/PointC/pen/RwQKqLB/e2610efcbdf13b2eef10db071f8e6f91
  14. On Windows it's perfect for me in FF, but chugs pretty hard in Chrome and Edge. Browsers are such fun. 🤷‍♂️ Yeah - there are times when just exporting a .png or .webp is the preferred option. Using an SVG as a background image for a div can also help. Lots of little tips and tricks to try when the browser struggles. Best of luck on the project.
  15. Hi @Vivodionisio Looks like you're firing the cursor blink function on line 20. I'd set the onComplete on the timeline like this: https://codepen.io/PointC/pen/NWydzRy/6b153b393ed873f617523cbf2f13ed29 You also wouldn't necessarily need a whole timeline in the cursor blink function. Just a simple yoyo tween will work just fine. Not that a timeline is wrong or anything. A tween is just a bit simpler. Hopefully that helps. Happy tweening.