dileepkp123 Posted May 28, 2020 Share Posted May 28, 2020 Hello there, I have a problem When I move the mouse, I want to see those red particles as a single line please help See the Pen xxwoGbp by Dileepkp001 (@Dileepkp001) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted May 28, 2020 Share Posted May 28, 2020 Hey dileepkp123. What do you mean "a single line"? As you're moving the mouse around the page, how are you wanting the red dots to behave? Link to comment Share on other sites More sharing options...
dileepkp123 Posted May 29, 2020 Author Share Posted May 29, 2020 15 hours ago, ZachSaucier said: Hey dileepkp123. What do you mean "a single line"? As you're moving the mouse around the page, how are you wanting the red dots to behave? hai zachsauciar All those red dots should be combined into one single line like this ,Like drawing with a red pen, animation is what I need to get the output.please help me Link to comment Share on other sites More sharing options...
ZachSaucier Posted May 29, 2020 Share Posted May 29, 2020 You need a lot more elements to do that effect. It likely makes sense to use <canvas> to create the dots that follow the mouse because you're able to have a lot more elements on the page with better performance. Alternatively you could use an actual line element and animate the control points based on the mouse position. That way you know it will always be continuous. Here's something similar by @OSUblake using SVG. He may have more similar demos somewhere in his storage See the Pen ZOvvOX by osublake (@osublake) on CodePen 2 Link to comment Share on other sites More sharing options...
OSUblake Posted May 29, 2020 Share Posted May 29, 2020 46 minutes ago, ZachSaucier said: He may have more similar demos somewhere in his storage Somewhere in my private pens. See the Pen bfafda9d056dbc126333b67dfdbd12b7 by osublake (@osublake) on CodePen 3 Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted May 29, 2020 Share Posted May 29, 2020 @OSUblake I think your Line Trails example might be an even better representation of a continuous line. GSAP 2 See the Pen mEpado by osublake (@osublake) on CodePen GSAP 3 (discussed here) See the Pen wvBjdWP by GreenSock (@GreenSock) on CodePen 4 Link to comment Share on other sites More sharing options...
dileepkp123 Posted May 30, 2020 Author Share Posted May 30, 2020 On 5/28/2020 at 6:48 PM, ZachSaucier said: Hey dileepkp123. What do you mean "a single line"? As you're moving the mouse around the page, how are you wanting the red dots to behave? haii Shrug ¯\_(ツ)_/¯ I need to implement this animation in the WordPress template ,I just implanted it in my code and it doesn't work,, I have saved all the cdn files This link is on the home page where it looks. I need cursor animation https://dileep.31its.com/thdgstaging/ Link to comment Share on other sites More sharing options...
OSUblake Posted May 30, 2020 Share Posted May 30, 2020 20 hours ago, Shrug ¯\_(ツ)_/¯ said: GSAP 3 (discussed here) So funny how many times I find some of my code on stackoverflow. I have a pretty low reputation on there. Can't even bust the 1,000 rep mark. https://stackoverflow.com/users/2760155/blake-bowen 1 Link to comment Share on other sites More sharing options...
OSUblake Posted May 30, 2020 Share Posted May 30, 2020 20 hours ago, Shrug ¯\_(ツ)_/¯ said: @OSUblake I think your Line Trails example might be an even better representation of a continuous line. I was going to post that one, but the "snake" effect is so cool. See the Pen vKoXwW by osublake (@osublake) on CodePen 3 Link to comment Share on other sites More sharing options...
ZachSaucier Posted May 30, 2020 Share Posted May 30, 2020 3 hours ago, dileepkp123 said: I need to implement this animation in the WordPress template ,I just implanted it in my code and it doesn't work It's pretty hard to debug on a live site where it's hard to find things and we can't edit it. Are you saying that you can get it to work on CodePen but not in WP? We may not be able to help with that. 1 Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted June 1, 2020 Share Posted June 1, 2020 Nice one @OSUblake, its reminiscent of stuff Bit-101 did back in Flash many years ago, he had lots of cool tentacle related stuff. 1 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