How to make jquery animate look smoother?

Question

I have a multiple card layout with divs that expand the width and height upon clicking on the "More Info" link. The animation could be smoother but not sure how to do it.

CSS:

.card{
  width: 300px;
  height: 500px;
  position: relative;
  box-shadow:none;
  display:inline-block;
  margin: 10px;
  border-radius: 5px;
  background-color: #fff;
  text-align: left;
  box-shadow: 2px 3px 12px 0px rgba(0,0,0,0.75);
  transition: all .8s;
}

HTML:

<div class="card" data-filter="family">
                    <div class="card-img-container"></div>
                    <div class="card-text-container">
                        <h2 class="card-title">Card Title</h2>
                        <p class="card-body" 
                        data-orig-text="Get your Kicks on Route 66 and explore national parks, monuments and historical site while visiting native animals, including reptiles. Meet Smokey Bear and friends and learn how to protect, respect and connect with nature and its animals. WTF" 

                        data-short-text="Get your Kicks on Route 66 and explore national parks, monuments and historical site while visiting native animals, including reptiles. Meet Smokey Bear and friends and l..."> </p>

                        <p class="card-location">
                            Location: Center Patio <br>
                            Time: Fri 12pm - 11pm | Sat & Sun 10am - 11pm | Labor Day 12pm - 11pm <br>
                            Cost: FREE <br>
                            Age: ALL AGES <br>
                        </p>
                    </div>
                    <div class="card-link-container">
                        <a class="more-link">More Info</a>
                    </div>
                </div>

jQuery:

moreLinks.click(function(event){
        var cardClicked = $(this).parents('.card');
        var textContainer = cardClicked.find('.card-text-container');
        var cardClickText = cardClicked.find('.card-body');
        var locationInfo = cardClicked.find('p.card-location');

        /*Checks to see if card is already open*/
        if($(this).html() === 'Back'){
            if($(window).width() >= 768){
                $("html, body").animate({ scrollTop: 400 }, "slow");
            }
            cardClickText.text(cardClickText.attr('data-short-text'));
            locationInfo.fadeOut('easeOutExpo');

            cardClicked.css({
                'width': '300px',
                'height' : '500px',
                'margin' : '10px',
                'display': 'inline-block'
            });
            cardClicked.find('.card-img-container').css({
                'height' : '200px'
            });
            $(this).html('More Info');
            textContainer.removeClass('expanded');
        }

        /*If it isnt open, then depending on device transform width and height or just height*/
        else{
            $(this).html('Back');

            cardClickText.text(cardClickText.attr('data-orig-text'));
            locationInfo.fadeIn('easeInQuint');
            var pos = cardClicked.position();

            /*If desktop*/
            if($( window ).width() >= 768){
                cardClicked.css({
                    'display': 'block',
                    'margin' : '0 auto',
                    'width': '750px',
                    'height' : '750px'
                });

                cardClicked.find('.card-img-container').css({
                    'height' : '350px'
                });


            }
            /*If mobile*/
            else{
                cardClicked.css('height', '750px');
            }
            textContainer.addClass('expanded');
            // $("html, body").animate({ scrollTop: pos.top + 900 }, "slow");
        }

    });

Codepen

I am trying to make the final result be more fluid in the way it responds to the clicks on "More Info" and "Back". Any suggestions is much appreciated.

Answer 1

Width and height properties are not hardware accelerated like CSS3 transforms and unfortunately there is no way to 'fake' this properties using CSS3 transforms in any way - like for example position properties (left, right, etc) that can be exchanged with CSS3 transitions. So, to keep the effect you are displaying in the pen, you really can't do much.

I would try to recreate the same effect in a different way that would resemble the effect you are trying to achieve - for example, have a hidden element appear and change opacity from 0 up to 1 and then 'flash' the content in. Also try animating the rest of the card before doing the one-card animation, however this would require heavy javascript in order to keep smooth and hardware accelerated.

Also, if performance is an issue and you are planning to use on mobile devices take notice of that bold box-shadow that can be hardware demanding when rendered.