jlnsrtr

Update, fixed it, now I just need to adjust some css parameters to manage proportions between the div and the animation as it's not really responsive right now, but managed to do what I wanted in the first place, here's the pen, thank you very much to all! https://codepen.io/jlnsrtr_/pen/NWROYrz

Hi @ZachSaucier to be more clear I've adjusted the code as it needs to be, I still can't manage to work with the starting and ending points of my animations. In the CodePen down here you will see the green container fading in, at the same time as the png sequence proceeds, what I would like to do is having the green container animation, in the same position, but starting a little bit later, I guess I'm missing something about the start:() and end:() properties. Let me know I you can help me with this one: https://codepen.io/jlnsrtr_/pen/zYKmdXW P.S. ( what I also noticed is that now the div .container2 magically disappeared, don't know the reason behind this)

@ZachSaucier Hi! Finally managed to get my array of png on cloudinary so you can see what's going on https://codepen.io/jlnsrtr_/pen/gOwdjwe Everything seem to work now, I just have to look how to manage timeline settings as the #canvas animation starts at the top of page and not at the top of .container1 What I would like to do now, is to have a .content1 div (that still has to be inserted in html, class is already in css) to fade in at the end of the current animation, keeping everything pinned at the center of the screen, both container, canvas, and content1 div

@ZachSaucier Hi there! I fixed my code using ScrollTrigger and Timeline, looking at your AirPods example, and I managed to get It working, the canvas .png sequence works and responds to the scrolling position. Still a few things I can't get my head around, I'll post the correct codepen down here so that hopefully it can help. https://codepen.io/jlnsrtr_/pen/PoGdNLE I've set pin to true, but the animation itself won't pin, this keeps me from going further to try and add another animation to the timeline, a simple div fading in and overlapping to the pinned png animation. Of course it's my lack of js knowledge blocking me here and I bet the solution will be the most obvious thing but I'm really stuck at this point!

Thanks a lot! Thats actually really close to what I'm trying to do, having a scroll animation on the background with other divs overlapping it, what basically happens with the text parts on the AirPods animation. I'm taking a look at the source code so that I can see what's different to mine "cutting and sewing" for the final result, I'll keep you updated. But really that example was spot-on what I was looking for!

Thank you very much for your answer! I already found a post on the forum where the images are sequenced through visibility so I'm trying that out for now. I know I'm not the best at explaining, right now I'm trying to switch my js from ScrollMagic to ScrollTrigger and having the same effect, so that if I still get stuck I can get some "hands-on" help, I'll keep you updated!

Hi! Thanks for the reply, in the first place, I tried using ScrollTrigger but I couldn't manage to get my .png animation working, what I found was that I could work with sprites, but that would mean re-elaborating all the animation. Do you know if there's a way of using my images array also on ScrollTrigger? That would help me out a lot, I could try and fix the issue using ScrollTrigger and post here on the forum If I find any other problems, but I need a starting point. Thanks in advance

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>