CODEWITHSUNDEEP
jqueryioscssmobilehardware-acceleration
user1730207
user1730207

Reputation: 31

Mobile GPU accelerated slideToggle functionality

I'm developing an interface for a mobile app in HTML and CSS. The app uses a lot of forms and I want to use jQuery slideToggle functionality to show and hide the less frequently used elements.

jQuery animations run very poorly on mobile devices, so after some research it seems that only transform: translate3d() in CSS will invoke hardware acceleration on webkit mobile browsers.

Any thoughts on how I can create a slide toggle using CSS translate 3d?

Thanks guys,

G

Upvotes: 3

Views: 4064

Answers (2)

Poloeater
Poloeater

Reputation: 1

Just want to let you know that version 1.3.1 of JQuery mobile is using translate3d for its slide animation. 1.3.0 did not.

Upvotes: 0

Diego
Diego

Reputation: 169

Using tranlateY() is still not using hardware acceleration.

If you still want to use jQuery Mobile for the toggle effect, you should make changes to the Jquery Mobile CSS.

Look for this:

.slide.in {
            -webkit-transform: translateX(0);
            -webkit-animation-name: slideinfromright;
            }
.slide.out {
            -webkit-transform: translateX(-100%);
            -webkit-animation-name: slideouttoleft;
        }

@-webkit-keyframes slideinfromright {
            from { -webkit-transform: translateX(100%); }
            to { -webkit-transform: translateX(0); }
        }
@-webkit-keyframes slideouttoleft {
            from { -webkit-transform: translateX(0); }
            to { -webkit-transform: translateX(-100%); }
        }

(see here http://jquerymobile.com/demos/1.1.0-rc.1/docs/pages/page-customtransitions.html)

And change:

"translateX(-100%)" to "translate3d(-100%,0,0)"<br>
"translateX(0)" to "translate3d(0,0,0)"<br>
"translateX(100%)" to "translate3d(100%,0,0)"

This will make jQuery for mobile transition smoother for webkit devices.

From Webkit:

translate3d(x, y, z) Move the element in x, y and z, and just move the element in z. Positive z is towards the viewer. Unlike x and y, the z value cannot be a percentage. https://www.webkit.org/blog/386/3d-transforms/

It's known that the use of translate3d pushes CSS animations into hardware acceleration. Even if you're looking to do a basic 2d translation, use translate3d for more power!

http://davidwalsh.name/translate3d

This way you can achieve what you're looking for.

Diego Trigo

Upvotes: 1

Related Questions