Gente, pra usar no angular é simples: O :root vc recorta e cola no style.css Fora isso, no css não muda nada. No html não muda nada. Agora no TS vai ficar assim: export class TesteComponent implements OnInit { ngOnInit() { const interBubble = document.querySelector('.interactive')!; let curX = 0; let curY = 0; let tgX = 0; let tgY = 0; [...] restante do código sem mudar nada
does animating the background slow anyone elses browser down? i managed to get a cool effect but im worries it will be slow for the end user. e.g. all my hover items are now delayed.
@@WeCoded Yes, it seems that all browsers use GPU except Firefox that uses CPU for rendering (even with GPU rendering on). I don't really understand how the SVG thing works but i wonder if there is a way to tell firefox to use GPU 🤔
Hey I am getting some problem When I downloaded the source code it's only showing the text Bubbles when I open it in live server no animation nothing is showing then I tried to host it to test it's not showing anything either hey can anyone help me
Hi, I've been trying to fix this in other browsers with no success so far. Only managed to get the blur working, but the custom svg filter doesn't seem to work in safari unfortunately. This seems to be a known issue. The only solution I could think of now is to try replicating this effect in canvas using shaders - which is a totally different story. But at least it'd guarantee the consistency of the effect and would give maximum performance.
@@leejacksondev Hey man, are you able to explain a bit more how you were able to get this to work in safari? I tried placing the svg filter inside g1 g2 g3 etc but this didn't work :(
Amazing UI , you deserve 100K
Finally after 6 hr of debugging changed it to angular code
Could you share code?
Lmao 6 hours why!
Send?
I can't get it to work
Could you send me the code man ?
Can you please share the code?
Almost like a lavalamp, nice.
Thank you so much for this!
It looks super good on chrome. I wish it'd look better on firefox too though
Just used this, amazing mate!
there is a littile problem with edges in firefox browser but it was a super awsome tutorial, thanks for sharing
THIS IS AWESOME!!!!
cool to see you here Manu! @manuarora
Красавчик, лучший!
чётко! супер гуд . показал этим буржуям как градиенты рисовать!
lol
sick. very well made my friend!
Circles and blur wont show how to fix ?
Converted to Nextjs code, working awesome, Thanks a heaps for the effort, Please keep sharing great things.
Can you share the code link please
@@aayushsomani4995 I'm literally in the process of making a React component for NextJs as I type this, ill share you the code when i have it done
@@aayushsomani4995 won't let me send the code sandbox link, what's your github?
@@aayushsomani4995 What's your github so i can send link to sandbox
@@NuttyLlamasftw awesome, let me know if any problems...
Loved it thank you!
is jose mourinho speaking?
О, наш человек)
Can you provide the CSS / HTML code? to use in elementor
Golden. Thank you!
Gente, pra usar no angular é simples:
O :root vc recorta e cola no style.css
Fora isso, no css não muda nada.
No html não muda nada.
Agora no TS vai ficar assim:
export class TesteComponent implements OnInit {
ngOnInit() {
const interBubble = document.querySelector('.interactive')!;
let curX = 0;
let curY = 0;
let tgX = 0;
let tgY = 0;
[...] restante do código sem mudar nada
Would you explain this in depth? I'm really fascinated with your research
Will I convert for react or just give up...
I don't understand what you did in the beginning
this has a big problem that makes the gpu work to hard
Beautiful!
How did you run It?
I downloaded source code, but it not work. How can I do!
oh yeah, this is the stuff
This is Awesome!
got a new subscriber
cool work thx you for that)
does animating the background slow anyone elses browser down? i managed to get a cool effect but im worries it will be slow for the end user. e.g. all my hover items are now delayed.
how can i implement this on my elementor website?
Thank you for this good video ! Is it normal that the svg effect has very low perf on firefox ?
Thank you) hmm, didn't try it on Firefox, tbh. Is performance in other browsers ok?
@@WeCoded Yes, it seems that all browsers use GPU except Firefox that uses CPU for rendering (even with GPU rendering on). I don't really understand how the SVG thing works but i wonder if there is a way to tell firefox to use GPU 🤔
Hey I am getting some problem
When I downloaded the source code it's only showing the text Bubbles when I open it in live server no animation nothing is showing then I tried to host it to test it's not showing anything either hey can anyone help me
same
Wondering if you fixed this? got same problem
@@ConnorGraphics no bro it isn't fixed do you have any idea
This is 🔥
Can you do it in Nextjs 13+?
u's a lie
Nice 😀
i love you bro
I have used this in a project. How do you recommend supplying this to a developer?
It's super cool on Chrome, but it doesn't look well on Firefox, why ?
great!
it doesn't work, and it is impossible to install this on windows
how to implement on elementor on wordpress?
Any hacks to get this to work in Safari? Looks epic in Chrome but Safari it shows as ovals moving around the screen. Would love some ideas.
Hi, I've been trying to fix this in other browsers with no success so far. Only managed to get the blur working, but the custom svg filter doesn't seem to work in safari unfortunately. This seems to be a known issue.
The only solution I could think of now is to try replicating this effect in canvas using shaders - which is a totally different story. But at least it'd guarantee the consistency of the effect and would give maximum performance.
@@WeCoded fixed it. Just apply to g1 , g2 etc as they don’t inherit.
-webkit-filter: url(#goo) blur(40px)
@@leejacksondev , I believe this only fixes the blur filter. The goo effect still doesn't work for me
@@WeCoded
@leejacksondev
Hey, to fix the bubble shapes, set the circle-size variable dependent from your device width,
```
--circle-size: 80vw;
```
@@leejacksondev Hey man, are you able to explain a bit more how you were able to get this to work in safari? I tried placing the svg filter inside g1 g2 g3 etc but this didn't work :(
Nice! The explanation goes a bit quick however and it's difficult to follow what code gets pasted. Very nice tho!
What happens when theres also other pages, would the meshes move along with the scroll? Please respond!
Quick question, I can't get the goo filter to work. I copied your code and even cloned the repo, but it didn't work. What am I doing wrong here?
Thanks brah
thnx
Does this increase CLS (Cumulative Layout Shift) for the core web vital performance ...?
No, it shouldn't.
@@arpiliad7739 You are correct, I also checked it
can you publish the source code?
anyone get this to webflow?
как это вставить в elementor?
safari doest work
not working
I want copy code
Source code is here finally :) Check description
Which font-family?
fonts.google.com/specimen/Dongle
@@WeCoded thanks
I came here for the name of that font😂
como aplicar isso no elementor?
не работает
No source code 😅... thanks btw
I should've published it, true 😅 maybe I will, just need some extra time
Added the source code :)
@@WeCoded you are an angel ... thanks million
лол наш што ли ?
Кнш😊
@@oldiBerezko_ акцент жесть ))))) ті давно в єтой сфере ? мог бы мой сайт покретиковать можнт посоветовать в общем взглянуть +
мненние ?