Jump to content


  • Posts

  • Joined

  • Last visited

About Superfein

Profile Information

  • Location

Contact Methods

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Superfein's Achievements

  1. Oh, haha, somehow I missed that whole section in the docs. My bad. Thanks Mikel, that's super clear.
  2. I would really appreciate some clarification on the scrollTrigger end values. In the demo it's set to 'max' which works well in the demo but on my long homepage the end appears at the bottom of the page, very far away from the actual end of the line animation, so the animation doesn't work. I replaced it with a numerical value, 800, which seems to work well. I gather from the docs that the 800 value would be in pixels, is that correct? Was the 'max' value only meant for development, to be paired with the markers set to true? I saw in the GSAP cheatsheet this: end: "20px 80%", // [trigger] [scroller] positions // or relative amount: "+=500" What does the +=500 value mean, as in, what does relative amount mean in this instance? Thanks!
  3. Incredible! You really go above and beyond. I'm really chuffed. Thanks again @Cassie and @mikel.
  4. YES!!! @mikel this is exactly what I had in mind. Thank you!!
  5. Thank you so much @Cassie and @mikel! This forum is so friendly and inclusive, real SVG animation enthusiasts live here. I had no idea SVG filter primitives were so powerful, and could be layered to produce the exact same effect as box shadow 🤯. Can SVG filters be animated? For instance, could the tube be set at whatever height (let's say 100vh) with the fill color set, so it's a neon tube turned off, and then the SVG filter glow effect animates down the tube using scrollTrigger? Or maybe the filter self-draws downwards on page load? Not sure what's possible with filters, how animatable they are. I have joined the SVG Slack channel, that's like the pot of gold at the end of the SVG rainbow! Thanks for the invite, so kind!!
  6. Hi! I was inspired by this Pen: https://codepen.io/GreenSock/pen/rNOBLBV I have a neon tube (SVG with several box shadows for the glow) and I was wondering what would be the best way to animate it on scroll? I know that animating box-shadow is non-performant, so what are my options if I want to have the neon glow and animate the glow from top to bottom of the SVG on scroll? Could I animate the height of the SVG as a way to make it look like the tube is animating down...but I thought it would look more impressive if the tube is there without the glow and the glow animates downwards on scroll. Any assistance much appreciated! P.S. Hoping Cassie responds because she's my SVG animation hero. 😀