Jump to content
Search Community

Neon stroke animation

Comunica+A test
Moderator Tag

Recommended Posts

Hey Comunica+A and welcome to the GreenSock forums.

 

This effect is very tough, if not impossible to do well using DOM elements. The closest similar effect that I can think of is this approach by @Cassie, but even it is 1) not terribly performant and 2) what you're attempting to do would likely take even more elements and animation power (especially with a "glow" effect like that) which would make it even less performant. 

See the Pen VwZBjRq by cassie-codes (@cassie-codes) on CodePen

 

If I were tasked with making this effect I would 1) push back against it because it's going to take a lot of time to figure out how to do exactly. Maybe a similar effect that doesn't have the color change or glow effect would be easier to make. And 2) look into doing this via WebGL. Active Theory did a similar effect here: https://medium.com/active-theory/neon-a-webgl-installation-fdf540c42152 but you'd have to also apply a shader or something to make the line taper off towards the end.

  • Like 2
Link to comment
Share on other sites

See the Pen ymbmqa?editors=1010 by oliviale (@oliviale) on CodePen

 

 

I agree with Zach, I emphatically suggest you don't try anything like my pen in production. It's pretty horrific on performance!

But this pen from Olivia is a similar effect, very simple and much less of a performance overhead. Just stroke animation and a little glow filter.

  • Like 2
Link to comment
Share on other sites

 

^ What no GSAP? ¯\_(ツ)_/¯ 😉

 

@Cassie also has a nice write up on that (performant or not) https://www.cassie.codes/posts/creating-my-logo-animation/

 

Here is a more basic SVG Rect version of CSS Only, I miss Anonymous posts. ;-)

See the Pen VGEYEa by anon (@anon) on CodePen

 

On 2/5/2020 at 7:27 AM, Comunica+A said:

But I don't get the line to chase itself.

 

Welcome to the forum @Comunica+A on a basic level maybe something more like this for chasing in your example?

 

var tl = new TimelineMax({repeat:-1});
tl.fromTo(".Neon", 1, {drawSVG:"0% 0%"}, {drawSVG:"0% 100%", ease:Power4.easeIn});
tl.to(".Neon", 1, {drawSVG:"100% 100%", ease:Power4.easeOut});

 

For a more advanced approach to chasing have a look at this thread and article about chasing by @PointC

https://greensock.com/forums/topic/19030-how-to-create-seamless-loop-of-svg-rect/ [some of these codepens in this thread by @PointC don’t seem to work anymore but I didn’t investigate why?]

https://codepen.io/PointC/post/seamless-loop-svg-stroke-animations


You could also look into Canvas or Pixi, etc., as @OSUblake demonstrates below.

See the Pen XXbLer by osublake (@osublake) on CodePen

  • Like 4
Link to comment
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...