How to implement/change this background graphics

Publishing help Editor
1

Hi,

I’ve made a design for a client which seems impossible for me to develop in Webflow.

The main aspect is the (stationary) lines with lighting effect that flow through the sections to guide the visitor to certain elements.
In other words, when I place the lines correctly at 1940, it will not be in the right place when the browser scales down. Instead the lines will go through parts of the content where it should go around.

Does anyone know how to make this possible and responsive?
I can’t seem to get it in the right position and I’m wondering if I should change the design last minute.

Problem is the deadline is in a couple of days and this design aspect has been accepted for several upcoming projects…

Any help would be greatly appreciated!

See screenshots:

image 1
image 11220×983 49.8 KB

image 2
image 21263×969 48.1 KB

2

One way can be to make the whole animation first on adobe after effects (the wire lighting up from top to bottom), import it to webflow as a lottie (there’s content on webflow university on how to do so). Then have the lottie animation as background behind all elements. Then you can add a new animation on scroll so that as the page scrolls the lottie animation plays. you can hit and try to match it correctly.

3

The lines will be stationary.
My problem is that I can’t make it responsive with the responsive content.

For example in 1940 it is placed correctly. But when scaling down the browser it will not be placed proper anymore around the content. Instead it will go through text blocks etc.