Develop Reference

Scrollmagic TimelineMax not animating

I'm trying to figure out how to use TimelineMax with Scrollmagic.
The problem is easy to explain.
I have similar DOM elements, like particles that have to move slowly than scrolling speed.
This first implementation is WORKING (no Timeline)
var controller = new ScrollMagic.Controller();
var $particles = $("#particles li");
$particles.each(function() {
var tween = TweenMax.to($(this), 1, { y: -100, ease: Linear.easeNone });
var scene = new ScrollMagic.Scene({
triggerElement: ".wrapper",
duration: 1000
});
scene.setTween(tween);
scene.addTo(controller);
});
The second implementation is NOT WORKING (uses Timeline)
var controller = new ScrollMagic.Controller();
var $particles = $("#particles li");
var timeline = new TimelineMax();
$particles.each(function() {
timeline.to($(this), 1, { y: -200, ease: Linear.easeNone });
});
var scene = new ScrollMagic.Scene({
triggerElement: ".wrapper",
duration: 1000
});
scene.setTween(timeline)
scene.addTo(controller);
I'd like to make timeline working but elements are not animating. They move but with null timing.
Thank you for help
--- CODEPENS ---
https://codepen.io/anon/pen/wJOveM (multiple scenes)
https://codepen.io/anon/pen/dvryog?editors=1111 (w/ timeline NOT WORKING)

Can you try to use the TimelineMax .add() method instead of the .to() method in you second implementation? So your code should look like this:
var controller = new ScrollMagic.Controller();
var $particles = $("#particles li");
var timeline = new TimelineMax();
$particles.each(function() {
timeline.add(TweenMax.to($(this), 1, { y: -200, ease: Linear.easeNone }),0);
});
var scene = new ScrollMagic.Scene({
triggerElement: ".wrapper",
duration: 1000
});
scene.setTween(timeline)
scene.addTo(controller);
Also, for better debugging, please add the .addIndicators() method to the scene to see indicators on the screen, which can really help in debugging while scrolling. You can try to play with the duration property as well to see if things work properly.
UPDATE: Since all the particles needed to be moving at the same time, I added a ,0 property at the end of every .add method call. This ensures that all the tweens are triggered at the same positions. You can read more about the position property here:
https://greensock.com/asdocs/com/greensock/TimelineLite.html#add()
Here's hopefully a working example this time :)
https://codepen.io/anon/pen/ryROrv
Hope this helps. Cheers.

Progressbar.js combine two effects

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.

How Could This JS Block Be Short-Handed? (JS Refresher)

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.

setInterval on myDoughnut animation

I want to repeat the animation of the myDoughnut animation every 5 seconds. At the moment it only animates on page load.
<script>
var doughnutData = [
{
value: 80,
color:"#74cfae"
},
{
value : 20,
color : "#3c3c3c"
}
];
var myDoughnut = new Chart(document.getElementById("CSS3").getContext("2d")).Doughnut(doughnutData);
</script>
I have tried using
setInterval("Chart();", 500);
I am still learning Javascript so a little unsure as to if I am referencing the correct function and where to place the setInterval code.
The animation can be viewed at the bottom of this website: http://www.chartjs.org/
Many thanks for any guidance and direction!

You should pass a proper function to setInterval.
I looked for a way to replay the animation of Chart object but i couldn't find any directive in ChartJS documentation.
Here is how you function should look like:
setInterval(function () {
myDoughnut = new Chart(document.getElementById("CSS3").getContext("2d")).Doughnut(doughnutData);
}, 2000);
Here is working JSFiddle.

setInterval takes a function as parameter.
Try:
setInterval(function(){ Chart(); }, 500);

Custom transition timing in impress.js

I'm trying to create different transition times for each slide in an impress.js presentation.
I found the code below in a book about impress.js. But checking it on JSLint it shows errors. I am not good enough with javascript to correct this myself. Anybody willing to help me out?
Edit: I need a solution without jQuery. This is because impress.js allows you to navigate through the presentation with spacebar and arrow keys and I don't want to lose that functionality.
I found that when navigating with the keys (while jQuery is timing the auto-advance) it does not respect the position where you navigated to, but forces you away from where you are. I would like instead that if you navigate to a slide (position) the auto-advance starts running the custom set time for that particular slide and advances to the next slide when the set amount of time has passed. This would be an awesome addition to impress.js. I hope this can be done. Thanks for your effort!
JSFiddle: http://jsfiddle.net/5sSE5/8/ (script added at the end of impress.js)
var step_transitions = [
{ "slide": 1, "duration": 2000 },
{ "slide": 2, "duration": 4000 },
{ "slide": 3, "duration": 1000 }
];
$(document).ready(function () {
var time_frame = 0;
step_transitions.filter(function (steps) {
time_frame = time_frame + steps.duration;
setTimeout(function () {
api.goto(steps.slide);
}); time_frame;
});
});
Addition: below script respects keyboard navigation, but all the slides have the same transition time.
var impress = impress();
impress.init();
document.addEventListener('impress:stepenter', function(e){
if (typeof timing !== 'undefined') clearInterval(timing);
var duration = (e.target.getAttribute('data-transition-duration') ? e.target.getAttribute('data-transition-duration') : 10000); // in ms
timing = setInterval(impress.next, duration);
});

There is an error in your code in the setTimeout:
setTimeout(function () {
api.goto(steps.slide);
}, time_frame);
It seems that the time_frame variable should be second argument of the setTimeout method.
Update
You also forgot to initialize the api variable before using it:
var api = impress();
You also need the jQuery library to be able to use the $ function.
See updated fiddle
Update 2
I reworked your code to make it continue from the first slide after the last is reached:
var step_transitions = [
{ "slide": 0, "duration": 3000 },
{ "slide": 1, "duration": 4000 },
{ "slide": 2, "duration": 2000 }
];
$(document).ready(function () {
var time_frame = 0,
api = impress(),
current_step_index = 0,
do_transition = function (){
var step = step_transitions[current_step_index];
api.goto(step.slide);
current_step_index++;
if(current_step_index >= step_transitions.length){
current_step_index = 0;
}
setTimeout(do_transition, step.duration);
};
//initial run
do_transition();
});
Note, that slides must start from 0, not 1.
See updated fiddle