[How to add ANIMATED SVG to the WordPress site(page) in a background?]

Hello,

 

I was able to place the file content into a HTML widget of Elementor.
Made it position: fixed.

It's now being sticky and behind the content as z-index set to -99.

But only the top 5% part of the SVG is being visible. It does not animate fully till the bottom.

How can I tackle that?

[How to add ANIMATED SVG to the WordPress site(page) in a background?]

Hello,

 

Thank you so much for the solution.

Can you just confirm whether this is right way or not.

1. I have saved my svg as this - https://drive.google.com/file/d/1ZIee8pxzfaSHkqtHOD8ofbLDyT3OW4nZ/view?usp=sharing

Is this is the right way? Or should I remove <div id="svg_01img"> tag? But then I feel it won't work.
2. Then I added background-image: filename.svg to the body class on a single page.
3. I loaded my CSS in the header, and JS in the footer after calling GSAP.MIN.JS before the custom JS.
4. I added onscroll="onscrollFunction" to the body tag of the site.

But I can't actually see it working. What am I missing? Sorry for being stupid.

[How to add ANIMATED SVG to the WordPress site(page) in a background?]

Hello,

 

I have this entire HTML code containing CSS, SVG path, and JS. 

Now, my client wants to add this animated svg design in a WordPress site as a background which stay on an entire page. Each page will have it's own animated SVG.

I have attached the file below of the entire code. I am fairly new to GREENSOCK and never worked with any before.

I tried making a separate SVG file by copying SVG code into a new file and saving it as .svg

Also, I was able to add it's CSS(in the header) and JS (to the footer). Also, I am making sure gsap.min.js is being loaded before my custom js. 

If I tried to copy the entire HTML content into a RAW HTML widget and it worked beautifully. But when I am trying to add .svg file as a background it doesn't show anything. 

Can someone help me with this? Thanks a ton!

river_HOME_1.html