Mobile FPS suffering due to slide-out drawer performance issues

Question

Mobile FPS suffering due to slide-out drawer performance issues

My application features a drawer menu that functions smoothly on desktop, but experiences issues on mobile devices with noticeable lag.

Within the header, I have implemented a boolean value that toggles between true and false upon clicking the hamburger icon. This action adds an 'out' class to the '.container', causing it to slide out. The drawer is positioned absolutely on the page's top right corner. When the 'out' class is applied to the container, it shifts 280px to the right, revealing the drawer.

Below is a simplified version of the HTML and CSS code:

<div class="landing-page-container" ng-class="isMenuOut ? 'out' : ''">
<header/>
<main/>
<footer/>
</div>

<sidebar>

CSS:

.home-slide-menu{
  width: 280px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  overflow:hidden;
}

.landing-page-container{
  right:0;
  position: relative;
  transition: right 0.2s ease-in 0s;
}

.landing-page-container.out{
  right:280px;
  overflow: hidden;
}

If the provided details are insufficient for troubleshooting, please do let me know. Any red flags or additional information needed would be greatly appreciated for resolving this issue efficiently.

css angularjs performance

Answer 1

Answer №1

To achieve smooth animations, it is recommended to utilize 3D transforms.

When it comes to displaying content on the screen, the calculations can be handled by either the CPU or the GPU (graphics card). It is advisable to rely on the GPU for display tasks, especially for animation purposes.

How can you make sure your animations are hardware-accelerated by the GPU? By using translate3d! When you apply a transform using translate3d, the element is processed by the GPU in Webkit-based browsers such as Chrome and Safari (commonly used on devices like iPhones and iPads).

Here is an example showcasing this concept:

https://jsfiddle.net/asmsomtw/

Key CSS Code from the fiddle

/* Transition effect and timing */
div {
    transform: translate3d(0, 0%, 0);
    transition: transform 500ms ease-in;
}

/* Applying transform when toggling class to hide the drawer */
.hide {
    transform: translate3d(-100%, 0, 0);
}

Test this approach on your devices experiencing performance issues and try changing the values to right similar to your original implementation to observe any differences.

Remember not to overuse the GPU; choose wisely when opting for hardware acceleration.

Answer 2

To achieve smooth animations, it is recommended to utilize 3D transforms.

When it comes to displaying content on the screen, the calculations can be handled by either the CPU or the GPU (graphics card). It is advisable to rely on the GPU for display tasks, especially for animation purposes.

How can you make sure your animations are hardware-accelerated by the GPU? By using translate3d! When you apply a transform using translate3d, the element is processed by the GPU in Webkit-based browsers such as Chrome and Safari (commonly used on devices like iPhones and iPads).

Here is an example showcasing this concept:

https://jsfiddle.net/asmsomtw/

Key CSS Code from the fiddle

/* Transition effect and timing */
div {
    transform: translate3d(0, 0%, 0);
    transition: transform 500ms ease-in;
}

/* Applying transform when toggling class to hide the drawer */
.hide {
    transform: translate3d(-100%, 0, 0);
}

Test this approach on your devices experiencing performance issues and try changing the values to right similar to your original implementation to observe any differences.

Remember not to overuse the GPU; choose wisely when opting for hardware acceleration.

Answer 3

Answer №2

Experience a smoother movement by experimenting with a 2D transform

-ms-transform: translate(-280px,0); /* IE 9 */
-webkit-transform: translate(-280px,0); /* Safari */
transform: translate(-280px,0); /* Standard syntax */

Answer 4

Experience a smoother movement by experimenting with a 2D transform

-ms-transform: translate(-280px,0); /* IE 9 */
-webkit-transform: translate(-280px,0); /* Safari */
transform: translate(-280px,0); /* Standard syntax */

Answer 5

Answer №3

Have you considered using TweenMax? This JavaScript animation library is known for its compatibility with Angular and its focus on performance. Check it out here:

Even Google has recommended TweenMax: https://developers.google.com/web/fundamentals/look-and-feel/animations/css-vs-javascript?hl=en

Here's an example of how you can use TweenMax in Angular to achieve a similar effect:

function(){
    TweenMax.to(someDomElementAsVariable, 0.3, {
        right:"350px"
    });
};

This function will animate the 'right' property of someDomElementAsVariable to 350px over a duration of 0.3 seconds.

Answer 6

Have you considered using TweenMax? This JavaScript animation library is known for its compatibility with Angular and its focus on performance. Check it out here:

Even Google has recommended TweenMax: https://developers.google.com/web/fundamentals/look-and-feel/animations/css-vs-javascript?hl=en

Here's an example of how you can use TweenMax in Angular to achieve a similar effect:

function(){
    TweenMax.to(someDomElementAsVariable, 0.3, {
        right:"350px"
    });
};

This function will animate the 'right' property of someDomElementAsVariable to 350px over a duration of 0.3 seconds.

Mobile FPS suffering due to slide-out drawer performance issues

Answer №1

Answer №2

Answer №3

Similar questions

Positioning of DIV elements in relation to each other

Navigating to a specific route upon the arrival of a push notification (Angular, Ionic, ngcordova)

There are no warnings or errors when running Yeoman grunt build, however, the dist folder that is generated is not functioning

Troubleshooting Autocomplete User Interface Problems

Angular is unable to POST to Rails server with the content-type set as application/json

Enhancing the Security of Spring Rest Services: A Guide to Implementing Spring Security with AngularJS

Discovering the property name of an object in Angular using $watch

Using Javascript to Manuever an Element via Arrow Inputs

Identifying when an image has finished loading without utilizing a directive specifically assigned to the image element

Are all elements still displaying the menuBar style? Using the PHP include function, <?php include... ?>

Change a 24-hour time variable to 12-hour time using AngularJS/jQuery technology

Angular Protractor testing: achieving precise column name matching

What is the best way to showcase a div on top of all other elements in an HTML page?

Can you use ng-show within ng-if in Angular?

Tips for positioning an element in the center of a page using Bootstrap both horizontally and vertically

Experiencing delays with AngularJS $http responses

ng-hide and ng-switch slow down content visibility

Acquiring a fresh scope in Angular via a different component

Guide to centering a Material UI Table on a webpage

How come there is such a large space for clicking between my logo and the navigation bar, and what can be done to eliminate it?