animation anomaly

  • Resolved ilioNaglo

    (@ilionaglo)


    9 years, 7 months ago

    i am getting an animation anomaly.

    for example:
    if the digit is 6, it changes to an 8, then the 8 floats down while a 7 floats up into place.

    i am using a shortcode, however, i have also tested using the widget and this animation anomaly still occurs.

    the site i am testing this is at:

    shortcode:
    [jellyfish_counter end=999999999999 format=”000,000,000,000″ digits=12 direction=”up” digit_style=”background: transparent; color: green;” flat=true; timestamp=”2015-01-01 0:00:00″ interval=5 tenths=”false”]`

    https://www.ads-software.com/plugins/jellyfish-counter-widget/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter ilioNaglo

    (@ilionaglo)

    my apologies on duplicating this.

    Plugin Author Strawberry Jellyfish

    (@toxictoad)

    That’s actually quite an interesting effect!

    You have a pretty loose rule in your style sheet that’s applying a transition effect to all attributes of div, p, a, li and img elements (see line 76):

    div, p, a, li, img{transition:all 2s;-moz-transition:all 2s;-o-transition:all 2s;-webkit-transition:all 2s;}

    The counter div elements are inheriting this transition and you’re seeing a transition animation of positional changes of the digits that would normally be hidden.

    To fix it you’ll have to either not apply the tranistions so globally or override transitions for the counter divs. This css will probably make the counter appear as it should:

    .jcw-digit, .jcw-tenth {
  transition: none;
}
    Thread Starter ilioNaglo

    (@ilionaglo)

    that worked perfect! thank you very much for your quick response and solution.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘animation anomaly’ is closed to new replies.