Hi guys, would anyone be kind enough to assist me in implementing this code pen on my site?: https://codepen.io/nathantaylor/pen/rvMaKY
Have a base knowledge of implementing JS & external stuff into webflow, but this one is boggling me haha.
Hi @elwips,
I guess you’ll need to:
- rebuild the entire html structure within Webflow
- implement the images directly within Webflow
- remove the
background-imageattribute of the SCSS (you’ve done it in Webflow already) - transfrom the SCSS into regular CSS using codepen
- copy that CSS into the header wrapped inside
<style>tags - copy the javascript before the end of the
</body>tag
Hope that helps
Thanks Anthony, that does help!
Step 1 is my struggle, I’ve now done a HTML embed directly within a container. I’m testing with this codepen I’ve forked: https://codepen.io/elwips/pen/ywQzYv
So i’m hosting the svg with gist since the svg file is too large for webflows custom html embed element. Un-sure how to target it with css & JS.
I think once I’ve got my head round this it will open a whole new world for me haha!
I’m not sure you can call an svg through a script tag. The script class in your SCSS doesn’t refer to any class in your svg so the css actually does nothing here. I believe you’re trying to do too many things at the same time, try to come up with a simpler case study and build upon it. I am actually not entirely sure what it is that you want to achieve.
You can try come up with a simpler, cleaner svg… I would suggest you build your own svg in illsutrator for example, then export it into svg. Once you have it exported, you can even drag and drop the svg file into codpen (in the html module) and see its code and start clean things you don’t need etc… You could also then use a tool to minify your html like this one that I use all the time: HTML Minifier - Minify HTML and any CSS or JS included in your markup
Again, try to start with simpler svg, understand how to implement it and rebuild the structure in webflow, then only add the custom css / javascript to your project.
Hope that helps 
I think you’re right, I’m gonna use bodymovin to export & implement that way.
Thanks!