Webflow sync, pageviews & more.
NEW

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

TL;DR

To embed a green particle animation from CodePen into your Webflow site, follow these steps:

1. Get the CodePen Embed Code

  • Open the CodePen containing the green particle animation.
  • Click the "Embed" button in the lower right corner.
  • Copy the provided iframe embed code.

2. Add an Embed Element in Webflow

  • Go to Webflow Designer.
  • Drag an Embed element from the Add panel onto your page.
  • Paste the iframe embed code into the custom code editor.

3. Adjust iframe Size (Optional)

  • Modify the embed code to control width and height, for example:
  • <iframe height="500" style="width: 100%;" scrolling="no" src="https://codepen.io/username/embed/xyz" frameborder="no"></iframe>
  • Ensure style="width: 100%;" for responsive scaling.

4. Save and Publish

  • Click Save & Close in the Embed element.
  • Publish the site to see the animation live.

5. Alternative: Directly Add HTML, CSS, and JS

  • Copy the HTML, CSS, and JavaScript from the CodePen.
  • Open Page Settings > Custom Code in Webflow.
  • Paste the CSS inside <style>...</style> in the Header section.
  • Paste the JavaScript inside <script>...</script> in the Footer section.
  • Insert an Embed element in Designer and add the HTML inside.

Summary

The simplest way to add your green particle animation is using a CodePen iframe embed in a Webflow Embed element. For more customization, you can manually add the HTML, CSS, and JavaScript into Webflow’s Custom Code sections.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Where can I find and adjust the Z index in Webflow?
How can I troubleshoot the issue of 4 incorrect pages found in the sitemap.xml of my Webflow project, which is being reported by SEMRush?
How can I switch from hosting my website on Wix to using Webflow and publishing it online?
Can I work as a guest on a client's Webflow workspace with my Freelancer plan in order to embed code, or does the client need to upgrade their workspace for me to do that?
Is "Lsep" appearing in a type block due to a database cache issue on Webflow?
How can I create a modal in Webflow using CSS and positioning techniques?
How can I organize the BEM styles in my Webflow site without needing to create combo classes and adjust properties in a specific order?
How can I achieve a nav bar in Webflow that has a transparent background and removes the white background when in the hero section or at the top of the page?
How can I put the background video in Webflow behind everything? Why don't I get 4 cells when I create 4 columns in my quick stack in Webflow?
How can I make a dropdown open automatically when the page loads in Webflow?
What could be causing the issue with the 100vh rule on the nav container in Webflow, particularly on mobile devices where there is some scrollable space?
How can I use Webflow to show/hide divs based on a user's selection in a form?
How can I add resolution-flexible SVG graphics to my Webflow designs using the Embed element and the currentColor attribute?
How can I make a background video in Webflow play only once?
How can I use the new feature in Webflow to include a Google Map embed for each dynamic record in a directory with hundreds of entries?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
Can the Webflow YouTube component recognize channel IDs instead of video IDs for embedding a Live Stream?
How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?
How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?
How can I fix the issue with the scroll not being smooth on my mobile device (iPhone + Safari) in Webflow?
How can I prevent scroll when my nav is open in Webflow using code? The scroll is disabled correctly when I change the class name of the second 'menu', but it does not get activated when the menu is closed. It doesn't work at all if both class names are the same. Can anyone provide assistance with this issue?
How can I add date filtering to my current list of filters in Webflow using Finsweet CMS Filtering?
How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?
How can I whitelist the IP or user agent of a third-party vendor to crawl my Webflow site for legal compliance archiving purposes?
How can I configure Webflow forms to exclude empty or unchecked checkboxes when sending emails? Additionally, is it possible to customize the email text for checked checkboxes, such as using "réservé" instead of "true"?
How can I dynamically redirect to a CMS created after form submission in Webflow?
How can I make the menu close when a link is clicked in Webflow?
How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?
How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?
How can I add user input to the end of the redirect URL in Webflow?