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:)

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.

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; }

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?

Here is my code pen for this. It’s crazy that I cannot edit my original post????? https://codepen.io/charles1971/pen/yLywxWR?editors=1111

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