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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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? 

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×