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.

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!

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
}

run function in the middle of superscrollorama parallax effect

I'm using superscrollorama and need to have an animation play once and then never again during the parallax. I could create a function to play the animation but it seems as though it only would work on completion of the parallax. Any thoughts or ideas would be helpful.
controller.addTween('.div', (new TimelineLite()).append([
TweenMax.from( $('.div .hero'), 1,
{css:{left:'1500', top:'-200'}, ease:Quad.easeInOut}),
TweenMax.fromTo($('.div .background'), 1,
{css:{left: -40}, immediateRender:true},
{css:{left: -45}})
]),
100 // scroll duration of tween
);
var oneTime = function(!firstime) {
var firstime;
TweenMax.from( $('.football'), .50, {
css:{left:'1500', top:'-300'}, ease:Quad.easeInOut})
), 500, 500 ;
}

From the top of my head, TweenMax has a method onUpdate which would fire each time one of the properties is valid, and you can even tween any non-standard properties, so with that, you could just call your function, check against a value, and fire oneTime function when it resolves to true, and never do this again ..
It would look something like this:
TweenMax.fromTo($('.div .background'), 1,
{css:{left: -40}, immediateRender:true},
{css:{left: -45}, onUpdate:oneTime,onUpdateParams: $(this).css('left')})
Does it help you this way?

TweenMax js rotation not working as expected

I have this bit of code which basically defines a loop that rotates an image at the end of a transition: http://jsfiddle.net/bolaoch8/k8XtU/1/
$('#avion').css('left', '0%');
var animacionAvion = TweenMax.to($('#avion'), 5, {css:{left:'100%'}, delay:0, repeat:-1, yoyo:true});
setInterval(giraAvion, 5000);
var rotationValue = 180;
function giraAvion()
{
console.log('giraAvion a:', rotationValue);
TweenMax.to($('#avion'), 0.8, {css:{transform:'rotate('+rotationValue+'deg)'}, delay:5});
rotationValue == 180?rotationValue = 0:rotationValue = 180;
}
giraAvion();
Just wondering why the second time the image rotates it does that weird thing... Any ideas?

I suggest you to use TimelineMax, wich will help you to chain tweens : http://api.greensock.com/js/
It will render your animation much simpler.
var tl = new TimelineMax({repeat:-1});    
tl.to($('#avion'), 5, {css:{left:'100%'}});
tl.to($('#avion'), 0.8, {css:{rotation:180}});
tl.to($('#avion'), 5, {css:{left:'0%'}});
tl.to($('#avion'), 0.8, {css:{rotation:0}});
tl.play();
No more intervals and functions!
I modifed your jsfiddle to get the power of it :
http://jsfiddle.net/xavier_seignard/k8XtU/3/