Develop Reference

ScrollMagic + TweenMax: Draw multiple SVG paths simultaneously?

This is my script for drawing an SVG path with ScrollMagic:
// Prepare SVG
function pathPrepare_journey($el) {
var lineLength_journey = $el[0].getTotalLength();
$el.css("stroke-dasharray", lineLength_journey);
$el.css("stroke-dashoffset", lineLength_journey);
}
var $journey1 = $("path#path1");
var $journey1_2 = $("path#path2");
var $journey1_3 = $("path#path3");
pathPrepare_journey($journey1);
pathPrepare_journey($journey1_2);
pathPrepare_journey($journey1_3);
// Reference to container
var container = $("#section1");
var containerHeight = $(container).height();
var vpHeight = $(window).height();
// Init controller
var SVGcontroller_journey = new ScrollMagic.Controller();
// Build tween
var tween_journey = new TimelineMax().add(
TweenMax.to($journey1, 1, { strokeDashoffset: 0, ease: Linear.easeNone })
);
// Build scene
var scene = new ScrollMagic.Scene({
triggerElement: container,
duration: containerHeight - vpHeight / 2,
tweenChanges: true
})
.setTween(tween_journey)
.addIndicators({
name: "Draw Journey Lines#1",
colorTrigger: "brown",
colorStart: "brown",
colorEnd: "brown",
indent: 600
})
.addTo(SVGcontroller_journey);
It works perfectly fine, but as you can see, I have three individual paths inside my SVG ($journey1,$journey1_2 & $journey1_3), and the ScrollMagic scene currently only draws one of them, $journey1, because I was only able to add that one to the TimelineMax().
My simple question: How do I add the other paths so they are drawn at the same time as $journey1?
I was able to add the other paths, but they are being drawn consecutively:
// Build tween
var tween_journey = new TimelineMax()
.add(
TweenMax.to($journey1, 1, { strokeDashoffset: 0, ease: Linear.easeNone })
)
.add(
TweenMax.to($journey1_2, 1, { strokeDashoffset: 0, ease: Linear.easeNone })
);

I figured out, that I can target paths by class inside the TweenMax timeline like so:
var tween_journey = new TimelineMax();
tween_journey.to(".cls-2", 1, { strokeDashoffset: 0, ease: Linear.easeNone });
This animates/draws all paths of the given class at the same time and hence solves my problem.

Multiple tweens in one scene

I'm pretty new to GSAP with Scrollmagic, was trying to do multiple tweens in one scene but couldn't figure out how so I ended up doing 3 scenes like this.
// init controller
var controller = new ScrollMagic.Controller();
// build scene
var scene1 = new ScrollMagic.Scene({
triggerElement: "#trigger1"
})
.setTween("#animate1", 0.4, {
opacity: 1,
left: 0
})
.reverse(false)
var scene2 = new ScrollMagic.Scene({
triggerElement: "#trigger1"
})
.setTween("#animate2", 0.4, {
opacity: 1,
left: 0,
delay: .4
})
.reverse(false)
var scene3 = new ScrollMagic.Scene({
triggerElement: "#trigger1"
})
.setTween("#animate3", 0.4, {
opacity: 1,
left: 0,
delay: .8
})
.reverse(false)
//.addTo(controller);
controller.addScene([
scene1,
scene2,
scene3
]);
Is there a way to simplify this code? I am looking to add more but I feel like there is a short way to write this?
Thanks in advance!
Final code
var timeline = new TimelineMax();
var tween1 = TweenMax.to("#animate4", .5, {
opacity: 1,
top: 0
});
var tween2 = TweenMax.to("#animate5", .5, {
opacity: 1,
top: 0
});
var tween3 = TweenMax.to("#animate6", .5, {
opacity: 1,
top: 0
});
var scene = new ScrollMagic.Scene({
triggerElement: "#trigger2"
});
//.addTo(controller);
//controller.addScene([
// scene4
//]);
timeline.add(tween1).add(tween2).add(tween3);
scene.setTween(timeline)
scene.addTo(controller);

You can use TimeLine to add multiple tweens to a scene
var timeline = new TimelineMax();
var tween1 = TweenMax.from("#animate1", 1, {opacity: 1, left:0});
var tween2 = TweenMax.to("#animate2", 1, {opacity:1, left:0, delay:0.4});
timeline.add(tween1).add(tween2);
scene.addTween(timeline);
If you want to have multiple items appear one after the other, you can use stagger
TweenMax.staggerTo(".myclass", 0.5, {opacity:0, y:-100, ease:Back.easeIn}, 0.1);

ScrollMagic - Section Wipes - only works right after scrolling down and then up

I'm using ScrollMagic on my site and I want it to work like this MaterializeCSS Startup Theme
My problem is, that after the initial load the different containers are overlapping. After I scroll down completely and the up again, it works fine.
To understand what I mean, I created a Pen.
This is my JS:
jQuery(function () { // wait for document ready
// init
var controller = new ScrollMagic.Controller();
// define movement of panels
var wipeAnimation = new TimelineMax()
.fromTo("section.panel.turqoise", 1, {x: "-100%"}, {x: "-50%", ease: Linear.easeNone})
.fromTo("section.panel.turqoise", 1, {x: "-50%"}, {x: "-100%", ease: Linear.easeNone})
.fromTo("section.panel.green", 1, {x: "100%"}, {x: "50%", ease: Linear.easeNone})
.fromTo("section.panel.green", 1, {x: "50%"}, {x: "100%", ease: Linear.easeNone});
// create scene to pin and link animation
new ScrollMagic.Scene({
triggerElement: "#pinContainer",
triggerHook: "onLeave",
duration: "300%"
})
.setPin("#pinContainer")
.setTween(wipeAnimation)
.addIndicators() // add indicators (requires plugin)
.addTo(controller);
});
Maybe someone can help me..
Thanks!

Fixed it by myself.
Problem was, that I used the function .fromTo() multiple times on the same element, so at initial load it places every object in the right place and ontop of the previous one.
Changing the code to following fixed my problem, because it slides FROM the side TO the middle, and then TO the side again.
// define movement of panels
var wipeAnimation = new TimelineMax()
.fromTo("section.panel.turqoise", 1, {x: "-100%"}, {x: "-50%", ease: Linear.easeNone})
.to("section.panel.turqoise", 1, {x: "-100%", ease: Linear.easeNone})
.fromTo("section.panel.green", 1, {x: "100%"}, {x: "50%", ease: Linear.easeNone})
.to("section.panel.green", 1, {x: "100%", ease: Linear.easeNone});

Destroying multiple shapes on end of KonvaJS tween

So I have a for loop generating, placing and tweening 20 rectangles. However the code only destroys the last generated rectangle. Is there an (ideally simple) way to ensure that the .destroy() applies to every rectangle instead of the last one?
$("#combat").click(function() {
for (var i = 0; i < 20; i++){
var rect = new Konva.Rect({
x: -500,
y: stage.height()*Math.random(),
width: 480,
height: 20,
fill: 'green',
stroke: 'black',
strokeWidth: 3
});
layer.add(rect);
tween = new Konva.Tween({
node: rect,
duration: 1,
x: 500,
onFinish: function() {
rect.destroy()
}
}).play();
}
});

var tween = new Konva.Tween({
node: pentagon,
duration: 1,
x: 500,
onFinish: function() {
// this will be tween instance
// this.node will be rectangle
console.log(this.node);
}
}).play();

You can use Group object for this:
EDIT:
$("#combat").click(function() {
var rectGroup = new Konva.Group();
for (var i = 0; i < 20; i++){
var rect = new Konva.Rect({
x: -500,
y: stage.height()*Math.random(),
width: 480,
height: 20,
fill: 'green',
stroke: 'black',
strokeWidth: 3
});
rectGroup.add(rect);
layer.add(rectGroup);
tween = new Konva.Tween({
node: rect,
duration: 1,
x: 500,
onFinish: function() {
rectGroup.destroy()
}
}).play();
}
});

animate to a specific point

var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var Circle = new Kinetic.Circle ({
x: 100,
y: 100,
radius: 10,
fill: 'green',
stroke: 'black',
strokeWidth: 5
});
layer.add(Circle);
stage.add(layer);
var a = 1;
var anim = new Kinetic.Animation(function(frame) {
Circle.setX(frame.time * 350 / 1000 + 100);
}, layer);
anim.start();
How do i stop the animation at a specific point or coordinate? like animate to x=700 and then stop. i want to have a circle that is able to animate with a button to coordinate x=700, stop and then stop, and after that with another button back or down.
thank you.

There are 2 ways,
1.
var anim = new Kinetic.Animation(function(frame) {
if(Circle.getX() < 700)
Circle.setX(frame.time * 350 / 1000 + 100);
else
this.stop();
}, layer);
OR2. Use Kinetic.Transition check here