Develop Reference

Joint js - animating circle along a path in svg

I am newbie in Joint js and also with limited javascript skills. What i am trying to acomplish is that when i click on Animate button, the animating circle should follow the path from start to end. It does follow path but not on line.
c = V('circle', {
r: 8,
fill: 'red'
});
var cylinderView = graph.getCell(reserved_path[player[i]]).findView(paper);
var cylinderPath = cylinderView.vel.findOne('path');
var cyclic = graph.getCell(jQuery("#"+player[i]).attr('model-id')).findView(paper);
var cylinderScalable = cyclic.vel.findOne('.scalable');
var cylinderScalableCTM = cylinderPath.node.getCTM().inverse();
c.animateAlongPath({
dur: '5s',
repeatCount: '1'
}, cylinderPath.node);
c.scale(2, 2);
cylinderScalable.append(c);
What i have understood is that cylinderScalable.append(c) line is creating this problem and it could be resolved if i could append the details directly into svg , but i don't know how to accomplish it
Here is my complete code: https://jsfiddle.net/9espjppv/
Thanks for all your help in advance.

Have a look at this doc, it might help you
var c = V('circle', { r: 8, fill: 'red' });
c.animateAlongPath({ dur: '4s', repeatCount: 'indefinite' }, paper.findViewByModel(myLink).$('.connection')[0]);
V(paper.svg).append(c);

Add a delay to progressbar.js?

Working on an svg preloader, and i'd like a final path of the preloader to have a delay. I'm using progressbar.js
so basically, if i have two paths, it would be
var bar_c2 = new ProgressBar.Path('#c2', {
easing: 'easeInOut',
duration: 1000
});
bar_c2.set(0);
bar_c2.animate(1); // Number from 0.0 to 1.0
var bar_e2 = new ProgressBar.Path('#e2', {
easing: 'easeInOut',
duration: 1000
});
bar_e2.set(0);
bar_e2.animate(1); // Number from 0.0 to 1.0
I would like to have var bar_e2 begin after a delay of 900ms
any help in the right direction would be hugely appreciated!!!

Sorry, i'm new to js and trying to learn, and i did! I realized I could do this with a callback function, so i thought i would post here just so anyone else searching at my level would find the answer.
var bar_c2 = new ProgressBar.Path('#c2', {
});
var bar_e2 = new ProgressBar.Path('#e2', {
});
path.set(0);
path.animate(1, {
duration: 900
}, function() {
line.animate(1);
});
It starts at the end of the first, which isn't exactly what i was going for, but good enough!

Phaser scrolling background

My goal is to make a sprite bigger than the screen and have the user scroll to see the different parts of it, so I wanted to ask if Phaser had any sprite eventListener-functions such as:
var canvas = window.document.getElementsByTagName('canvas')[0],
prevX = 0, prevY = 0, mouseDown = false;
where canvas can be used as
canvas.addEventListener('mousedown',function(e){
});
canvas.addEventListener('mousemove',function(e){
});

Here is how I did it.
In your update function:
if (this.game.input.activePointer.isDown) {
if (this.game.origDragPoint) {
// move the camera by the amount the mouse has moved since last update
this.game.camera.x += this.game.origDragPoint.x - this.game.input.activePointer.position.x;
this.game.camera.y += this.game.origDragPoint.y - this.game.input.activePointer.position.y;
}
// set new drag origin to current position
this.game.origDragPoint = this.game.input.activePointer.position.clone();
}
else {
this.game.origDragPoint = null;
}

If using the camera is OK for you, you can try this Phaser 2 plugin: https://jdnichollsc.github.io/Phaser-Kinetic-Scrolling-Plugin/
With this plugin you can enable vertical and horizontal scroll to simulate scrolling into the canvas element used by Phaser, also you can customize the movement before to initialize the plugin, example:
var game = new Phaser.Game(400, 400, Phaser.AUTO, '', {
init: function () {
//Load the plugin
this.game.kineticScrolling = this.game.plugins.add(Phaser.Plugin.KineticScrolling);
},
create: function () {
//Configure the plugin
this.game.kineticScrolling.configure({
kineticMovement: true,
timeConstantScroll: 325, //really mimic iOS
horizontalScroll: true,
verticalScroll: false,
horizontalWheel: true,
verticalWheel: false,
deltaWheel: 40
});
//Starts the plugin
this.game.kineticScrolling.start();
//Changing the world size
this.game.world.setBounds(0, 0, 800, 800);
},
stopScrolling: function () {
//Stop the plugin
this.game.kineticScrolling.stop();
}
});
Also there's a fork for Phaser 3, check the repo from GitHub.
Regards, Nicholls

Meteor.js + ScrollMagic TweenMax.to

Trying to get Meteor template.rendered working for ScrollMagic
this is the code i wish to get it working.
if (Meteor.isClient) {
Meteor.startup(function () {
scrollMagicController = new ScrollMagic();
Template.StartAnimation.onRendered({
// Create Animation for 0.5s
animation: function () {
var tween = TweenMax.to($('#animation'), 0.5,
{
backgroundColor: 'rgb(255, 39, 46)',
scale: 5,
rotation: 360
})
}
});
})}
Pkg Dependency
hipstersmoothie:scrollmagic 0.0.9
This is based on a tutorial made by scotch.io.
and the first part of the code codepen
Trying to recreate the magic in meteor. I'll be grateful if someone could have a look at these codes.
Thank you.
-------------------------------------------------------------------------------
Found another solution by referencing Using greensocks with meteor
if (Meteor.isClient) {
Meteor.startup(function () {
scrollMagicController = new ScrollMagic();
$(document).ready(function () {
// Create Animation for 0.5s
var tween = $(".animation");
TweenMax.to(tween, 0.5,
{
backgroundColor: 'rgb(255, 39, 46)',
scale: 5,
rotation: 360
});
});
Which works !! Still I ponder on how to use it properly with blaze...
In the mean time, i will try to finish the code for the tutorial.

Try this:
Template.StartAnimation.onRendered(function() {
// use this.$() to have jquery only search the dom in the current template scope
var $e = this.$('#animation');
var transforms = {
backgroundColor: 'rgb(255, 39, 46)',
scale: 5,
rotation: 360
};
var tween = TweenMax.to($e, 0.5, transforms)
});

i don't think that this:
Template.StartAnimation.onRendered({....});
is up to date.
I use the following for things that should happen, when template is rendered.
It's similar to your $(document).ready(function(){...}); but it triggers only for this specific template.
Template.StartAnimation.rendered = function(){
//your code goes here
}

How to I scale the Raphael map in Rob Flaherty's US map example?

I'm trying to implement this awesome map, but I can't figure out how to scale it. Changing the size of the container div or the height/width values just crops the underlying map. I think I need paper.scaleAll(.5) in here somewhere, but can't figure it out. Thanks!
<script>
window.onload = function () {
var R = Raphael("container", 1000, 900),
attr = {
"fill": "#d3d3d3",
"stroke": "#fff",
"stroke-opacity": "1",
"stroke-linejoin": "round",
"stroke-miterlimit": "4",
"stroke-width": "0.75",
"stroke-dasharray": "none"
},
usRaphael = {};
//Draw Map and store Raphael paths
for (var state in usMap) {
usRaphael[state] = R.path(usMap[state]).attr(attr);
}
//Do Work on Map
for (var state in usRaphael) {
usRaphael[state].color = Raphael.getColor();
(function (st, state) {
st[0].style.cursor = "pointer";
st[0].onmouseover = function () {
st.animate({fill: st.color}, 500);
st.toFront();
R.safari();
};
st[0].onmouseout = function () {
st.animate({fill: "#d3d3d3"}, 500);
st.toFront();
R.safari();
};
})(usRaphael[state], state);
}
};
</script>

The other answer is almost correct, but you have to set the anchor point of the scale command to 0,0 so that each state is scaled from the same point:
element.transform("s2,2 0,0");
While you're at it, I'd make an R.set() element and add each state to it, so that you can apply the scale just to the states in the event that you add other objects, like a legend, that you do not want to scale:
usRaphael = {},
states = R.set();
//Draw Map and store Raphael paths
for (var state in usMap) {
usRaphael[state] = R.path(usMap[state]).attr(attr);
states.push(usRaphael[state]);
}
Then at the end:
states.transform("s2,2 0,0");
jsFiddle

After you draw the map (outside of your for loops) try the following:
R.forEach(function(element) {
element.transform("s2");
});
I'm not sure what version of Raphael you are using, but my code is assuming the latest. What this does is it iterates over every path on the paper and sets the transform to "scale 2". This will scale all of the paths by 2.