Optimizing Animation Effects: Tips for Improving jQuery and CSS Transitions Performance

Question

Optimizing Animation Effects: Tips for Improving jQuery and CSS Transitions Performance

Wouldn't it be cool to have a magic line that follows your mouse as you navigate through the header menu?

Take a look at this example:

It works seamlessly and smoothly.

I tried implementing a similar jQuery script myself, but it's not as smooth as I'd like it to be.

Check out my HTML code below:

<nav>
    <ul>
        <li>
            <a href="" class="active"><p>Home</p></a>
        </li>
      
        // more list items...
        
        <li id="magic-line"></li>
    </ul>
</nav>

Here is the CSS for the magic line:

#magic-line{
    display: block;
    position: absolute;
    width: 100px;
    height: 3px;
    background-color: #7190C9;
    left: 0px;
    top:97px;
}

And here is the jQuery script I'm currently using:

var bar = $("#magic-line");
$("a").hover(function(){
    var link = $(this);
    switch(link.children("p").html()) {
    case "Home":
        var linkWidth = link.parent("li").width();
        var offset = link.offset().left;
        bar.css({left : offset, width : linkWidth, transition : "0.5s"});
        break;
    
    // additional cases...
    
}
});

Do you have any suggestions on how I can improve this script?

You can view my script in action on JsFiddle here:

https://jsfiddle.net/3jeu2L7v/

Although it runs smoother there than on my actual website. Any insights on why this might be happening?

javascript jquery html css

Answer 1

Answer №1

One way to enhance animation performance is by utilizing CSS transforms. Instead of altering left and width, we can utilize transform: translateX() scaleX().

The downside is that CSS transforms may not be supported by older browsers, requiring handling of CSS prefixes in certain cases (e.g. -webkit-transfor, -moz, etc). However, CSS transforms will activate hardware acceleration.

I recommend trying an animation library like GSAP which handles this automatically. It will employ CSS transforms when possible and incorporate necessary CSS prefixes if required. Naturally, this adds an additional dependency to your project and increases the file size by a few kilobytes ;)

var items = $('li');
var bar = $('.bar');

items.on('mouseover', function(){
  var item = $(this);
  var w = item.width();
  var x = item.position().left + 15; // 15 is the margin form the CSS, adjust accordingly

  bar.css({
    transform: 'translateX(' + (x + w / 2 - 1) + 'px) scaleX(' + w + ')',
    //left: x,
    //width: w
  });
})

body {
  font-family: sans-serif;
  margin: 20px 50px;
}

nav{
  padding: 15px 15px 20px 15px;
  border: 1px solid #ccc;
  position: relative;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  list-style: none;
  display: inline;
  margin: 15px;
}

nav li a {
  text-decoration: none;
  color: #888;
}

nav .bar {
  position: absolute;
  width: 1px;
  height: 3px;
  left: 0;
  background: #0ae;
  bottom: 16px;
  transition: 0.5s all;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">Contact us</a></li>
  </ul>
  <div class="bar"></div>
</nav>

Check out this operational example: http://codepen.io/victmo/pen/KMMNVG

If you're interested, watch this video / article concerning animation performance through CSS transforms. Although somewhat dated, it remains relevant:

Best wishes!

Answer 2

One way to enhance animation performance is by utilizing CSS transforms. Instead of altering left and width, we can utilize transform: translateX() scaleX().

The downside is that CSS transforms may not be supported by older browsers, requiring handling of CSS prefixes in certain cases (e.g. -webkit-transfor, -moz, etc). However, CSS transforms will activate hardware acceleration.

I recommend trying an animation library like GSAP which handles this automatically. It will employ CSS transforms when possible and incorporate necessary CSS prefixes if required. Naturally, this adds an additional dependency to your project and increases the file size by a few kilobytes ;)

var items = $('li');
var bar = $('.bar');

items.on('mouseover', function(){
  var item = $(this);
  var w = item.width();
  var x = item.position().left + 15; // 15 is the margin form the CSS, adjust accordingly

  bar.css({
    transform: 'translateX(' + (x + w / 2 - 1) + 'px) scaleX(' + w + ')',
    //left: x,
    //width: w
  });
})

body {
  font-family: sans-serif;
  margin: 20px 50px;
}

nav{
  padding: 15px 15px 20px 15px;
  border: 1px solid #ccc;
  position: relative;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  list-style: none;
  display: inline;
  margin: 15px;
}

nav li a {
  text-decoration: none;
  color: #888;
}

nav .bar {
  position: absolute;
  width: 1px;
  height: 3px;
  left: 0;
  background: #0ae;
  bottom: 16px;
  transition: 0.5s all;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">Contact us</a></li>
  </ul>
  <div class="bar"></div>
</nav>

Check out this operational example: http://codepen.io/victmo/pen/KMMNVG

If you're interested, watch this video / article concerning animation performance through CSS transforms. Although somewhat dated, it remains relevant:

Best wishes!

Answer 3

Answer №2

It appears that the slow animation performance may be attributed to other aspects of your codebase. However, there is an opportunity for optimization within this specific piece of code. Specifically, rather than recalculating the width and offset of the "Barre" every time a user hovers, it would be more efficient to calculate these values once and update them only if necessary due to layout changes.

One potential approach could be:

var barre = $("#barre-du-futur"),
// caching additional selectors for future use
    menuLink = $("a");

// This variable will store precalculated widths and offsets   
var barreProps;

$(document).ready(function(){
    barre.css({left : $(".active").offset().left, width : $(".active").parent("li").width(), transition : "0.5s"});
  // Capture Barre properties
  captureBarreProps();
});

$(window).resize(function(){
    barre.css({left : $(".active").offset().left, width : $(".active").parent("li").width(), transition : "0.5s"});
  // Recalculate Barre properties
  captureBarreProps();
});

// Optimization function
function captureBarreProps() {
    // Reset the object
    barreProps = {};

  // Iterate through the links to precalculate properties
  menuLink.each(function() {

        var curMenuLink = $(this);
    var curItemName = curMenuLink.children("p").html();
    if ( curItemName.toString() !== "" ) {
      barreProps[curItemName] = {
        width: curMenuLink.parent("li").width(),
        offset: curMenuLink.offset().left
      };    
    } else {
        // error: An issue with one of the Menu Items
    }

  });
}

// Eliminating the need for switch statements and hardcoded names
menuLink.hover(function(){
    var thisA = $(this),
      curItemName = thisA.children("p").html(),
      curBarreProps = barreProps[curItemName];

    barre.css({left : curBarreProps.offset, width : curBarreProps.width, transition : "0.5s"});
});

Check out the updated fiddle here

Answer 4

It appears that the slow animation performance may be attributed to other aspects of your codebase. However, there is an opportunity for optimization within this specific piece of code. Specifically, rather than recalculating the width and offset of the "Barre" every time a user hovers, it would be more efficient to calculate these values once and update them only if necessary due to layout changes.

One potential approach could be:

var barre = $("#barre-du-futur"),
// caching additional selectors for future use
    menuLink = $("a");

// This variable will store precalculated widths and offsets   
var barreProps;

$(document).ready(function(){
    barre.css({left : $(".active").offset().left, width : $(".active").parent("li").width(), transition : "0.5s"});
  // Capture Barre properties
  captureBarreProps();
});

$(window).resize(function(){
    barre.css({left : $(".active").offset().left, width : $(".active").parent("li").width(), transition : "0.5s"});
  // Recalculate Barre properties
  captureBarreProps();
});

// Optimization function
function captureBarreProps() {
    // Reset the object
    barreProps = {};

  // Iterate through the links to precalculate properties
  menuLink.each(function() {

        var curMenuLink = $(this);
    var curItemName = curMenuLink.children("p").html();
    if ( curItemName.toString() !== "" ) {
      barreProps[curItemName] = {
        width: curMenuLink.parent("li").width(),
        offset: curMenuLink.offset().left
      };    
    } else {
        // error: An issue with one of the Menu Items
    }

  });
}

// Eliminating the need for switch statements and hardcoded names
menuLink.hover(function(){
    var thisA = $(this),
      curItemName = thisA.children("p").html(),
      curBarreProps = barreProps[curItemName];

    barre.css({left : curBarreProps.offset, width : curBarreProps.width, transition : "0.5s"});
});

Check out the updated fiddle here

Answer 5

Answer №3

To achieve the desired effect of filling the whole line from left to right without space between them, you must trigger the hover on the li elements which are divided into four equal parts. The key is to set the width of nav ul li to 25% in your CSS.

Here is a more concise way to write your function:

$("li").each(function() {
  $(this).hover(function (){
    var trigger = $(this).find('a'),
        left        = trigger.offset().left,
        width       = trigger.outerWidth();
    barre.css({'left': left, 'width': width})
  })
})

I have rewritten your fiddle for clarity: Check out the updated fiddle here

Answer 6

To achieve the desired effect of filling the whole line from left to right without space between them, you must trigger the hover on the li elements which are divided into four equal parts. The key is to set the width of nav ul li to 25% in your CSS.

Here is a more concise way to write your function:

$("li").each(function() {
  $(this).hover(function (){
    var trigger = $(this).find('a'),
        left        = trigger.offset().left,
        width       = trigger.outerWidth();
    barre.css({'left': left, 'width': width})
  })
})

I have rewritten your fiddle for clarity: Check out the updated fiddle here

Optimizing Animation Effects: Tips for Improving jQuery and CSS Transitions Performance

Answer №1

Answer №2

Answer №3

Similar questions

Cloud function for Firestore to recursively update a subcollection or collection group

Exploring the Fusion of Strings and Arrays of Javascript Objects using jQuery and JSON

Constantly positioning the text cursor over the Textbox

"Encountering issue with componentDidMount() not functioning as expected, despite debugger being

Optimized layout for screen resolutions exceeding 1000 pixels wide

What advantages do interfaces as data types offer in Angular compared to using classes?

Encountering numerous TypeScript errors due to a JavaScript file in Visual Studio 2017

Creating a 404 Error Response in Express.js

Is it more advantageous to create two distinct projects for the frontend and backend along with an API, or should I consolidate them into a

Issue with accessing Scope value in AngularJS directive Scope

Move Picture with Click (like the action on Google Maps)

Collapse the active panel on a jQuery accordion with a click event

Error encountered: A syntax error occurred due to an unexpected token ":" found in the file path D:practise odejs odejs-demoviewsindex.html

Has a newly created element been styled or are all values set to default since it is outside of the DOM?

Text encoded in UTF-8 emerges from the surrounding frame

Guide to creating a ReactJS higher-order component using modern ES6 syntax

Enable or disable dropdown based on selected radio button status

Conceal a specific entry in Django

Is there a way to eliminate currency within an Angularjs directive?

Is it not possible to include Infinity as a number in JSON?