Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Comunica+A

Neon stroke animation

Recommended Posts

Hey @Comunica+A,

 

Welcome to the GreenSock Forum.

 

Try this


// Add External Scripts

https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js
https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js

 

Happy tweening ...

Mikel

Link to comment
Share on other sites

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

Thanks for your help. Due to the complexity of this effect, we have finally chosen to make other effect with css.

  • Like 1
Link to comment
Share on other sites

7 hours ago, Comunica+A said:

Thanks for your help. Due to the complexity of this effect, we have finally chosen to make other effect with css.

Are you saying it's somehow less complex to do in CSS? Can you share how/why? 

Link to comment
Share on other sites

 

Hey,

 

Just as a try, if you vary the DIACO concept, for example with motionPath

 

See the Pen XWbJdRp by mikeK (@mikeK) on CodePen

 

and here is another variant.
However, I don't find an option to bypass the delay in the first tween, kill for the repeat 

 

See the Pen abOzyJb by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

  • Like 4
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...

The same DOM dots technique can be used in combination with DrawSVG to create similar effects:

 

Link to comment
Share on other sites

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.
×