Develop Reference

Set multiple setTween Elements for scrolling in ScrollMagic

my problem is that i use .setTween wrong. It uses just the second .setTween Element. In my case the #identity ID.
// init controller
var controller = new ScrollMagic.Controller();
// animations
var headerpic = TweenMax.to("#headerpic", 1, {opacity: 0.3});
var identity = TweenMax.from("#identity", 1, {opacity: 0});
// build scenes
var scene = new ScrollMagic.Scene({
triggerElement: "#pin1",
duration: "100%",
triggerHook: 'onLeave'
})
.setTween(headerpic)
.setTween(identity)
.setPin("#pin1")
.addIndicators({name: "pin1"})
.addTo(controller);
How do i have to set .setTween that one html-element is fading-out and the other is fading-in during the scrolling?
https://codepen.io/pauernet/pen/qBBaJYO

Phaser P2 Player kick ball and add Impulse on hit

I need help for a school project and want to code a game like Headsoccer in Phaser with P2 Physics, I already have two players, two goals and a ball that can collide with each other. Now I want to add a kick animation and a hitbox for the kick which when kicking the ball applies an impulse or some sort of force from the kick. How could I do that?
Thanks.
Here is some Code
Would be nice if you can give me some advice on how to structre my code better or if i can change something
function create() {
game.world.setBounds(0, 0, 800, 500);
game.physics.startSystem(Phaser.Physics.P2JS);
//game.physics.p2.enable([ player, player2, fussball, goal, latte ], true);
//game.physics.arcade.gravity.y = 200;
game.add.tileSprite(0, 0, 800, 600, 'Spielfeld');
game.physics.p2.gravity.y = 600;
goal = game.add.sprite(35, 428, 'goal');
game.physics.p2.enable(goal,true);
goal.body.static = true;
goal.physicsBodyType = Phaser.Physics.P2JS;
goal.body.data.shapes[0].sensor = true;
player = game.add.sprite(100, 500, 'player');
game.physics.p2.enable(player,true);
player.anchor.setTo(0.5, 0.5);
player.body.collideWorldBounds = true;
player.body.fixedRotation = true;
player.body.clearShapes();
player.body.loadPolygon('playerPhysics','player');
player2 = game.add.sprite(500, 500, 'player');
game.physics.p2.enable(player2);
player2.anchor.setTo(0.5, 0.5);
player2.body.collideWorldBounds = true;
player2.body.fixedRotation = true;
var shape = new p2.Circle();
ball = game.add.sprite( game.world.centerX, game.world.centerY, 'ball');
game.physics.p2.enable(ball);
ball.anchor.setTo(0.5, 0.5);
ball.body.collideWorldBounds = true;
ball.body.data.gravityScale = 1;
ball.body.clearShapes();
ball.body.addCircle(shape);
My game looks like this, and I showed the hitbox of Player 1 and Goal.

Since we don't have any code to work with, I'm assuming you have something like the official Impact Events example code in place.
In that case, you could play an animation when one of the players collides with the ball. In the example above, that would be changing this method to play the animation (instead of changing the sprite's alpha):
function hitPanda(body1, body2) {
body2.sprite.alpha -= 0.1; // Remove/replace this line.
// Add the playing of the kick animation.
body1.play('kick');
}
In this same area you could then apply a speed boost to the ball.

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.

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/

Group transition not drawn to canvas until forced by other actions

I am trying to transitionTo a group and it does it, but I can see the transition only when something else forces stage to be drawn. Transition itself doesn’t update the canvas while it’s going. There are 4 Kinetic.Image's and 4 Kinetic.Text's inside the group. Any idea how to get it working?
Let's say #score group x: 1000
var points = self.stage.get('#scoreGroup')[0];
points.transitionTo({
x: 800,
duration: 5
});

I'm afraid more code would be needed to actually tell what might be missing, but my guess is that you added the elements to the group, which was already in a layer, which was already on the stage. Your transitionTo is being rendered in the buffer, but because the elements were never "drawn" on the stage, the animation isn't being translated to the viewable stage. Perhaps if you provide more code or create a jsFiddle of this, I can provide more insight.
In the meantime, make sure your 4 images and 4 text objects appear on the stage before you call the transitionTo (comment out the transition temporarily), then give it another go.
var stage = new Kinetic.Stage({container : 'container', width : 800, height : 600});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group({id : 'scoreGroup', x : 0, y : 0});
layer.add(group);
stage.add(layer);
// add images and text as usual
var imageObj = new Image();
imageObj.onload = function() {
var image = new Kinetic.Image({x : 20, y : 20, width : 100, height : 100, image : imageObj});
group.add(image);
};
imageObj.src = '[path_to_image]';
layer.draw();
group.transitionTo({x : 600, y : 400, duration : 3});
Let me know what you come up with.