GreenSock Animation Platform (GSAP) с TweenLite
/ TweenMax
обеспечивает гораздо более плавные переходы с гораздо большей настройкой, чем переходы jQuery или CSS3. Чтобы анимировать свойства CSS с помощью TweenLite / TweenMax, вам также понадобится их плагин под названием «CSSPlugin». TweenMax включает это автоматически.
Сначала загрузите библиотеку TweenMax:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
Или облегченная версия, TweenLite:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenLite.min.js"></script>
Затем назовите анимацию:
var myObj= document.getElementById("myDiv");
// Syntax: (target, speed, {distance, ease})
TweenLite.to(myObj, .7, { x: 500, ease: Power3.easeOut});
Вы также можете позвонить с помощью селектора идентификаторов:
TweenLite.to("#myID", .7, { x: 500, ease: Power3.easeOut});
Если у вас загружен jQuery, вы можете использовать более сложные расширенные селекторы, как и все элементы, содержащие определенный класс:
// This will parse the selectors using jQuery's engine.
TweenLite.to(".myClass", .7, { x: 500, ease: Power3.easeOut});
Для получения полной информации см .:
Документация по TweenLite
По данным их сайта:
"TweenLite - это чрезвычайно быстрый, легкий и гибкий инструмент анимации, который служит основой для анимационной платформы GreenSock (GSAP)."