Супер заряженные

анимации с помощью GreenSock Animation Platform

Всем Салют!

Меня зовут Алексей

Я веселый Front-end разработчик
Я создаю сайты, люблю

"заряженные" анимации
и преподаю в

https://alexcss.com

Зачем?

Анимация отлично может передать смысл
Можете направлять своих пользователей
В противном случае мы не используем полный потенциал веба
Запоминаемость вашего сайта
Это весело! ( не забываем про веселье :)

Как?

Что такое GreenSock?

GSAP, представляет собой JavaScript фреймворк для анимации элементов DOM (и не только...)

Воспринимайте GSAP как швейцарский армейский нож JavaScript анимаций ... только круче.

За что я GSAP?

Почему я GSAP

Кроссбраузерность!
Производительность
Простой синтаксис - помните слайд со сравнением?
Лучшее решение для анимации SVG
Очень широкий набор возможностей
Никаких зависимостей (другие библиотеки и т. п.)

Кроссбраузерность

Детальнее на CSS-Tricks.

Chrome

IE & Edge

Safari (zoomed)

Firefox

Решает другие проблемы c Transform-Origin

IT'S A

MAGIC

Производительность

Синтаксис

var tlShowNav = new TimelineMax({delay:1});

tlShowNav
    .staggerFromTo( '.bd-main-nav > a', 
        0.8, 
        {xPercent: 100}, 
        {ease: Back.easeInOut.config(2), xPercent: 0}, 
        0.1
    )
;

Решение для анимации SVG

buglab.io

Набор возможностей

Меняем любое CSS свойство(а) и не только

TweenLite.to('#logo', 3, {left:"440px", ease:Bounce.easeOut});

TweenLite.from(logo, 2, {opacity:0, left:"300px"});
TweenLite.from([logo, '.nav'], 1, {opacity:1, x:300});

Но мы же здесь говорим про
"супер заряженные" анимации?

Крутые штуки для сложных анимации

Stagger
Движение вдоль кривой
Сложные SVG анимации
Draggable
Clip
Draw SVG - отрисовка фигур или их контура
MorphSVG - изменение формы

TweenMax

Здесь нам помогу:

TimelineMax

и

repeat • yoyo • stagger

TweenMax.staggerTo( $sticks, 5, 
    { 
        borderRadius:0, rotationY:360, 
        rotationZ:360, scale:1.5, 
        yoyo:true, repeat:-1
    }, .1);

var $sticks = $('.dna-rainbow-wrap ul li');

//color animation reinit
var tline = new TimelineMax({repeat:-1, yoyo:true});

tline.staggerTo($sticks, 1, {backgroundColor:'#FF8000'},.1)
    .staggerTo($sticks, 1, {backgroundColor:'#FFDF00'},.1)
    .staggerTo($sticks, 1, {backgroundColor:'#7AF00F'},.1)
    .staggerTo($sticks, 1, {backgroundColor:'#0C9CF3'},.1)
    .staggerTo($sticks, 1, {backgroundColor:'#033CFC'},.1)
    .staggerTo($sticks, 1, {backgroundColor:'#8000FF'},.1);

Stagger

Реальные истории

TimelineMax и Stagger

var tlPreloader = new TimelineMax({delay:1});
tlPreloader
    .to('.bd-loader__logo', .5, 
        {autoAlpha:0, scale:.9, ease: Power4.easeIn, 
        onComplete: initAnimations})
    .add("logo_out")
    .to('.bd-loader__left', 1, {x:"-100%", ease: Power4.easeIn}, 'logo_out-=0.2')
    .to('.bd-loader__right', 1, {x:"100%", ease: Power4.easeIn}, 'logo_out-=0.2')
    .set('.bd-loader', {autoAlpha:0})
    .fromTo('.bd-wrap', 1, {opacity:0}, {opacity:1, clearProps: "all"}, "-=0.2")
    .staggerFromTo('.bd-main-nav > a', 0.8, 
        {xPercent: 100}, 
        {ease: Back.easeInOut.config(2), xPercent: 0}, 
        0.1, "-=1")
    .staggerFromTo('.bd-socials > a', 0.8, 
        {xPercent: -100}, 
        {ease: Back.easeInOut.config(2), xPercent: 0}, 
        0.1, "-=0.8");

var tlSlideShow = new TimelineMax({paused: true, yoyo: true});
var tlSlideHide = new TimelineMax({paused:true, yoyo:true});

tlSlideShow
  .add('start')
  .add(tlTitleShow)
  .fromTo(bigMedia, 1,
      {
          clip: "rect(0px 1400px 1400px 1400px)",
      },
      {
          clip: "rect(0px 1400px 1400px 0px)",
          ease: Power0.easeNone
      },
      "start")
  .fromTo(smallMedia, 0.6,
      {
          clip: "rect(0px 0px 1400px 0px)",
      },
      {
          clip: "rect(0px 500px 1400px 0px)",
          ease: Power0.easeNone
      },
      "start+=0.4")
  .from(slideText, 0.4, {opacity:0, x:10}, "start+=0.5")
;

tlSlideHide
   .add(tlShade)
   .add(tlTitleHide, 0)
   .fromTo(bigMedia, tlShade.duration() - 0.5,
      {
         clip: "rect(0px 1000px 1400px 0px)",
      },
      {
         clip: "rect(0px 0px 1400px 0px)",
         ease: Power0.easeNone
      },
   0)
   .fromTo(smallMedia, 0.6,
      {
         clip: "rect(0px 500px 1400px 0px)",
      },
      {
         clip: "rect(0px 0px 1400px 0px)",
         ease: Power0.easeNone
      },
   0)
   .to(slideText, 0.4, {opacity:0, x:10}, 0)
;

Анимации между слайдами

huru.rocks

var tlSlideShow = new TimelineMax({paused: true, yoyo: true});
var tlSlideHide = new TimelineMax({paused:true, yoyo:true});

...
sliderOff = true;
...
currentSLideShow.reverse();
prevSlideHide.reverse();

// Enable slider on animation end
prevSlideHide
    .eventCallback("onReverseComplete", 
        function(){
            sliderOff = false;
        }
);

...
sliderOff = true;
...
currentSLideHide.play();
nextSLideShow.play();

nextSLideShow
    .eventCallback("onComplete", 
        function(){
            sliderOff = false;
        }
);

Предыдущий слайд

Следующий слайд

БОНУС

Отличный набор Callbacks

var pointerTween = TweenLite.to($pointer, 3, 
    {rotation:"20_cw", transformOrigin:"0px 4px", paused:true, ease:Power1.easeIn,     
        onUpdate:showValue});

function showValue() {
    displayValue = parseInt(pointerTween.progress() * finalValue);
    $numberDisplay.text(displayValue);
}

Можем анимировать любое свойство любого объекта

Depth of field - меняем свойство SVG фильтра

И конечно создавать милоту :)

Это GreenSock

Используйте GSAP

Заряжайте анимации с помощью GSAP

Спасибо за внимание!