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
}
Related
I am trying to combine 2 effects from progressbar.js but I can't get it working. Could somebody take a look and maybe help me out?
This is my codepen with the code that I have so far:
http://codepen.io/stephan-v/pen/MwQQzJ
var startColor = '#FC5B3F';
var endColor = '#9ec64d';
window.onload = function onLoad() {
var circle = new ProgressBar.Circle('.progress', {
color: startColor,
duration: 3000,
easing: 'bounce',
strokeWidth: 8,
// Set default step function for all animate calls
step: function(state, circle, bar) {
circle.path.setAttribute('stroke', state.color);
bar.setText((bar.value() * 100).toFixed(0));
}
});
// This will get the number from the page
var value = ($('.progress').attr('value') / 100);
// This will determine the circumference of the circle
circle.animate(value, {
from: {color: startColor},
to: {color: endColor}
});
};
I am trying to combine the percent text with the custom animation. The demo's can be found on this page:
http://kimmobrunfeldt.github.io/progressbar.js/
I would have no problem rewarding whoever can help me out with this.
you need to add the step function in the circle.animate method
this is how your circle.animate should look
circle.animate(value, {
from: {
color: startColor
},
to: {
color: endColor
},
step: function(state, circle, bar) {
circle.path.setAttribute('stroke', state.color);
console.log(circle);
circle.setText((circle.value() * 100).toFixed(0));
}
});
here's a working JSFIDDLE for the same.
Need help in having a zoom in and zoom out button in visjs network graph using angularjs, I could not find any relevant options for this. Please help, I am also providing a plunker link as an example
Code
<vis-network data="data" options="options" height="100%"></vis-network>
$scope.options = {
autoResize: true,
height: '800',
width: '100%'
};
Take a look at the interaction, navigationButtons option. It has built in controls for zoom, pan and reset view.
You need to change your vis options to include navigationButtons: true and keyboard: true to have keboard shortcuts enabled
$scope.options = {
autoResize: true,
height: '600',
width: '100%',
interaction: {
navigationButtons: true,
keyboard: true
}
};
Check this plunker
I've never worked with plunker, so I can not integrated my solution into your example, but I've created a JSFiddle for it which is based on a simple network example from the visjs.org website.
Unfortunately there is no setScale(scale) method available right now, but you could extend the network until someone implements it.
var network;
var zoomstep = 0.3;
function zoomin() {
network.setScale(network.getScale() - zoomstep);
}
function zoomout() {
network.setScale(network.getScale() + zoomstep);
}
vis.Network.prototype.setScale = function (scale) {
var options = {
nodes: []
};
var range = this.view._getRange(options.nodes);
var center = this.view._findCenter(range);
var animationOptions = {
position: center,
scale: scale,
animation: options.animation
};
this.view.moveTo(animationOptions);
};
The vis.Network.setScale code was taken from the Network.js and View.js source code, based on what getScale() did. I had to redo some things which the methods View.fit, View._getRange and View._findCenter did but it's working good so far.
Updated solution for vis.js 4.21.0
vis.Network.prototype.zoom = function (scale) {
const animationOptions = {
scale: this.getScale() + scale,
animation: { duration: 300 }
};
this.view.moveTo(animationOptions);
};
Click handler code:
this.network.zoom(-0.5) // or 0.5 to zoom in
It seems to happen only when I try to animate an image on Chrome. All I want to do is make an image to move back an forth in Raphaël.js. I created a jsfiddle that illustrates the problem. I'm very sure that it used to work in Chrome since I use it to develop and it seems to be broken in later versions of Chrome. When I change the image to a rect for example it seems to render fine. When you resize the screen that contains the animation it repaints.
http://jsfiddle.net/k69yzz0o/1/
var moveForth = function () {
useControl.animate({x : 38, y: 0}, 900, moveBack);
};
var moveBack = function () {
useControl.animate({x : 0, y: 0}, 600, moveForth);
};
var R = Raphael("holder", 500, 500);
useControl = R.image("http://i.imgur.com/ta8zlD2.png", 0, 0, 189, 18);
moveForth();
It only happens in Chrome and I use latest Raphael.js 2.1.2.
How can I resolve this issue?
Yes, there appears to be an issue with Chrome recognizing the rect as dirty, and refusing to repaint it. You can see that it's working by mousing over the area.
I tried the same animation using a Transform rather than using the actual position. Transforming an object evidently correctly tells modern Chrome to redraw that area.
Here it is working:
var moveForth = function () {
useControl.animate({"transform":"T38,0"}, 900, ">", moveBack);
};
var moveBack = function () {
useControl.animate({"transform":""}, 600, "<", moveForth);
};
var R = Raphael("holder", 500, 500);
useControl = R.image("http://i.imgur.com/ta8zlD2.png", 0, 0, 189, 18);
moveForth();
I also added some easing (">") to give it a more natural bounce.
I want to create a typing game, so my sprites need to be generated in run time, with "labels". a String become a sprite to be typed. Anyone knows how to do this?
You can insert a Q.UI.Text object into a sprite like this:
var Q = Quintus()
.include('Sprites, Scenes, UI')
.setup({ maximize: true })
Q.Sprite.extend('LabelSprite', {
init: function(p) {
this._super(p, {text: 'default text'});
}
});
Q.scene("level1",function(stage) {
var label_sprite = stage.insert(new Q.LabelSprite({
x: 150,
y: 50,
label_text: 'label-text in a sprite',
label_text_color: 'grey',
label_offset_x: 0,
label_offset_y: 0
}));
var label = stage.insert(new Q.UI.Text({
label: label_sprite.p.label_text,
color: label_sprite.p.label_text_color,
x: label_sprite.p.label_offset_x,
y: label_sprite.p.label_offset_y
}), label_sprite);
});
Q.stageScene("level1");
Here is the above code in jsfiddle to demonstrate.
Also, the Scenes page of the Quintus documentation has a section called "Inserting objects into a stage", which is somewhat related to the concept.
Hope that helps!
I haven't used JS in awhile (2yrs) and I seem to have forgotten some basics;
So my question is: How would I clean-up or 'short-hand' the following javascript?
It would help me out on improving my JS code ( and maybe joggle my brains - LOL ).
var tl = TweenLite.to;
tl("#container", 0, {autoAlpha:0});
tl("#header", 0, {top:"-70px"});
tl("#footer", 0, {bottom:"-180px"});
function showPage() {
tl("#container", .2, {autoAlpha:1, delay:.5});
tl("#header", .2, {top:"0px", delay:.8});
tl("#footer", .2, {bottom:"-150px", delay:.8});
} window.onload = showPage;
...and obviously I am using TweenLite and I am not using jQuery but I am using Zepto. Thnx for your help.
-jason
Something like this:
var tl = TweenLite.to,
duration = 0.2;
// Set starting states in CSS
function showPage() {
tl("#container", duration, {autoAlpha: 1, delay: .5});
tl("#header", duration, {top: "0px", delay: .8});
tl("#footer", duration, {bottom: "-150px", delay: .8});
}
window.onload = showPage;
You could also check out the TweenLite.from method which allows you to do the inverse and set the finished states initially and specify where to tween from.