We Keep Coding

How to import Javascript module

I'm trying to use http://spin.js.org/ to create a spinner on my site that starts spinning when an AJAX post fires and stops when it completes. I'm struggling to get the spinner working at all, though.
I have a node app and am templating with EJS. Under the usage section, spin.js's website says:
import {Spinner} from 'spin.js';
var opts = {
lines: 13, // The number of lines to draw
length: 38, // The length of each line
width: 17, // The line thickness
radius: 45, // The radius of the inner circle
scale: 1, // Scales overall size of the spinner
corners: 1, // Corner roundness (0..1)
color: '#ffffff', // CSS color or array of colors
fadeColor: 'transparent', // CSS color or array of colors
opacity: 0.25, // Opacity of the lines
rotate: 0, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
fps: 20, // Frames per second when using setTimeout() as a fallback in IE 9
zIndex: 2e9, // The z-index (defaults to 2000000000)
className: 'spinner', // The CSS class to assign to the spinner
top: '50%', // Top position relative to parent
left: '50%', // Left position relative to parent
shadow: none, // Box-shadow for the lines
position: 'absolute' // Element positioning
};
var target = document.getElementById('foo');
var spinner = new Spinner(opts).spin(target);
I'm not sure where the import {Spinner} from 'spin.js' is supposed to go? I've searched around a lot and haven't been able to find out how to actually implement this. I found this example of a jquery plugin for spin.js but I'm struggling with that one as well. Any help would be much appreciated!
As of right now, this is what I have:
<div id="spinnerContainer" class="spinner" style="width:100px;height:100px;background-color: Gray; color:black;">
</div>
<script src="/scripts/spin.js/spin.js" type="text/javascript"></script>
<script>
var opts = {
lines: 20, // The number of lines to draw
length: 0, // The length of each line
width: 15, // The line thickness
radius: 42, // The radius of the inner circle
scale: 0.85, // Scales overall size of the spinner
corners: 1, // Corner roundness (0..1)
color: '#41d62b', // CSS color or array of colors
fadeColor: 'transparent', // CSS color or array of colors
opacity: 0.05, // Opacity of the lines
rotate: 0, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
speed: 1, // Rounds per second
trail: 74, // Afterglow percentage
fps: 20, // Frames per second when using setTimeout() as a fallback in IE 9
zIndex: 2e9, // The z-index (defaults to 2000000000)
className: 'spinner', // The CSS class to assign to the spinner
top: '50%', // Top position relative to parent
left: '50%', // Left position relative to parent
shadow: 0, // Box-shadow for the lines
position: 'absolute' // Element positioning
};
var target = document.getElementById('spinnerContainer');
var spinner = new Spinner(opts).spin(target);
</script>
The script to load in spin.js is finding the file correctly, but then I get the error Uncaught SyntaxError: Unexpected token export referencing the line export { Spinner }; from spin.js
I also get an error saying Uncaught ReferenceError: Spinner is not defined which I assume is related to the error above but I'm not sure.

Perhaps all you want is to use a CDN version if you aren't set up to manage imports
var opts = {
lines: 20, // The number of lines to draw
length: 0, // The length of each line
width: 15, // The line thickness
radius: 42, // The radius of the inner circle
scale: 0.85, // Scales overall size of the spinner
corners: 1, // Corner roundness (0..1)
color: '#41d62b', // CSS color or array of colors
fadeColor: 'transparent', // CSS color or array of colors
opacity: 0.05, // Opacity of the lines
rotate: 0, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
speed: 1, // Rounds per second
trail: 74, // Afterglow percentage
fps: 20, // Frames per second when using setTimeout() as a fallback in IE 9
zIndex: 2e9, // The z-index (defaults to 2000000000)
className: 'spinner', // The CSS class to assign to the spinner
top: '50%', // Top position relative to parent
left: '50%', // Left position relative to parent
shadow: 0, // Box-shadow for the lines
position: 'absolute' // Element positioning
};
var target = document.getElementById('spinnerContainer');
var spinner = new Spinner(opts).spin(target);
<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.js"></script>
<div id="spinnerContainer" class="spinner" style="width:100px;height:100px;background-color: Gray; color:black;">
</div>

I was getting same error open the CDN file from #charlietfl answer copy it and replace it with your spin.js file. It will work.

GSAP SVG Transform Origin bad behavior

I'm trying to make this orbits rotates from the center (transfrom-origin: 50% 50%) but why it's still moving?
// Show Premium
function showPremuimPackage(el) {
// if Premium is selected
if(planetAdvance.hasClass('unselected') && planetEssential.hasClass('unselected')) {
let tlArrange = new TimelineMax();
tlArrange
// move selected
.to(premiumOrbit, .6,{transformOrigin:"center", rotation: '-50%', ease:Power1.easeOut})
.to(planetPremium, .6,{rotation: 50,transformOrigin:"50% 50%", scale: '2', ease:Power1.easeOut},'-=1')
// move unselected
// Advanced
.to(advanceOrbit, .6,{rotation: "50%", transformOrigin:"center", ease:Power1.easeOut},'-=.5')
// .to(planetAdvance, .6,{scale: '.4.5', rotation: -50,
transformOrigin:"50% 50%", ease:Power1.easeOut}, '-=.5')
// // Essential
// .to(essentialOrbit, .6,{rotation: '-50%',
transformOrigin:"50% 50%", ease:Power1.easeOut},'-=.5')
// .to(planetEssential, .6,{transformOrigin:"50% 50%",
ease:Power1.easeOut},'-=.5')
;
}
}
https://codepen.io/G-ROS/pen/WOrMrb
Why its doesn't rotate in the middle. And if you keep clicking the other planets it get a mess (need to uncomment to see it ). What I need to do to keep things always centered and not move around when rotating.
Thanks a lot guys.

Kinetic.Tween fail to fade a text with opacity

I try to make a text fading with kineticjs using Tweens, I succefully made a text moving with them, but the text don't seems to fade.
So it could be great if someone explain me what I'm doing wrong
Here is a jsfiddle, the opacity should be at 0.1 when the alert 'tween finished' show up, but opacity didn't moved.
var stage = new Kinetic.Stage({
container : 'contain',
width: $('#contain').width(),
height : $('#container').height(),
});
var layer = new Kinetic.Layer();
//Fade the text in, then fade it out.
var textBegin = new Kinetic.Text({
text : 'Text to fade',
fill : '#00CCFF',
fontSize : 45,
x : stage.width()/2,
y : stage.height()/2,
opacity : 1,
});
textBegin.offsetX(textBegin.width()/2);
textBegin.offsetY(textBegin.height()/2);
var tweenIn = new Kinetic.Tween({
node : textBegin,
opacity : 0.1,
duration : 1,
easing : Kinetic.Easings.Linear,
onFinish : function(){
alert('tween finished');
}
});
var tweenOut = new Kinetic.Tween({
node : textBegin,
opacity: 0,
duration : 1,
});
layer.add(textBegin);
stage.add(layer);
//setTimeout(textBegin.tweenOut.play, 1200);
tweenIn.play();
EDIT: Tried to change the property of the tween and it doesn't work either...

Create Tween AFTER adding shape to layer.
http://jsfiddle.net/z26tgnkd/6/

draw tokens in the circle with jointjs

I want to draw some tokens (small circle) in the circle via jointjs, how can I do it ?
This code draw a circle with the text "token" and I want to replace "token" by a circle.
var place =
new joint.shapes.basic.Circle({
id:'place1',
position: {x:100, y: 180},
attrs: {circle: {fill: '#FFFFFF'}, text: {text:'TOKEN', fill:'#000000'}}
});

This looks like a good candidate for the JointJS Petri Net shapes plugin (joint.shapes.pn.js). See a demo at: http://jointjs.com/demos/pn. You can download the plugin from here: http://jointjs.com/download. Then use:
var place = new joint.shapes.pn.Place({
position: { x: 140, y: 50 },
tokens: 1
});

Is path animation possible with SVG.js

There are many examples of SVG path animation, both natively
http://jsfiddle.net/FVqDq/
and with Raphael.js
http://jsfiddle.net/d7d3Z/1/
p.animate({path:"M140 100 L190 60"}, 2000, function() {
r.animate({path:"M190 60 L 210 90"}, 2000);
});
How is this possible with the svg.js library?

No, this is not yet possible with svg.js. I have been looking into it and it will be a rather large implementation. As I try to keep the library small it will never be part of the library itself, but I might write a plugin. Although at the moment I do not have much time on my hands so all help will be appreciated.
UPDATE:
This is now possible with SVG.js out of the box if you use paths with equal commands but different values.
But we also have a path morphing plugin for SVG.js which is probably the thing you are looking for.

There is a quick and dirty way to animate a line with svg.js:
http://jsfiddle.net/c4FSF/1/
draw
.line(0, 0, 0, 0)
.stroke({color: '#000', width: 2})
.animate(1000, SVG.easing.bounce) // Using svg.easing.js plugin(not required)
.during(function(t, morph) {
this.attr({x2:morph(0, 100), y2: morph(0, 100)})
})
Animating complex SVG paths as wout said will require a plugin.
Unfortunately I don't (yet) know enough about SVG, but I'm thinking of writing a plugin which would use the SMIL animation tag. Which is what is used in the first link of the question.

We can make path animation by finding the bounding box of your path and the do like this.
if your path having some clipping -rectangle means like that below
<g id="container_svg_SeriesGroup_0" transform="translate(128.8,435)" clip-path="url(#container_svg_SeriesGroup_0_ClipRect)"><path id="container_svg_John_0" fill="none" stroke-dasharray="5,5" stroke-width="3" stroke="url(#container_svg_John0Gradient)" stroke-linecap="butt" stroke-linejoin="round" d="M 0 -17.25 L 21.7 -112.12499999999999 M 21.7 -112.12499999999999 L 43.4 -51.75 M 43.4 -51.75 L 86.8 -25.875 M 86.8 -25.875 L 108.5 -155.25 "/><defs><clipPath id="container_svg_SeriesGroup_0_ClipRect"><rect id="container_svg_SeriesGroup_0_ClipRect" x="0" y="-155.25" width="118.5" height="148" fill="white" stroke-width="1" stroke="transparent" style="display: inline-block; width: 118.5px;"/></clipPath></defs></g>
var box = $("#"+ path.id")[0].getBBox();
create the rectangle based on the box and the set this rectangle as your clip-path in path.
then increase the width of the rectangle step by step in jquery.animate.
doAnimation: function () {
//cliprect is your clipped rectangle path.
$(clipRect).animate(
{ width: 1000},
{
duration: 2000,
step: function (now, fx) {
$(clipRect).attr("width", now);
}
});
},
jquery.animate step function is used to increase the width of your clip-rect step by step.

You can animate paths using the svg.path.js plugin.
See the first examples (using the .drawAnimated method).

Another option, which we've resorted to, is to use textPath and then use a character.
In our case we're using the • entity, but I'm thinking if you create your own typography in .svg, .woff etc, you can have flat shapes of any kind.
So you would use your character as in here:
http://jsfiddle.net/wbx8J/3/
/* create canvas */
var draw = SVG('canvas').size(400,400).viewbox(0, 0, 1000, 1000)
/* create text */
var text = draw.text(function(add) {
add.tspan('•').dy(27)
})
text.font({ size: 80, family: 'Verdana' })
/* add path to text */
text.path('M 100 400 C 200 300 300 200 400 300 C 500 400 600 500 700 400 C 800 300 900 300 900 300')
/* visualise track */
draw.use(text.track).attr({ fill: 'none'/*, 'stroke-width': 1, stroke: '#f09'*/ })
/* move text to the end of the path */
function up() {
text.textPath.animate(3000).attr('startOffset', '100%').after(down)
}
/* move text to the beginning of the path */
function down() {
text.textPath.animate(3000).attr('startOffset', '0%').after(up)
}
/* start animation */
up()