[Can't figure out how to get multiple Tweens on the same scene]

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!

 

See the Pen NWROYrz by jlnsrtr_ (@jlnsrtr_) on CodePen

 

[Can't figure out how to get multiple Tweens on the same scene]

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:

 

See the Pen zYKmdXW by jlnsrtr_ (@jlnsrtr_) on CodePen

 

P.S. ( what I also noticed is that now the div .container2 magically disappeared, don't know the reason behind this)

 

[Can't figure out how to get multiple Tweens on the same scene]

@ZachSaucier

Hi!

Finally managed to get my array of png on cloudinary so you can see what's going on 

 

See the Pen gOwdjwe by jlnsrtr_ (@jlnsrtr_) on CodePen

 

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 

[Can't figure out how to get multiple Tweens on the same scene]

@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.

 

See the Pen PoGdNLE by jlnsrtr_ (@jlnsrtr_) on CodePen

 

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!

 

 

 

[Can't figure out how to get multiple Tweens on the same scene]

4 hours ago, ZachSaucier said:

Perhaps this thread can be of use/provide a starting 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!

 

[Can't figure out how to get multiple Tweens on the same scene]

4 hours ago, Dipscom said:

Hi jlnsrtr,

 

I am not sure I follow your concern here. I can understand you do not want to re-create your animation frames as sprites - that's fine. But you should really be able to use the same concept you did on your code above.

 

Having said that, I would not recommend replacing the image src on your tween update. That will cause the browser to do a bunch of recalculations while you're animating because you're replacing the element. I would recommend you load all of your image frames on your container, hide the frames not being used and just toggle their visibility as needed.

 

If you, like Zach said, make a minimal demo with what you are trying to achieve it will make it a lot easier for others to jump in, do some small edits on your code and make suggestions.

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! 

[Can't figure out how to get multiple Tweens on the same scene]

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

[Can't figure out how to get multiple Tweens on the same scene]

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>