CODEWITHSUNDEEP
javascripthtmlcssanimationvelocity.js
MikaAK
MikaAK

Reputation: 2364

Javascript making animation slower?

Im using velocity.js in an attempt to see the difference between CSS3 animations and Javascript animations.

For CSS3 my animations are on a h1 and h2 element

/* HeaderIntro */
@keyframes headerintro {
  0% {
    opacity: 0;
    margin-right: 15rem;
  } 

  100% {
    opacity: 1;
    margin-right: 0;
  }
}

/* SubHeaderIntro */
@keyframes subheaderintro {
  0% {
    opacity: 0;
    margin-left: 15rem;
  } 

  100% {
    opacity: 1;
    margin-left: 0;
  }
}

/* TitlePulse */
@keyframes titlepulse {
  50% {
    transform: scale(.98);
  }
}

My velocity.js version of this is 

$(document).ready(function() {

  headerIntro();
  headerPulse();
});


$mainHeader = $('.mainheader');

function headerIntro() {
  $subHeader = $('.subheader');
  $mainHeader.css('margin-left', '-15rem').css('opacity', 0)
             .velocity({'margin-left': '0rem', opacity: 1}, 750, 'ease-in-out');
  $subHeader.css('margin-left', '15rem').css('opacity', 0)
            .velocity({'margin-left': '0rem', opacity: 1}, 750, 'ease-in-out', {queue: false});
}

function headerPulse() {
  $mainHeader.velocity({scale: '95%'}, 850, 'ease-in-out')
             .velocity({scale: '100%'}, 850, 'ease-in-out', headerPulse);
}

for some reason the velocity example has choppy frames for the pulsing title.

Heres a codepen to the CSS3: http://codepen.io/Snowfiring/pen/Beiba

Heres a codepen to the Velocity: http://codepen.io/Snowfiring/pen/jbuvy

Upvotes: 0

Views: 1117

Answers (1)

execution
execution

Reputation: 236

An advantage of JavaScript-powered CSS transforms is that hardware acceleration (HA) isn't automatically triggered for 2D transforms on desktop browsers -- meaning that text doesn't become blurry by default.

If you do want to enable HA on 2D transforms (translateX/Y, rotateZ) on desktop browsers, and benefit from the subpixel sampling it provides, then animate the translateZ property to 0 during your animation.

(For more information on this topic, refer to Velocity's documentation: http://velocityjs.org/#transforms.)

Just change the functions to the following: 

function headerIntro() {
  $subHeader = $('.subheader');
  $mainHeader.css('margin-left', '-15rem').css('opacity', 0)
         .velocity({'margin-left': '0rem', opacity: 1, translateZ: 0}, 750, 
                    'ease-in-out');
  $subHeader.css('margin-left', '15rem').css('opacity', 0)
        .velocity({'margin-left': '0rem', opacity: 1, translateZ: 0}, 750, 
                    'ease-in-out', {queue: false});
}

function headerPulse() {
  $mainHeader.velocity({scale: '98%', translateZ: 0 }, 850, 'ease-in-out')
             $mainHeader.velocity({scale: '100%', translateZ: 0 }, 850, 
                                   'ease-in-out');
}

and you'll be good to go.

Upvotes: 2

Related Questions