Dennyno Posted December 10, 2021 Share Posted December 10, 2021 Hi, to replicate this custom cursor? Doable with gsap? See the Pen abLmBxJ by DedaloD (@DedaloD) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted December 10, 2021 Share Posted December 10, 2021 Hello @Dennyno On 11/3/2021 at 12:26 PM, akapowl said: That smoke effect in the background on mousemove is likely created with WebGL and probably not that easy to realize. While GSAP can also animate things in a WebGL context, you won't be able to create something like that with GSAP alone. For a bit more info, check this recent thread. 2 Link to comment Share on other sites More sharing options...
Dennyno Posted December 10, 2021 Author Share Posted December 10, 2021 You're right. I've found the source, gonna play with it: See the Pen PoJGKOb by DedaloD (@DedaloD) on CodePen Thanks Link to comment Share on other sites More sharing options...
Dennyno Posted December 20, 2021 Author Share Posted December 20, 2021 @OSUblake I found one of your demo here: See the Pen wvBjdWP by GreenSock (@GreenSock) on CodePen I prefer your custom cursor trailer as It's just an svg, instead of a whole canvas which I need to put on a fixed layer behind the dom tree (and doesnt work every where). Do you think is possibile to tweak it, to make it more looking like this one? See the Pen MWEpbZz by DedaloD (@DedaloD) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted December 20, 2021 Share Posted December 20, 2021 The masking effect, where it reveals the text "See the magic", is possible, but that glow effect would be very hard to reproduce with SVG. Even if you could reproduce that glow effect with SVG, I highly doubt the browser would be able to render it at a reasonable framerate. Link to comment Share on other sites More sharing options...
Solution Dennyno Posted December 20, 2021 Author Solution Share Posted December 20, 2021 5 hours ago, OSUblake said: The masking effect, where it reveals the text "See the magic", is possible, but that glow effect would be very hard to reproduce with SVG. Even if you could reproduce that glow effect with SVG, I highly doubt the browser would be able to render it at a reasonable framerate. I see, ok then.. thank you! So sad I cant use that canvas on my code, having many divs in different positions and z-indexes... so trying to add that as as the last element in the dom, with position fixed, gives problem: z-index:0 is higher then the body and it's stuff, and z-index -1 puts the canvas itself behind, so not visibile. I give it up this time Link to comment Share on other sites More sharing options...
alealejandro Posted April 11 Share Posted April 11 Hello! I was playing with this code, and yes! @Dennyno was right with the problem with the z-index, well, it can be solved with pointer-events:none; in the structure, and pointer-events: auto; with links and hovers. The real problem is in touch dispositives, in pc you use scroll to up and down but in smartphones you cant navigate if you dont touch something with pointer-events: auto; and if you touch those elements touchable, the animation doesnt appear! XD I tried in js forcing touch works but, the animation doesnt work up and down, just left and right while touch works, or in a different try the animation works fine but the touch moves like 10px the content and stops, There is a problem while reading the mouse position in that case, cause while the canva is reading to make de animation, the touch tries to read it too to navigate on the web content. and it can't be read at the same time. It can be a way to do it like this web: advanced.team I think they found a way the canva can read the mouse position through the content. For now I give up. see you. 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