Jump to content
Search Community

Performance issues on mobile (Android)

Ard test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts


Animation which I try to do, works well with computers or iPhone, but if it fires on Android it can munch, unfortunately, is not smooth. Maybe someone is able to help me in what I was doing wrong and how to improve?

The code is a mess, but this is the first time I try to move animations from CSS to JS. The alpha version for phones was not very smooth and able to "trim". After using GSAP is much better, but it seems to me that it might be better.

In addition, some questions (GSAP, JS, CSS):

1) The problem with the grid. I can not set the width (50%) plus a margin? The elements are in absolute position, otherwise when opening the remaining contents can jump. If I use the width: calc () animation can behave strangely. I tried to change position relative to the absolute (in animation), but without success. In the version of the tablet / desktop grid of 100% is replaced by 50% in 2 rows.
2) FadeOut flashes. I'm not sure what causes this? It seemed to me that zIndex, but probably not?
3) I do not know how to get 100% of the width div before animation? now the value entered is rigidly spoil responsiveness (width: '375.5px' or width '457.5px')

4) Literature, which will allow me to expand my knowledge?

I know that's a lot, but maybe someone will help me?

Sorry for bad english. Regards



See the Pen rLmRwK by Ard (@Ard) on CodePen

See the Pen rLmRwK by Ard (@Ard) on CodePen

Link to comment
Share on other sites

You might need to get rid of some stuff for mobile, like the gradient.


Here's how can make a grid using calc. It scales real nice, and can even respond to media queries.

See the Pen 0ac28197d148c523583cb03caf48f9e3 by osublake (@osublake) on CodePen


But changing the width and height of an element in a grid like that can cause problems. It might work better if you animated a clone, like in this post.


  • Like 2
Link to comment
Share on other sites

I made another version of that grid, showing how to use it with an overlay and the clone method I linked to. The clone loses it responsive properties, so you must rebuild it's timeline if the screen is resized. To prevent any jumping, the new timeline is set to the previous timeline's progress and reversed state.

See the Pen 7f3b39b23861664c3ecc399e23112b2a?editors=0010 by osublake (@osublake) on CodePen

  • Like 3
Link to comment
Share on other sites



Thank you very much for your time and help, especially the second post. Your code (approach) will help me in future projects.

I have two questions:

1) All elements open from left to right. In the second column items should be opened from right to left. I tried to change the functions getPosition / layout, but unfortunately without success. Is it possible to do? Elements should not go beyond grid / container.

2) Below 600px animation should only change the height of the element. I understand that it is best to create another timeline and call it when you change the width of the window? Or should it just be found in the function buildTimeline?



See the Pen VjWYKP by Ard (@Ard) on CodePen

Link to comment
Share on other sites

A couple of small changes is all you need. In the media query function, set a variable indicating if the layout is a single column. And in the layout function, save the tile's column using jQuery's .data() method. Now you can conditionally build the timeline using that information. When you build a timeline, it doesn't have to be one large, continuous chain. You can split it up and put an if statement in the middle.

See the Pen 6ac957f070ef9eed66b2006afeae132a?editors=0010 by osublake (@osublake) on CodePen


Also, if you want to use a fixed height for the tiles, here's how you would do that.

See the Pen c2231f18786331938ddb4c60e42b14a5?editors=0010 by osublake (@osublake) on CodePen

  • Like 5
Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...