How can I properly embed a green particle animation in my Webflow site using Codepen?

To embed a green particle animation from CodePen into your Webflow site, you need to properly retrieve and place the embed code to ensure compatibility and performance.

1. Get the Embed Code from CodePen

• Go to the CodePen page with the green particle animation.
• Click the “Embed” button (usually found under the Pen or in the settings menu).
• Choose the desired embed style (default, theme, size).
• Copy the iframe embed code provided (starts with <iframe src="https://codepen.io/...">).

2. Add an Embed Element in Webflow

• In your Webflow project, open the Designer.
• Drag an Embed component from the Add panel into your layout where you'd like the animation to appear.
• Paste the iframe embed code into the HTML editor field.
• Click Save & Close to insert it.

3. Make Sure the Animation is Responsive

• Inside the Embed element, wrap the <iframe> with a div with a set aspect ratio or custom CSS for responsiveness.
• Use styles like:
• 100% width
• Auto or fixed height, depending on content
• Webflow doesn’t support CSS inside HTML embeds, so use Webflow style panels to control layout/styling.

4. Improve Performance and Loading

• Add loading="lazy" inside the <iframe> tag to defer loading until in view.
• Example: <iframe src="..." loading="lazy" />
• Disable autoplay or unnecessary scripts in the CodePen if possible.

5. Optional: Extract the JavaScript Instead

• If you prefer to avoid iframes, you can recreate the animation natively:
• Open the CodePen and copy the HTML, CSS, and JS parts.
• Place the HTML inside an Embed element.
• Place CSS in the Page Settings → Head tag or Style panel.
• Place JavaScript in the Before tag section.
• Make sure to include any external libraries (like particles.js or three.js) used in the CodePen.

Summary

To embed a green particle animation from CodePen in Webflow, use the iframe embed code inside an Embed element, ensure it’s responsive, add loading="lazy" for performance, or optionally recreate the animation natively by extracting the code.