Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
nmarketti

Animating CSS Circles

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 post
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 post
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.

 

Thanks! 

Link to post
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 post
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.

×