Анимация загрузочных каруселей с библиотекой анимации GSAP

Помните, что нам пришлось добавить jQuery в наш проект, потому что от этого зависит карусель Bootstrap. Но имейте в виду, что GSAP — это чистая библиотека JavaScript, и поэтому она не требует этого.

Анимация Bootstrap Карусели: первый слайд

По умолчанию мы хотим, чтобы содержимое наших слайдов было скрыто:

 .carousel-caption { opacity: 0; } 

Только когда страница загружается, мы открываем и анимируем содержимое первого слайда. Для этого мы используем TimelineLite , инструмент для анимации, который помогает нам создавать последовательность анимации.

Итак, как только все ресурсы страницы готовы, firstTimeline функция firstTimeline :

 // this variable stores the first timeline var firstTl; $(window).on("load", function() { firstTl = firstTimeline(); }); 

Эта функция возвращает временную шкалу, которая определяет анимацию для первого слайда:

 function firstTimeline() { var tl = new TimelineLite(); tl .to(".first .carousel-caption", 0.1, {opacity: 1}) .from(".first .pc", 1, { y: -300, opacity: 0, ease: Bounce.easeOut}) .from(".first .keyboard", 1, { y: 300, opacity: 0, ease: Bounce.easeOut}, "-=1") .staggerFrom(".first .list li", 0.75, {opacity: 0, cycle: {x: [-200, 200]}, ease: Power2.easeOut}, 0.15, "-=0.5") .from(".first .desc", 0.7, {x: 500, opacity: 0, ease: Power4.easeOut}, "-=0.5") .from(".first .title", 0.7, {x: -500, opacity: 0, ease: Power2.easeOut}, "-=0.7") .from(".first .price", 0.7, {scale: 0.01, ease: Power4.easeOut}) .from(".first button", 0.7, { y: -700, autoAlpha: 0, ease: Bounce.easeOut}, "-=0.3"); return tl; } 

Более конкретно, внутри функции выше мы делаем следующее:

1. создать TimelineLite
2. добавьте анимацию на временную шкалу, используя методы to , from и staggerFrom
3. вернуть график.

Давайте обратим внимание на параметры, которые мы передаем методам to и from :

1. Элемент DOM, который мы хотим анимировать.
2. Продолжительность анимации в секундах.
3. Объект, содержащий свойства, которые необходимо анимировать, и их соответствующие (начальное или конечное) значения. Кроме того, этот объект может также иметь некоторые другие специальные свойства, такие как свойство ease которое определяет функцию замедления .
4. Размещение анимации на временной шкале. Другими словами, когда эта анимация должна быть исполнена . Например, мы хотим запустить анимацию для .first .pc и .first .keyboard одновременно. Для этого мы устанавливаем значение параметра .first .keyboard элемента .first .keyboard "-=1" . Число «1» внутри этого значения соответствует продолжительности анимации элемента .first .pc .

Подобно методам to и from , мы передаем те же параметры методу staggerFrom . Единственное отличие состоит в том, что мы определяем один дополнительный параметр (четвертый), который определяет время начала каждой анимации. В нашем примере это значение установлено на 0.15 . Тем не менее, целевые элементы не будут появляться одновременно, но между их анимациями будет очень небольшой разрыв. Измените это значение на что-то большое (например, 5), чтобы увидеть явную разницу в эффекте.

Очевидно, что лучший способ понять, как работают анимации выше, это прочитать документацию. Кроме того, используйте инструменты разработчика своего браузера, чтобы увидеть, какие стили GSAP применяет к целевым элементам.

Итак, давайте кратко рассмотрим анимацию, назначенную кнопке.

Изначально у кнопки есть autoAlpha: 0 Это означает, что он визуально скрыт ( opacity: 0 , visibility: hidden ) и расположен на 700 пикселей выше его исходного положения ( transform: matrix(1, 0, 0, 1, 0, -700) ).

Затем, когда анимация воспроизводится, она становится видимой ( opacity: 1 , visibility: inherit ) и возвращается в исходное положение ( transform: matrix(1, 0, 0, 1, 0, 0) ).

 var $carouselCaption = $(".carousel-caption"); $carousel.on("slide.bs.carousel", function() { TweenLite.to($carouselCaption, 0.1, {opacity: 0}); }); $carousel.on("slid.bs.carousel", function () { TweenLite.to($carouselCaption, 0.1, {opacity: 1}); }); 

 // these variables store the timelines var firstTl, secondTl; $carousel.on("slid.bs.carousel", function (e) { TweenLite.to($carouselCaption, 0.1, {opacity: 1}); var slideId = e.relatedTarget.id; if(slideId === "1") { firstTl.restart(); } else if(slideId === "2") { secondTl = secondTimeline(); } }); 

 function secondTimeline() { var tl = new TimelineLite({onComplete: allDone}); tl .from(".second .title", 0.5, { y: -400, opacity: 0, ease: Sine.easeInOut}) .staggerFrom(".second .cms-wrapper", 0.5, {scale: 0, rotation: 180, ease: Power2.easeInOut, onComplete: completeFunc}, 1.2); return tl; } 

 .second .back { display: none; transform: scale(0); } .second .info { opacity: 0; transform: translateY(40px); } 

 function completeFunc() { var $this = $(this.target), $info = $this.find(".info"), $front = $this.find(".front"), $back = $this.find(".back"); TweenLite.to($front, 0.3, {display: "none", scale: 0}); TweenLite.to($back, 0.3, {display: "block", scale: 1, delay: 0.3}); TweenLite.to($info, 0.3, {opacity: 1, y: 0, delay: 0.3}); } 

 function allDone() { TweenLite.to(".second .source", 0.3, {autoAlpha: 1, delay: 1}); } 

 var counter = 0, firstTl, secondTl; $carousel.on("slid.bs.carousel", function (e) { TweenLite.to($carouselCaption, 0.1, {opacity: 1}); var slideId = e.relatedTarget.id; if(slideId === "1") { firstTl.restart(); secondTl.pause(); } else if(slideId === "2") { if(counter === 0) { secondTl = secondTimeline(); } else { TweenLite.set([".second .front", ".second .back", ".second .info", ".second .source"], {clearProps:"all"}); secondTl.restart(); } counter++; } }); 

 <p class="msg"> It seems you have JavaScript disabled. The carousel doesn't work well without JavaScript. Please enable it! </p> 

 .msg { display: none; position: fixed; top: 5px; left: 50%; transform: translateX(-50%); padding: 7px; border: 5px solid #fff000; text-align: center; color: #fff; background: rgba(0, 0, 0, .85); z-index: 999; } .no-js .carousel-inner > .item { display: block; } .no-js .carousel-caption, .no-js .second .info, .no-js .second .source { opacity: 1; } .no-js .second .info { transform: none; } .no-js .second .source { visibility: visible; } .no-js .carousel-indicators { display: none; } .no-js .msg { display: block; } 

 <script> document.documentElement.className = ""; </script>