CODEWITHSUNDEEP
javascriptjquerycsshtml5-videotransition
user2498890
user2498890

Reputation: 1556

CSS3 Transition jolting when applied to div containing HTML5 video?

I have a website with a setup similar to this jsfiddle the only difference really is there is a CSS3 carousel/slideshow of 4 HTML5 videos inside the main body of content.

As you can see in the fiddle the transition is smooth however in my actual website the slide down and up is really glitchy and not smooth at all.

Any ideas why this might be happening would be greatly appreciated.

DEMO

JS

$(".contact-button").on('click', function(){
var clicked = $('#cont').attr('data-state');

if(clicked=='true')
{
$('#cont').attr('data-state','false');
$(".wrapper").css({"top": "100px", "-webkit-transition": "top 0.5s ease-in-out", "-
moz-transition": "top 0.5s ease-in-out", "-o-transition": "top 0.5s ease-in-out", "-moz-
transition": "top 0.5s ease-in-out", "transition": "top 0.5s ease-in-out"});
}else if(clicked=='false')
{
    $('#cont').attr('data-state','true');
    $(".wrapper").css({"top": "0px", "-webkit-transition": "top 0.5s ease-in-out", "-moz-
    transition": "top 0.5s ease-in-out", "-o-transition": "top 0.5s ease-in-out", "-ms-
    transition": "top 0.5s ease-in-out", "transition": "top 0.5s ease-in-out"});
}
});

$(".description-button").on('click', function(){
var clic = $('#des').attr('data-statee');
if(clic =='true')
{
    $('#des').attr('data-statee','false');
    $(".wrapper").css({"top": "-100px"});
}
if(clic =='false')
{
    $('#des').attr('data-statee','true');
    $(".wrapper").css({"top": "0px"});
}
});

Upvotes: 0

Views: 125

Answers (1)

Oscar Paz
Oscar Paz

Reputation: 18292

You are animating the top property, which is a layout property. You shouldn't do this. I changed your CSS and your code, simplifying it to use CSS classes instead of hard-coded values in javascript, and now it uses CSS 3D transforms (where available), which are much quicker and hardware-accelerated. Now it should run smoothly.

Here is the updated jsfiddle.

Changes in the CSS:

.wrapper {
    position: absolute;
    background-color: red;
    width: 100%;
    height: 100%;
    max-width: 1440px;
    margin: 0;
    z-index: 1;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
}


.wrapper.down
{
    -webkit-transform: translate3d(0px, 100px, 0px);
    -ms-transform: translateY(100px);
    -transform: translate3d(0px, 100px, 0px);
}

.wrapper.up
{
    -webkit-transform: translate3d(0px, -100px, 0px);
    -ms-transform: translateY(-100px);
    -transform: translate3d(0px, -100px, 0px);
}

New javascript:

$(".contact-button").on('click', function(){
   var clicked = $('#cont').attr('data-state');

    if(clicked=='true')
    {
        $('#cont').attr('data-state','false');
        $(".wrapper").removeClass('up').addClass('down');
    }else if(clicked=='false')
    {
        $('#cont').attr('data-state','true');
         
        $(".wrapper").removeClass('up down');
    }
});



$(".description-button").on('click', function(){
    var clic = $('#des').attr('data-statee');
    if(clic =='true')
    {
          $('#des').attr('data-statee','false');
        $(".wrapper").removeClass('down').addClass('up');
    }
    if(clic =='false')
    {
        $('#des').attr('data-statee','true');
        $(".wrapper").removeClass('down up');
    }
});

As you see, I've added the up and down CSS classes. Adding and removing them moves the .wrapper DIV.

Upvotes: 1

Related Questions