jQuery: CSS animation is not smooth

Question

I have a simple code where jQuery hiding and showing changed content in a headline on 2 seconds interval.

The issue in this script when the CSS class was added and script after that adding a new one. The animation is not smooth and I really don't know what can make it more smooth.

I tried a lot of things with CSS and script and it's still doing this.

EDIT

I need to have done with CSS animations.

setTimeout(function() {
   $('.top-slider').toggleClass('active');
     $('#slider-headline').on('transitionend webkitTransitionEnd', function() {
            $('.top-slider').removeClass('active');
            $("#slider-headline").text("Hello world!");
    });
}, 2000);

#slider-headline {
            text-transform: uppercase;
            font-size: 2.5em;
            padding: 0 8px;
            overflow: hidden;
            max-height: 1000px;
            transition: max-height 2s cubic-bezier(0, 1, 0, 1);
            position: relative;
            z-index: 2;
      background: #bada55
}

.top-slider.active #slider-headline {
    max-height: 0;
    transition: max-height 2s ease-in-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section class="top-slider">
            <div class="content">
                <div class="slider-headline">
                    <h2 id="slider-headline">Web design</h2>
                </div>
            </div>
</section>

The issue is the max-height: 1000px. The transition takes 2 seconds, but its speed is as though it's animating to that height. — dantheman
– dantheman, Commented Jul 29, 2020 at 13:03
instead of jquery try jquery UI for a smooth transition @matúš-rebroš — Shareque
– Shareque, Commented Jul 29, 2020 at 13:13

justDan · Accepted Answer · 2020-07-29 13:09:27Z

Try to put the transition from the .top-slider.active #slider-headline and use it on #slider-headline.

setTimeout(function() {
   $('.top-slider').toggleClass('active');
   $('#slider-headline').on('transitionend webkitTransitionEnd', function() {
     $('.top-slider').removeClass('active');
     $("#slider-headline").text("Hello world!");
   });
}, 2000);

#slider-headline {
  text-transform: uppercase;
  font-size: 2.5em;
  padding: 0 8px;
  overflow: hidden;
  max-height: 600px;
  position: relative;
  z-index: 2;
  background: #bada55;
  transition: max-height 2s ease-in-out;
}

.top-slider.active #slider-headline {
  max-height: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section class="top-slider">
  <div class="content">
    <div class="slider-headline">
      <h2 id="slider-headline">Web design</h2>
    </div>
  </div>
</section>

Sivakumar Tadisetti · Accepted Answer · 2020-07-29 13:50:10Z

Here the main issue is with cubic-bezier function. It will give a transition effect with variable speed from start to end. Changed to cubic-bezier(1, 1, 0.8, 1) and increased seconds for transition speed to 3s
And you don't need another transition effect in second css rule.

setTimeout(function() {
  $('.top-slider').toggleClass('active');
  $('#slider-headline').on('transitionend webkitTransitionEnd', function() {
    $('.top-slider').removeClass('active');
    $("#slider-headline").text("Hello world!");
  });
}, 500);

#slider-headline {
  text-transform: uppercase;
  font-size: 2.5em;
  padding: 0 8px;
  overflow: hidden;
  max-height: 1000px;
  position: relative;
  z-index: 2;
  background: #bada55;
  transition: max-height 3s cubic-bezier(1, 1, 0.8, 1);
}

.top-slider.active #slider-headline {
  max-height: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section class="top-slider">
  <div class="content">
    <div class="slider-headline">
      <h2 id="slider-headline">Web design</h2>
    </div>
  </div>
</section>

dantheman · Accepted Answer · 2020-07-29 13:00:01Z

0

jQuery has a built in way of sliding up and down elements:

setTimeout(function() {

    $('.top-slider').slideUp(500, function() {
        $("#slider-headline").text("Hello world!");
        $('.top-slider').slideDown(500)
    });

}, 2000);

This slides the element up, changes the text, then sides it down. You'll need to remove your max-heights and transitions from your css.

edited Jul 29, 2020 at 13:00

answered Jul 29, 2020 at 12:57

dantheman

3,8642 gold badges12 silver badges25 bronze badges

1 Comment

Matúš Rebroš Over a year ago

Sorry I forgot mentioned I need to be done with CSS animation.

Robin · Accepted Answer · 2020-07-29 13:18:25Z

0

You can do smooth animation(fadeIn & fadeOut) using jQuery fadeIn and fadeOut function.

$('.top-slider').fadeOut(2000, () => {
  $('#slider-headline').text('Hello World')
  $('.top-slider').fadeIn('slow')
})

#slider-headline { 
  text-transform: uppercase; 
  font-size: 2.5em; 
  padding: 0 8px; 
  overflow: hidden; 
  max-height: 1000px; 
  transition: max-height 2s cubic-bezier(0, 1, 0, 1); 
  position: relative; z-index: 2; background: #bada55 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section class="top-slider">
  <div class="content">
    <div class="slider-headline">
      <h2 id="slider-headline">Web design</h2>
    </div>
  </div>
</section>

answered Jul 29, 2020 at 13:18

Robin

5,4672 gold badges34 silver badges49 bronze badges

Collectives™ on Stack Overflow

jQuery: CSS animation is not smooth

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related