Dynamic backgrounds

Hi there,

Im wondering how its possible to have dynamic backgrounds on webflow…

Like a background that has a video streaming on it, or objects moving…

For example on the new webflow cms page https://webflow.com/cms

The bottom part of the page is dynamic and has objects moving in the background… looks great

Thanks for the help

Hello @mattmcs!

In that case they used some png images and gave them looped interactions which scaling images. :wink:

Cheers,
Anna

@mattmcs @sabanna I think more interesting is the very subtle highlight effect on the video of the cms page, where a highlight runs across it, I think it could…? be achieved with a series of interactions and a div with an opacity gradient but the rotation makes it difficult…

Arthur

Cool thanks - looks great … ill have to try this out

Just noticed the video also has a play button and outline which change colour so that has to be a video/gif, it just wouldn’t make sense to have loads of colours and cycle though them in interactions.

Arthur

It is svg image, no interactions with it inside the site code
https://daks2k3a4ib2z.cloudfront.net/55bbacb53d077ec62c761ffa/55c2a9352f29b8014473a66c_video.svg

1 Like

Yeah I checked :slight_smile: thanks!

Arthur

1 Like

How can i import svg’s into my designs? I already have loads of svg in html but don’t know how to take them to webflow?

Did you try to upload it through asset manager?

1 Like

i’ve never tried any process. I have previously worked with svg on video scribe, so i was thinking if it’s possible to create same animation effect on svg in webflow or something similar. do you have a short tutorial on how i can work with svg on webflow?

Unfortunately, I have not enough experience in working with SVG. Maybe @vincent can help you with some tips? :wink:

Currently you can only upload existing SVG files as images into webflow - no ability to change their properties / styles / animation or so forth.

@jaidenleach do you know if you can change them in the custom code section?

Arthur

Thanks for the call out Anna :smile:

You can indeed use inline SVG with Webflow and it’s kind of very practical and effective.

Here I use a custom code widget to paste both SVG code and a “mini” CSS. See how the third icon has a lighter opacity and stroke width. I added a class to a group (<g> element) and target this class with CSS right underneath. As edits appear right away in Webflow preview, it’s as easy as it looks in the image.

http://vincent.polenordstudio.fr/snap/rj39r.jpg

WF is not yet really SVG ready but this is surprisingly easy to do. I’ll post again – later – details of the same experiment using the CVG element, it allows to declare SVG code somewhere and then create instances of it.


Edit: I’ll try to publish the page above in the sandbox tomorrow. Icons shown are from Webalys’ Streamline collection. Very high quality icons, and the code is consistant so you don’t have to deal with a new SVG hierarchy for each icon (it can happen with some other collections and it makes the work a bit tedious.


Edit2: worth mentioning that if you edit your SVG icon code, add classes and juste save it as a SVG file, then use it as an image in Webflow, it will NOT work. You can’t target a class in an SVG file with CSS, at least not by default. However, if you ceate an interactive SVG file with animations etc. and use it as an image in Webflow, it will animate and react very well, as a standalone component.


Edit3: would it be a good idea for Webflow to be the first live editor to extensively support SVG, allowing us to visually alter the hierarchy of objects, add classes and CSS properties, and be able to animate the properties using the states and the Interactions? Absolutely! I’m convinced and if you are too, don’t hesitate to test the experiments above and ask for SVG support in the forum Whishlist category :wink:

3 Likes

@vincent thanks this is very helpful! I’ve been trying to work with svgs for a while… can you let me know when it’s live??

Thanks,

Arthur

I will. I have massively deployed SVG files on clients sites for 15 months, sites who get a lot of traffic from all around the world in a lot of various conditions. And it’s always well supported. I recommend it!

Don’t wait for my page to start because it’s very simple to reproduce… take a few minutes. SVG files can be opened in a text editor and from there, add a class and copy the code as the image shows.

you have been very helpful, i’ll check this out now. But the only way i can make svg animated is using video scribe for example and the output is not svg but mp4 video files. how do you animate svg and it still remains svg?

Awesome @vincent will go learn it all now! Thanks :smile:

Arthur

This topic was automatically closed after 60 days. New replies are no longer allowed.