Добиться плавной анимации при наличии тучи DOM-элементов, да ещё и когда в анимируемом контейнере грузятся картинки и какой-нибудь Google Maps, оказалось не просто. Путь был довольно долг и тернист. Приведу только рецепт:
- Не используйте jQuery.animate(). Он тормоз.
- Вместо него используйте Velocity.js.
- Если возможно, анимируйте только
transform: translate,transform: scale,transform: rotate,opacity. - Включайте аппаратное ускорение для анимируемого слоя. Делайте это сразу в CSS, приправьте чёрной магией.
Если и после этого не помогло:
- Попробуйте уменьшить количество DOM-элементов в анимируемом контейнере.
- Не стартуйте несколько анимаций единовременно.
- Если контент в контейнер подгружается динамически, рисуйте во время анимации эмуляцию контента, как это делает, например, Facebook. Заменяйте на реальный контент как только анимация закончена.
