Comunica+A Posted February 5, 2020 Share Posted February 5, 2020 Hi, I'm trying to make an animation like this:https://www.shutterstock.com/es/video/clip-1030373105-neon-frame-animation-on-black But I don't get the line to chase itself. ¿How could i get this animation? Thanks! See the Pen qBdWvVW by maxpower78 (@maxpower78) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted February 5, 2020 Share Posted February 5, 2020 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 More sharing options...
ZachSaucier Posted February 5, 2020 Share Posted February 5, 2020 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. 2 Link to comment Share on other sites More sharing options...
mikel Posted February 5, 2020 Share Posted February 5, 2020 Hola @Comunica+A, ... or you analyze and fork this concept of our famous @Diaco See the Pen QbgLmV by MAW (@MAW) on CodePen Happy drawing ... Mikel 5 Link to comment Share on other sites More sharing options...
Comunica+A Posted February 6, 2020 Author Share Posted February 6, 2020 Thanks for your help. Due to the complexity of this effect, we have finally chosen to make other effect with css. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted February 6, 2020 Share Posted February 6, 2020 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 More sharing options...
mikel Posted February 8, 2020 Share Posted February 8, 2020 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 4 Link to comment Share on other sites More sharing options...
Cassie Posted February 9, 2020 Share Posted February 9, 2020 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. 2 Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted February 9, 2020 Share Posted February 9, 2020 ^ 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 4 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 19, 2020 Share Posted February 19, 2020 The same DOM dots technique can be used in combination with DrawSVG to create similar effects: Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now