Birds and Halo not working in react

[bisbaldk]

Tried wave, globe, and rings, all of them work fine in my app.

vanta.birds.min.js and vanta.halo.min.js can't be recognized by Sublime Text 3 Js(babel) somehow, other files are syntax-highlighted except these two.

The presenting of HALO is basically darker blue in my background. Using BIRDS gives me this TypeError: Cannot read property 'time' of undefined, it will compile but with this error showing in localhost

I installed vanta using npm yesterday so the version should be up-to-date.

Edit: also, how do you keep/maintain the animation while scrolling down the webpage in react? Like it covers up the whole page even when I'm scrolling back and forth?

Edit: I changed position from absolute to fixed via Chrome Developer Tool and it stays fixed as expected, but I couldn't figure out how to select it in react, I tried to include .vanta-canvas {position: fixed} in both index.css and App.css and none of it worked..

[bisbaldk]

ended up solving it using !important, wonder if there is any other way? seems like the position is set in in-line style.

[tengbao]

1. For the birds - it seems some platforms don't support the GPU operations. Will need to look into a fallback solution
2. Halo might be the same issue - some lack of GPU support
3. positioning: Your "important" solution works, but it's recommended you add 'position: fixed' on the container instead of the .vanta-canvas element itself. That will give you more control over the position of the container.

[bisbaldk]

1. For the birds - it seems some platforms don't support the GPU operations. Will need to look into a fallback solution
2. Halo might be the same issue - some lack of GPU support
3. positioning: Your "important" solution works, but it's recommended you add 'position: fixed' on the container instead of the .vanta-canvas element itself. That will give you more control over the position of the container.

Could you elaborate on this? How can I get birds and halo fixed, I'm using Chrome newest version..

[tengbao]

@zejunli does this fiddle work for you? https://jsfiddle.net/z9jdLbre/

It might be a hardware issue - if your system doesn't support certain GPU operations. Can you try on a different computer?

[bisbaldk]

@zejunli does this fiddle work for you? https://jsfiddle.net/z9jdLbre/

It might be a hardware issue - if your system doesn't support certain GPU operations. Can you try on a different computer?

It does, I'm using macbook pro 2018, which should be fairly common for programmers? How come I can't run it on a mbp.

[bisbaldk]

@zejunli does this fiddle work for you? https://jsfiddle.net/z9jdLbre/

It might be a hardware issue - if your system doesn't support certain GPU operations. Can you try on a different computer?

Hello, I'm using mobile Chrome to test my website, so when I go to tab switcher on my phone, the WAVE animation disappears, it only shows the white background of the website, but then when I click on the tab and the tab goes to full screen, the WAVE animation is back, I wonder whether this is an issue? or it's Chrome that stops the animation while the user is in the tab switcher?

[tengbao]

@zejunli if the problem still exists with the most recent version, can you please attach a screenshot of birds/halo?

if the fiddle works for you, can you isolate the cause of the problem?