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

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

Всем Салют!

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

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

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

facebook.com/alex.kalyuzhnyi

Зачем?

  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

Draggable

const featuresDrag = Draggable.create('[data-features-drag]',{
	type:"x",
	bounds:'[data-features-wrap]',
	edgeResistance: 0.95,
	dragResistance: -0.2,
	allowNativeTouchScrolling: true,
	ease:Strong.easeOut,
	onDrag: movePin
});

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;
        }
);

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

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

SVG Маски

bzntm.com

Референс

bzntm.com

SVG Маски

bzntm.com

tl
.from(triangles, 0.8, {strokeWidth: 63, opacity:0.5})
.add('show-line')

.from(lines.left, 0.5, {scale: 0, transformOrigin: "100% 100%"}, 'show-line')
.from(lines.right, 0.5, {scale: 0, transformOrigin: "0% 100%"}, 'show-line')
.from(lines.bottom, 0.5, {scaleY: 0, transformOrigin: "50% 0%"}, 'show-line')
.add('hide-line')

.to(lines.left, 0.5, {scale: 0, transformOrigin: "0 0"}, 'hide-line')
.to(lines.right, 0.5, {scale: 0, transformOrigin: "100% 0"}, 'hide-line')
.to(lines.bottom, 0.5, {scaleY: 0, transformOrigin: "50% 100%"}, 'hide-line')
.add('show-tri', "-=0.3")

.from(maskTriangle.left, 0.5, {scale: 0, transformOrigin: "50% 60%"}, 'show-tri')
.from(maskTriangle.right, 0.5, {scale: 0, transformOrigin: "50% 60%"}, 'show-tri')
.from(maskTriangle.bottom, 0.5, {scaleX: 0, transformOrigin: "50% 100%"}, 'show-tri')

.staggerFrom(sectionWords.words, 0.2, {x:20, opacity:0}, 0.05)

Анимации по скролу

huru.rocks/buy-huru/

var shape = $('.hr-shape-rect-dash');

var tlShapeRear = new TimelineMax({delay:0.5});

tlShapeRear
	.set(shape, {autoAlpha: 1})
	.from(shape.find('path'), 0.5, {strokeDashoffset: -360})
	.from(shape.find('path'), 1, {strokeDasharray:"360px, 360px"})
;

var sceneRearShapes = new ScrollMagic.Scene(
        {
            triggerElement: shape[0], 
            triggerHook: 0.7, 
            offset:50, reverse: false
        }
    )
    .setTween(tlShapeRear)
    // .addIndicators({name: "shape", colorStart: 'orange'})
    .addTo(controller)
;

Анимации по скролу

http://scrollmagic.io/​

БОНУС

Отличный набор 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 фильтра

Тени

<filter id="shadow">
    <feOffset in="SourceAlpha" result="offOut" dx="10" dy="10" />
    <feGaussianBlur result="blurOut" in="offOut" stdDeviation="5" />
</filter>

feTurbulence #

<feTurbulence id="turbwave" type="fractalNoise" 
    baseFrequency="0.03" />

TweenMax.to("#turbwave", 8, {
  attr:{"baseFrequency":0.01},
  repeat:-1,
  yoyo:true
});

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

Это GreenSock

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

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

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

facebook.com/alex.kalyuzhnyi

=

Made with Slides.com