Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Extremely Strange Choppiness

Go to solution Solved by m4g1c14n,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

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

Link to comment
Share on other sites

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




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





Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • Solution

Okay nailed it....

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


The culprit is the Transition style

Check the Codepen

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

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


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


PS : Is this considered a bug??

Link to comment
Share on other sites

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?

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.