Stagger animation not coming out smooth

[Ian Robinson]

I was away from GSAP for a bit but back and working on incorporating as much as possible in a project so feel possibly I'm missing basic/obvious things, but for some reason this simple animation of where the 3 bubbles pop up with a stagger and a little bounce is coming out a bit jumpy - and even worse bringing it into CodePen for some reason. Possibly due to my HTML/CSS structure?

See the Pen dyaxaqX by ilrobinson (@ilrobinson) on CodePen

[ryan_labar]

2 hours ago, Ian Robinson said:

Possibly due to my HTML/CSS structure?

This is exactly what's happening! Your css transitions are fighting with the GSAP animations. If you remove the CSS transitions your animations should work smoothly as intended.

More info here: https://gsap.com/resources/mistakes#using-css-transitions-and-gsap-on-the-same-properties

[Windpixel]

6 hours ago, Ian Robinson said:

I was away from GSAP for a bit but back and working on incorporating as much as possible in a project so feel possibly I'm missing basic/obvious things, but for some reason this simple animation of where the 3 bubbles pop up with a stagger and a little bounce is coming out a bit jumpy - and even worse bringing it into CodePen for some reason. Possibly due to my HTML/CSS structure?
 

I removed these:
    transform: scale(1);
    transition: 0.3s ease;

Now Smooth in this forked code pen:  

See the Pen poGMBvy by windpixel (@windpixel) on CodePen

[Ian Robinson]

Thanks so much guys! My brain was a bit fried by the time I got to this and as you see, I knew the issue but for some reason, embarrasingly it didn't occur to check. Thanks for picking up my brain's slack, I appreciate it. Assuming the best thing in this scenario is to just use GSAP mouse events for rollover?

[Ian Robinson]

Actually, I take it all back. I removed the transitions from the full file and still the issue remains. Seems I'll have to do some more digging as apparently there's something else in my code interrupting it.

[Rodrigo]

Hi,

 

Is @Windpixel's demo working in the way you want/need?

 

If so I'd recommend following that approach to make it work in your setup. As you mention probably something else must be creating this problem for you.

 

Happy Tweening!

[Ian Robinson]

Yeah, no it's not once I add it into the rest of my code for some reason. But yeah, there's something else affecting the animation – I'll add here when I figure it out in case someone else runs into a similar issue.