I am extremely new at any kind of CSS work or embedding and have been struggling a bit. I found this timeline code on Codepen and have been trying to figure out how to integrate it. I have run out of ideas on how to make it work. The point it is at now is the closest I’ve got to it working thanks to the advice here: Where to Put HTML and CSS from Codepen - #2 by vincent.
The CSS code in the website is currently compiled as suggested in that thread.
Both the embeds are in the page and nothing in the head or body due to that looking as seen below in the screenshot, when in the editor. When visiting the published site it looked identical to the one now.
There is a ton of errors in the browser console, however, I am unsure how many are relevant so I am posting them all below.
It appears that this is purely html and CSS and from what I’m seeing all of this could easily be achieved using built-in Webflow interactions. Basically a rotation and moving a div with a gradient across the screen on hover and out on hover out.
While you can import code into Webflow my general recommendation would be to build this in the platform b/c why are you using it if you are just going to import code? You could just hand code a site with no builder in that case…
I’m not seeing any of the console errors you are, looks like they are mostly referencing a missing .js file though.
@sam-g Fair point, and I began doing that. I just thought if I learned how to do it, it could be easier for me in the future. I’ve figured out the squares rotating and changing color, however, I’m not sure as to how to make the lines change sizes on the side though. Any ideas?
You could scale them on the y axis only, just make sure to set a transform origin in the center so it scales from the middle. Or you could make a div that covers the line and moves over it on hover. Probably absolutely positioned outside of the parent (overflow hidden on parent) that moves into view and over the line on hover.
The lines don’t change size, they’re actually masked by the square element, that has a white outline… as it rotates and the outline goes from corner to side, it briefly reveals more of the lines.
just wanted to point out that on the CodePen you’ve linked, the CSS code is written in SCSS, and SCSS has to be converted in CSS before being embeded in Webflow.
But anyway, @Konrad_Baj is right, make it work with Interactions in Webflow.
