Extremely Strange Choppiness

[m4g1c14n]

I first noticed this at

https://www.jasa-website-murah.com/Promo/Jasa-Pembuatan-Website.html , when you wait the animation to finish and scroll down to find the form, you can see everything is animated smoothly, EXCEPT the "Kirim" button, it is extremely choppy, it is really really visible.... I shrug it away and thought "perhaps the greensock animation can not properly animate the Form Input button?"

 

But now, I am developing the https://www.ikt.co.id , I am animating the Left side panel, and saw huge amount of choppiness, so I create the CodePen, you can really2 see the choppiness is started at the "Map Button" (very slightly), the "Awards Icon" and the "Arsip + Mobile Version Button" (very pronounced)

 

What goes wrong?

 

This case is extremely urgent for me, because I need to bring the animation live by monday (if possible), please help

See the Pen ZGgEwO by m4g1c14n (@m4g1c14n) on CodePen

[bromel]

Hello m4g1c14n

 

I have just had a quick look at your pen, this is just a quick suggestion but mainly I would ask if the button map class is setup relative in your css as the other tweenable classes in this section.

 

Here is my code suggestion

//Strange choppiness started here!
	tl.staggerFrom ( $(container_menu).children() , 0.25, {y:"50px", autoAlpha:0, ease:Back.easeOut}, 0.1, "-=0.25" );
	tl.from(button_map, 0.5, {y:"25px", opacity:0, ease:Back.easeIn}, "-=0.25");
	tl.staggerFrom ( $(container_social).children() , 0.25, {y:"100px", autoAlpha:0, ease:Back.easeOut}, 0.1, "-=0.25" );
	tl.from(button_like, 0.5, {x:"100px", autoAlpha:0, ease:Back.easeOut}, "-=0.25");
	tl.from(address_title, 0.5, {y:"-25px", autoAlpha:0, ease:Back.easeOut}, "-=0.25");

This is a usefully article which might be of use to you

 

http://greensock.com/forums/topic/6176-starting-opacity-when-autoalpha-fading-from-0-to-1/

 

Just double check your css, I believe you will find the issue lies there.

 

regards

 

bromel

[OSUblake]

Wrap your links in a div or some other block-level element. I just did the bottom 2, "Arsip" and "Mobile Version".

 

See the Pen jPgEVr by osublake (@osublake) on CodePen

[m4g1c14n]

Everyone, thanks a lot for your help.

 

@Osublake, at your pen, did you notice the lag on the first 3 buttons? that is the "Jasa Pembuatan Website" , "Jasa SEO Bergaransi" and "Tentang Kami"

 

and in your pen, did you also notice that the awards icon is not animating as it should be? (The animation should be EXACTLY the same the first animation for logo, that is From(scale:0%, autoAlpha:0)... apparently in here, not even the scale animation is not shown, but also the autoAlpha is choppy

 

I am trying to make sense of all this, so what caused the problem?

The Anchor tag? The Inline-Block (This can not be, because there are many div that is inline-block and position relative, and it works, eg: The Facebook, Google, Twitter button)

 

I want to understand the problem, so that perhaps later in the future, I can avoid this kind of thing from ever happening again

 

 

 

Again thanks a lot

[m4g1c14n]

And by the way , it seems it is not the Anchor tag fault, neither it is the inline-block or the relative

 

Because the Facebook, Google, twitter Icon are all Anchor tag, but they animate PERFECTLY, while the Award Icon are all not animating correctly

[OSUblake]

An anchor <a> tag is an inline and doesn't have a position. You can either display an anchor as a block, or wrap them in a div to give them a position. Do that and you'll be fine.

 

Look again. I wrapped the first 3 links in a div and slowed it down so you can see.

 

See the Pen jPgEVr by osublake (@osublake) on CodePen

[m4g1c14n]

Okay nailed it....

after the help from everyone, i have finally find the culprit

 

The culprit is the Transition style

Check the Codepen

, you can see that it is not animating correctly, BUT if you remove the transition style, it works perfectly

 

Thanks a lot everyone, I would not notice this without all of your help

 

PS : Is this considered a bug??

[Carl]

Glad to see you got such great help and found the issue.

 

Not a bug in GSAP at all. You should never apply CSS transitions to elements that you plan to animate with GSAP because every time GSAP updates a property the transition will also fight to animate the change in its own way too. Make sense?