V2 staggerTo conversion to gsap3 problem

[charlesr]

How would I convert the following V2 code into gsap3. I have tried everything:

 

```

TweenMax.staggerTo(".material-icons",1,{
                scale:0.25,
                opacity:0,
                onComplete:function(){
                    TweenMax.staggerTo(".material-icons",1.4,{
                        scale:1,
                        opacity:1,
                        ease:Elastic.easeOut,
                        easeParams:[overshoot,period]
                    },0.5)
                }
            },0.5);

```

 

The real problem areas are the easeParam & onComplete parts.

 

Thanks for any help in advance...

[charlesr]

Here is my code pen for this. It’s crazy that I cannot edit my original post?????

 

See the Pen yLywxWR?editors=1111 by charles1971 (@charles1971) on CodePen

 

 

[charlesr]

OK, guys. I have nearly cracked it, but there is just one problem. The code below seems to execute after a 3 second delay. I am not sure why:

$( document ).ready(function() {

 

       gsap.to(".material-icons",{
                scale:0.25,
                opacity:0,
                duration:0.5,
                stagger:0.5,
                onComplete:function(){
                    gsap.to(".material-icons",{
                        scale:1,
                        opacity:1,
                        duration:0.7,
                        stagger:0.5,
                        ease:"elastic.out(5,0.25)"
                    })
                }
            });

 

});

 

Is it something to do with jQuery ready event?

[charlesr]

Finally:

 

gsap.to(".material-icons",{
                scale:1,
                opacity:1,
                duration:0.7,
                stagger:0.5,
                ease:"elastic.out(5,0.25)"
            })
 

And setting CSS:

 

.material-icons{

          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%)  scale(0);
          color: rgba(255,255,255,1);
          font-size: 20px;
          opacity: 0;
}

[ZachSaucier]

Welcome to the GreenSock forums!

 

14 minutes ago, charlesr said:

Is it something to do with jQuery ready event?

You can just remove it and see  

 

14 minutes ago, charlesr said:

I have nearly cracked it

Good work! 

 

The only thing I'd do different is that since the images likely haven't loaded anyway you could just use a .set() call and then a single tween:

gsap.set(".material-icons", { scale:0.25, opacity: 0 });

gsap.to(".material-icons", {
  duration: 0.7,
  scale: 1,
  opacity: 1,
  ease: "elastic.out(5,0.25)",
  stagger: 0.5
});

but if you want the effect of two tweens that's perfectly fine as well. It's just really hard to see the first one.

[charlesr]

This was my final code, because my previous attempt didn’t quite emulate the V2 code:

 

            gsap.to(".material-icons",{
                scale:1,
                opacity:1,
                duration:1.4,
                stagger:0.5,
                ease:"elastic.out(5,0.25)"
            })
 

I have just increased the duration to match the original inside the onComplete function. This softens the overshoot scaling. 
 

I presume your set statement replaces my CSS. I did test this, but the icons are positioned incorrectly. Using CSS, ensures that the icons centre correctly. Although, your version worked when I just set the opacity, but kept the scale & translate properties in the CSS. 
 

I think gsap3 cuts down on the amount of code, but I think I prefer the gsap2 way of writing the easeParams, because it means that you can directly replace the values with variables. Adding them as string is a little restrictive because you would have to do:

 

ease:"elastic.out(” + overshoot + ”,” + period + ”)"
 

But, thanks for your help. 

[ZachSaucier]

10 minutes ago, charlesr said:

Adding them as string is a little restrictive because you would have to do:

 

ease:"elastic.out(” + overshoot + ”,” + period + ”)"

First of all, .out is the default so you can omit that.

 

Secondly, you could use the newer ` syntax that JS has:

// old
ease: Elastic.easeOut.config(overshoot, period) // mix of cases and length is suboptimal

// new
ease: `elastic(${overshoot}, ${period})`

But the old syntax is fine also  

[GreenSock]

27 minutes ago, charlesr said:

I presume your set statement replaces my CSS. I did test this, but the icons are positioned incorrectly. Using CSS, ensures that the icons centre correctly. Although, your version worked when I just set the opacity, but kept the scale & translate properties in the CSS. 

I'm a little confused - are you saying that after you run gsap.set(".material-icons", { scale:0.25, opacity: 0 }) the element's scale is NOT 0.25? Can you provide a reduced test case so we can see what you're talking about? I suspect there's something else going on here, and it'd really help to see the issue in context. 

[charlesr]

The scale wasn’t the problem. The icons were positioned to the bottom left of the button circle. The icons should be centered. That is why I had to add the extra CSS:

 

.material-icons{

          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%)  scale(0);
          color: rgba(255,255,255,1);
          font-size: 20px;
          opacity: 0;
}

 

If I don’t add this CSS, the icons are out of position. 
 

By the way, I like the use of back ticks. That’s a great feature and solves my easeParam issue:)

 

[GreenSock]

1 hour ago, charlesr said:

If I don’t add this CSS, the icons are out of position. 

Sorry if I'm missing something obvious, but I'm struggling to understand if you're saying that you tried doing that same thing with GSAP but it didn't work? If so, can you show me? 

 

With transform-related values, it's always best to apply them via GSAP so that they're properly parsed and cached for maximum performance and accuracy. When you only rely on CSS initially, then when you animate those things with GSAP it must get the current transforms from the browser which always reports the computed values as a matrix() or matrix3d() which is problematic because:

• Rotational and scaling data is inherently ambiguous. A rotation of 0, 360deg, and 720deg all have exactly the same matrix()/matrix3d(). And a rotation of 180deg results in the same matrix as scaleY of -1 and scaleX of -1. There are countless combinations like this, so pulling apart the data in exactly the way you originally intended is basically impossible. But if you set the values via GSAP, it knows EXACTLY what you meant to do and can retain all the components perfectly. 
• Percentage-based values get completely lost when the browser reports computed values because matrix()/matrix3d() data is always px-based. The percentages get baked into the matrix as their px equivalents at that particular moment. But if you set them via xPercent/yPercent in GSAP, it retains everything without a problem. 

So in your case, you should be able to simply: 

gsap.set(".material-icons", {
  x:0, 
  y:0, 
  xPercent:-50, 
  yPercent:-50, 
  scale:0, 
  color:"white", 
  fontSize:20, 
  opacity:0, 
  position: "absolute"
});

Or you could set just the transform-related values via gsap.set() and the other stuff in your CSS - whatever. It's even fine to set the transforms in CSS initially as long as you reset them via GSAP so that all the components are clearly defined and when you animate them later, it's accurate and fast. 

 

If you're saying that GSAP wasn't setting the values properly, it'd be super helpful to see a reduced test case so that I can figure out why and see the context. 

 

Thanks!