Jump to content


Animating CSS Circles

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm laying out ideas on how to approach an animation that will happen in multiple places across an entire site. While I know I could use DrawSVG...the way I developed these circles for each section was specifically for ease of control of the various sizes across sections, viewports, etc...so I opted for a circle created with straight CSS rather than SVG.


Can you do a similar draw effect with the circles on CSS properties, without having to use SVG and DrawSVG?



Screen Shot 2018-03-27 at 12.04.24 PM.png

Link to comment
Share on other sites

Hi @nmarketti :)


You can, but I'd then ask why do you want to do that? I've seen some CodePen demos creating this effect, but they seem a bit over-complicated for the end result. DrawSVG does it with one line of code and SVG scales perfectly with window resizes. I would think SVG would be the easier choice, but that's just my two cents worth. Others may drop by with different thoughts or an easy solution.


Happy tweening.



  • Like 4
Link to comment
Share on other sites

Hmmm. I like simple. I might look into refactoring the setup then for the circle effect. I'm not entirely sure if I want to go this direction either, just pinging the forum to see if there was a simple way.



Link to comment
Share on other sites

You can draw a circle in 1 line of code using canvas or SVG. With CSS, you have to use multiple elements, like here, or a clip-path, which doesn't have good CSS support.


The easiest option seems like SVG, then canvas, followed by CSS in a distant last.

  • Like 5
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.