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

[Raj Soni]

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

[ZachSaucier]

Hey Raj and welcome to the GreenSock forums.

 

To do this you will want to give your SVG (or a container of it) position: fixed, make sure it is the size of the viewport, and then use z-index to place it below the rest of the content. Then you can animate it however you need to and it will stay in place as the background.

[Raj Soni]

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.

[ZachSaucier]

I think you should take a step back and learn more about HTML, CSS positioning, SVG, and JavaScript. Maybe take some free courses online or watch some tutorial series, following along as they build something (and actually writing the code yourself). Doing so will save you a lot of time in the end because you'll have a better understanding of what you're actually doing. 

 

It's invalid to have divs as a part of a .svg file. As I said, you should inline the actual <svg> tag into your HTML and position it like I described in my last post. It's also not recommended to inline callbacks like your onscroll one. Instead you should use .addEventListener().

 

If you'd like additional help please create a minimal demo of the situation using something like CodePen, making sure to remove all parts of your project that are irrelevant. Often times it's best to create the issue from the ground up.

[Raj Soni]

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?

[ZachSaucier]

It's impossible for us to help blindly. I'm guessing you need to give the SVG an explicit width and height (likely the same dimensions as your viewport). And we have no indication of how you're animating things so we can't help there. As I said, please make a minimal demo if you'd like additional help.