Streaming live at 10am (PST)

Color changing svg above color changing div


#1

Hello,

I have a color changing gradient div as the center of my website, but I also want de SVG image above the div to change with the div, is there any way to do this?
The site I am talking about is: faas.webflow.io/test

Thanks!


Here is my site Read-Only: https://preview.webflow.com/preview/faas?preview=df83b34d66efea10468897e0ba741dee


#2

Hi @SanderFrentz!

Why not use just DIV element, instead of SVG? And make it within Webflow ?

For example: Hero section, and section below. Both Section position is Relative.
Inside of hero - make a Gradient DIV same gradient as section below, set height to 400px (adjust as needed), and width 100%. And it’s position is Absolute, and aligned to bottom.
Then apply Transforms to the DIV section, skew and move down.

I Have attached an example below:
Live preview: http://kristaps-template.webflow.io/jquery-and-stuff
Editor Preview: https://preview.webflow.com/preview/kristaps-template?preview=3cce397233aa14aca53ba2adc0b952cc ( Select second page )

Edit: Updated with your Javascript by adding another class to target .gradient-skew.

Hope this helps.


#3

Yes it worked! Thanks a lot!