jQuery slashesAndCircles

Animate random slashes and circles in a clipPath area of an SVG, avoiding certain areas.

This is a tremendously basic plugin leveraging jQuery and TweenLite for a cool, swish opening animation. The only purpose I have for this plugin is for Jordsta.com and related materials, but I'm reusing it enough that I felt that it needed a plugin.

The animation on Jordsta.com comprises of an <svg> with a linear gradient, clipped by a few simple shape paths (slashes and circles). When the page is loaded, this plugin manipulates the <svg>, grabs each of the shape paths and animates it into a random position in the available space. The random position prevents any overlaps, and takes into account any absolute positioned elements on top of the <svg> (specified with the avoid parameter on plugin initialization).

Feel free to use and fork this plugin, but at the moment it's one-purpose, and heavily tied to the example HTML and TweenLite.

This is yet another jQuery plugin made with help from jQuery Boilerplate.

Usage

1. Include jQuery if you haven't already:

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

2. Include TweenLite and required plugins:

   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenLite.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/easing/EasePack.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/plugins/CSSPlugin.min.js"></script>

3. Slap in some SVG:

	<svg width="100%">
		<!-- Rectangle, what the gradient sits on -->
		<rect x="0" y="0" width="100%" height="100%" clip-path="url(#theSVGPath)" fill="url(#gradient)" />
		<defs>
			<!-- Gradient, to be clipped by the clipPath -->
			<linearGradient id="gradient" x1="384" y1="1284" x2="2051" y2="-384" gradientUnits="userSpaceOnUse">
				<stop offset="0.1" stop-color="#ff5722" />
				<stop offset="0.18" stop-color="#f65729" />
				<stop offset="0.32" stop-color="#dc563d" />
				<stop offset="0.5" stop-color="#b3555c" />
				<stop offset="0.71" stop-color="#7a5388" />
				<stop offset="0.9" stop-color="#3f51b5" />
			</linearGradient>
			<!-- And here's the clipPath, containing some basic SVG paths -->
			<clipPath id="theSVGPath">

				<!-- Slashes and Circles (you can swap these out for anything, really) -->
				<path d="M1 144a2 2 0 0 1-1-3L80 1a2 2 0 0 1 3-1 2 2 0 0 1 1 3L4 143A2 2 0 0 1 1 144Z" transform="translate(-250,240)" fill="#396c93" data-width="85" data-height="145" class="slashes" id="slash1"/>

				<path d="M35 11c5 12-3 26-17 26C5 37-4 23 2 11 4 5 10 0 18 0S33 5 35 11ZM18 5c-7 0-11 4-13 8C2 22 8 32 18 32s16-10 13-19C29 8 25 5 18 5Z" transform="translate(-250,240)" fill="#396c93" data-width="37" data-height="37" class="circles" id="circle1"/>

				<!-- ...snip -->
			</clipPath>
		</defs>
	</svg>

4. Include jquery.slashes-and-circles.min.js:

   <script src="dist/jquery.slashes-and-circles.min.js"></script>

5. Call the plugin:

   $("svg#element").slashesAndCircles({
   	elements: $('.slashes, .circles'), 	// elements to animate
   	avoid: [],							// what elements the plugin should avoid
   	allowAnimation: true				// allow or deny animation
   });

And you're done!

Structure

The basic structure of the project is given in the following way:

├── demo/
│   └── index.html
├── dist/
│   ├── jquery.slashes-and-circles.js
│   └── jquery.slashes-and-circles.min.js
├── src/
│   └── jquery.slashes-and-circles.js
├── .editorconfig
├── .gitignore
├── .jshintrc
├── .travis.yml
├── Gruntfile.js
└── package.json

demo/

Contains a simple HTML file to demonstrate your plugin. A better example should be viewable on the Jordsta.com website in the near future.

dist/

This is where the generated files are stored once Grunt runs.

src/

Contains the files responsible for your plugin, you can choose between JavaScript or CoffeeScript.

.editorconfig

This file is for unifying the coding style for different editors and IDEs.

Check editorconfig.org if you haven't heard about this project yet.

.gitignore

List of files that we don't want Git to track.

Check this Git Ignoring Files Guide for more details.

.jshintrc

List of rules used by JSHint to detect errors and potential problems in JavaScript.

Check jshint.com if you haven't heard about this project yet.

.travis.yml

Definitions for continuous integration using Travis.

Check travis-ci.org if you haven't heard about this project yet.

Gruntfile.js

Contains all automated tasks using Grunt.

Check gruntjs.com if you haven't heard about this project yet.

package.json

Specify all dependencies loaded via Node.JS. This includes jQuery and GSAP.

Check NPM for more details.

Contributing

Check CONTRIBUTING.md for more information.

History

Check Releases for detailed changelog.