Hi GSAP forum!
This question is half related to gsap and half related to ScrollMagic, a plugin I'm using to make .png animations on scroll.
I already have made my .png animation, it's pinned and works fine, as it should, what I'm trying to do now, and I can't really figure out how to do it, is having a .div fade in at the end of my .png animation.
The order should be: scroll down -> png animation gets pinned and runs as you scroll -> once the animation is done, a .div fades in
Since I'm not a pro at all in coding I'm trying to get help here and would be really greatful if you could help me out
I'll leave the js code I did for the .png animations here with all the process so you can check it out
<script>
var controller = new ScrollMagic.Controller({
globalSceneOptions: {
triggerHook: 0,
}
});
// Create Animation 1
var images1 = [];
var i;
var path = "img/stella/stella2k_";
for ( i = 0; i < 18; i++){
var string = path.concat(''+i,".png");
images1.push(string);
}
// TweenMax can tween any property of any object. We use this object to cycle through the array
var obj1 = {curImg: 0};
// create tween
var tween1 = TweenMax.to(obj1, 0.5,{
curImg: images1.length - 1, // animate propery curImg to number of images
roundProps: "curImg", // only integers so it can be used as an array index
repeat: 0, // repeat 3 times
immediateRender: true, // load first image automatically
ease: Linear.easeNone, // show every image the same ammount of time
onUpdate: function () {
$("#myimg1").attr("src", images1[obj1.curImg]); // set the image source
}
}
);
// Create the Scene 1
var scene1 = new ScrollMagic.Scene({
duration: 900,
triggerElement:'#myimg1',
triggerHook: 0,
})
.setPin('#myimg1',{pushfollowers:true})
.setTween(tween1)
// Create Animation 2
var images2 = [];
var i;
var path = "img/stella2/stella2k_";
for ( i = 0; i < 18; i++){
var string = path.concat(''+i,".png");
images2.push(string);
}
// TweenMax can tween any property of any object. We use this object to cycle through the array
var obj2 = {curImg: 0};
// create tween
var tween2 = TweenMax.to(obj2, 0.5,
{
curImg: images2.length - 1, // animate propery curImg to number of images
roundProps: "curImg", // only integers so it can be used as an array index
repeat: 0, // repeat 3 times
immediateRender: true, // load first image automatically
ease: Linear.easeNone, // show every image the same ammount of time
onUpdate: function () {
$("#myimg2").attr("src", images2[obj2.curImg]); // set the image source
}
}
);
// Create the Scene 2
var scene2 = new ScrollMagic.Scene({
duration: 900,
triggerElement:'#myimg2',
triggerHook: 0,
})
.setPin('#myimg2')
.setTween(tween2)
// Add Indicators
scene1.addIndicators();
scene2.addIndicators();
// Add controller to scene
scene1.addTo(controller);
scene2.addTo(controller);
</script>