CODEWITHSUNDEEP
javascripthtmlcssparallaxskrollr
cheng
cheng

Reputation: 1324

Animating a circular border with Skrollr.js

I'm currently working with skrollr.js on a news article. I have one circular div element (border-radius: 50%) and I want to use skrollr.js's pathing option to animate the border to make it trace around the div in a different color.

However, I've tried looking for a simple guide on how to use this SVG pathing and there isn't much besides this GitHub example which doesn't help much.

So I'm wondering if there's an easy way to just draw a perfect circle with a specified radius using the SVG path tag?

Upvotes: 0

Views: 313

Answers (1)

Nakul Saxena
Nakul Saxena

Reputation: 11

This could be done easily using the stroke-dasharray and stroke-dashoffset properties of an SVG path. They can be changed with the skrollr.js library like any other css property like margin etc. This is explained well in the following example : http://jakearchibald.com/2013/animated-line-drawing-svg/ Hope this helps. :)

Upvotes: 1

Related Questions