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

[jlnsrtr]

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>

 

[ZachSaucier]

Hey jlnsrtr and welcome to the GreenSock forums.

 

ScrollMagic isn't a GreenSock product and we don't support it here. Instead we highly recommend the official scroll plugin: ScrollTrigger! It's better in every way. The ScrollTrigger docs and demos section should provide you a whole lot of information as to how you can use it and create what you need to create. As a part of the process, we also highly recommend upgrading to GSAP 3 formatting which is easy to do by following the migration guide.

 

If you still get stuck when using ScrollTrigger, please create a minimal demo to share with us and clearly explain what you're getting stuck on  Happy tweening!

[jlnsrtr]

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

[Dipscom]

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.

[ZachSaucier]

Perhaps this thread can be of use/provide a starting point:

 

[mikel]

4 hours ago, jlnsrtr said:

but that would mean re-elaborating all the animation.

 

Arranging suitable individual motifs into a sprite is not rocket science.
Here is a simple case with GSAP ScrollTrigger.

 

See the Pen mdVEpKK?editors=1010 by GreenSock (@GreenSock) on CodePen

 

But even without a sprite, suitable motifs can be scrolled perfectly - imagine suitable motifs.

 

See the Pen d6953277bbd554bdc5d24f185df38e9b?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[jlnsrtr]

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! 

[jlnsrtr]

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!

 

[jlnsrtr]

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

 

 

 

[ZachSaucier]

Can you please create a minimal demo that recreates the issue(s) that you're having? The one that you posted looks like it's missing a whole lot of files. Most likely you don't need majority of them, but your pen should clearly show what you're wanting our help with.

[jlnsrtr]

@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 

[ZachSaucier]

Good work on the demo, that's helpful  

 

You're making one of the most common ScrollTrigger mistakes: putting ScrollTriggers on tweens that are nested in a timeline. Doing so doesn't make much sense as the timeline and ScrollTrigger will conflict over which one should be in control. You should probably use completely separate tweens/timelines each with their own ScrollTrigger instead. But since your first tween isn't actually animating anything, it probably makes sense to only create a ScrollTrigger for it (not a tween in addition).

 

As for adding a new animation for your .content1 div, you simply need to add it to your HTML where you want it and then create a tween and ScrollTrigger for it. Something like this:

See the Pen GRjXwEx?editors=0010 by GreenSock (@GreenSock) on CodePen

Or you could add it to a timeline for the previous animation/ScrollTrigger and use that instead. I'm not sure what your end goal is so it's hard to help any further at this point.

[jlnsrtr]

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)

 

[ZachSaucier]

19 minutes ago, jlnsrtr said:

n 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

It's not starting at the same time? The green element is animated in later... Look at the markers to see the difference. What's the issue?

[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!

 

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