Latest Comments
  1. Chino Pisces

    I still think that animated GIFs are the best way to execute these type of particle animations. It is far more likely that it will render properly than with CSS code. The only portal that doesn’t render GIFs is Outlook, which fortunately isn’t the staple of our target audience.

    Here are my snowfall examples:
    https://www.behance.net/gallery/31463541/Battlefield-4
    https://www.behance.net/gallery/31339751/Star-Wars-Battlefront (scroll down)

    • Justin

      Very nice cinemagraphs! I know Netflix does that in their emails to great effect as well. For client support, gifs definitely work best. However CSS animations can be a low effort way to add some frills to the email without a lot of production effort or adding extra weight to the email.

    • Red

      Well done. I have been using animated gifs in email for a few years now and agree. It does take some work to properly transition the animations but they do display in most clients. I believe that the latest versions of Outlook do display them now.

  2. Mord Maman

    Thank you for this. Really helpful.
    Do you think this could be done with SVGs of something or other instead of these css circles?

    • Justin

      You should be able to use SVG’s as background images in those clients that support SVG.

      • Mord Maman

        had issues getting svgs to display but works a treat with pngs with transparent backgrounds!

  3. Red

    Basically only works on iOS. Considering that a large percentage of people are opening email on Outlook, Gmail, and Yahoo, this CSS effect does not get seen by most of the audience it is sent to. Animated gifs are still the best way to accomplish this sort of thing.

Leave a Reply

Your email address will not be published. Required fields are marked *