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

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

Всем Салют!

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

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

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

https://alexcss.com

Зачем?

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

Как?

Что такое 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});

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

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

  1. Stagger

  2. Движение вдоль кривой

  3. Сложные SVG анимации

  4. Draggable

  5. Clip

  6. Draw SVG - отрисовка фигур или их контура

  7. 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");

Пример - движение по кривой

buglab.io

Пример - движение по кривой

buglab.io

Clip

huru.rocks

Clip

huru.rocks

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

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

https://alexcss.com

=

Супер заряженные анимации с помощью GreenSock Animation Platform

By Alexey Kalyuzhnyi

Made with Slides.com

Супер заряженные анимации с помощью GreenSock Animation Platform

Воспринимайте GSAP как швейцарский армейский нож JavaScript анимаций ... только круче. Он может привести в движение все, к чему может достучаться JavaScript (CSS свойства, SVG, свойства любых объектов и т. д.), GSAP решает все вопросы кроссбраузерности, и все это с невероятной производительностью. Проще говоря, GreenSock (GreenSock Animation Platform) является самой надежной высокопроизводительной библиотекой для анимаций на планете и отличным инструментом для построения сложных анимаций и полного контроля над ними.

  • 1,951

More from Alexey Kalyuzhnyi