Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Ard

Performance issues on mobile (Android)

Recommended Posts

Hello,

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

 

Links:

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

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

Link to post
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.

http://greensock.com/forums/topic/14206-full-screen-a-div/?p=60466

  • Like 2
Link to post
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 post
Share on other sites

Wow!

 

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?

Regards

 

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

Link to post
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 post
Share on other sites

Thank you very much for your time and help! :) This is exactly what I wanted to achieve.

  • Like 1
Link to post
Share on other sites
Guest
This topic is now closed to further replies.

  • Recently Browsing   0 members

    No registered users viewing this page.

×