CODEWITHSUNDEEP
javascripthtmljquerycss
Matúš Rebroš
Matúš Rebroš

Reputation: 145

jQuery: CSS animation is not smooth

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>

Upvotes: 3

Views: 343

Answers (4)

Sivakumar Tadisetti
Sivakumar Tadisetti

Reputation: 5041

  • 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>

Upvotes: 1

Robin
Robin

Reputation: 5427

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>

Upvotes: 0

justDan
justDan

Reputation: 2335

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>

Upvotes: 2

dantheman
dantheman

Reputation: 3814

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.

Upvotes: 0

Related Questions