gsap => anime test kitchen

kitchen.js

import { TweenMax } from 'gsap';
import anime from 'animejs';

window.anime = anime;

const get = (el, dir) => {
  const translate = getComputedStyle(el)
    .getPropertyValue('transform')
    .match(/(-?[0-9\.]+)/g);

  const i = dir === 'x' ? translate.length - 2 : translate.length - 1;
  const side = dir === 'x' ? el.offsetWidth : el.offsetHeight;

  console.log(`${(translate[i] / side) * 100}%`);

  return `${(translate[i] / side) * 100}%`;
};

export default class Kitchen {
  init() {
    this.$slides = $('.kitchen__img');
    this.$prev = $('.js-kitchen-prev');
    this.$next = $('.js-kitchen-next');
    this.$active = $('.kitchen__img:nth-child(2)');
    this.$tabs = $('.kitchen__tab');

    this.ease = window.CustomEase.create(
      'custom',
      'M0,0 C0.116,0.02 0.244,0.032 0.44,0.648 0.524,0.912 0.606,1 1,1'
    );
    this.easing = 'cubicBezier(.56,.02,.29,1.02)';
    this.duration = 1000;
    this.canAnimate = true;

    this.initEvents();
  }

  initEvents() {
    const self = this;

    this.$prev.on('click', () => {
      if (this.canAnimate) this.prev();
    });

    this.$next.on('click', () => {
      if (this.canAnimate) this.next();
    });

    this.$tabs.on('click', function onTabClick() {
      if (self.canAnimate) self.onTab(this);
    });
  }

  updatePrev() {
    this.$active = this.$active.prev();

    if (this.$active.length === 0) {
      this.$active = $('.kitchen__img').last();
    }

    const index = this.$active.index();

    $('.kitchen__tab')
      .removeClass('is-active')
      .eq(index)
      .addClass('is-active');

    $('.kitchen__subtitle')
      .removeClass('active')
      .eq(index)
      .addClass('active');
  }

  updateNext() {
    this.$active = this.$active.next();

    if (this.$active.length === 0) {
      this.$active = $('.kitchen__img').first();
    }

    const index = this.$active.index();

    $('.kitchen__tab')
      .removeClass('is-active')
      .eq(index)
      .addClass('is-active');

    $('.kitchen__subtitle')
      .removeClass('active')
      .eq(index)
      .addClass('active');
  }

  prev = () => {
    const { easing, duration } = this;

    // First
    let first = this.$active.prev()[0];
    if (!first) {
      first = $('.kitchen__img').last()[0];
    }

    anime({
      targets: first,
      translateX: [get(first, 'x'), '-50%'],
      translateY: [get(first, 'y'), '-50%'],
      rotate: '-=1turn',
      easing,
      duration
    });

    // TweenMax.to(first, this.duration, {
    //   x: '-50%',
    //   y: '-50%',
    //   rotation: '-=360',
    //   ease: this.ease
    // });

    // Second
    const second = this.$active[0];
    anime({
      targets: second,
      translateX: [get(second, 'x'), '110%'],
      translateY: [get(second, 'y'), '-80%'],
      rotate: '-=1turn',
      easing,
      duration,
      begin: () => {
        this.canAnimate = false;
        this.updatePrev();
      },
      complete: () => {
        this.canAnimate = true;
      }
    });
    // TweenMax.to(second, this.duration, {
    //   x: '110%',
    //   y: '-80%',
    //   rotation: '-=360',
    //   ease: this.ease,
    //   onStart: () => {
    //     this.canAnimate = false;
    //     this.updatePrev();
    //   },
    //   onComplete: () => {
    //     this.canAnimate = true;
    //   }
    // });

    // Third
    let third = this.$active.next()[0];
    if (!third) {
      third = $('.kitchen__img').first();
    }
    anime({
      targets: third,
      translateX: [get(third, 'x'), '200%'],
      translateY: [get(third, 'y'), '-150%'],
      rotate: '-=1turn',
      easing,
      duration
    });
    // TweenMax.to(third, this.duration, {
    //   x: '200%',
    //   y: '-150%',
    //   rotation: '-=360',
    //   ease: this.ease
    // });
    anime({
      targets: third,
      translateX: [get(third, 'x'), '-300%'],
      translateY: [get(third, 'y'), '-150%'],
      rotate: '-=1turn',
      duration: 0,
      delay: duration / 2.5,
      easing
    });
    // TweenMax.to(third, 0, {
    //   delay: this.duration / 2.5,
    //   x: '-300%',
    //   y: '-150%',
    //   rotation: '-=360',
    //   ease: this.ease
    // });
    anime({
      targets: third,
      translateX: [get(third, 'x'), '-210%'],
      translateY: [get(third, 'y'), '-80%'],
      rotate: '-=1turn',
      delay: duration / 2.5,
      duration: duration / 2.5,
      easing
    });
    // TweenMax.to(third, this.duration / 2.5, {
    //   delay: this.duration / 2.5,
    //   x: '-210%',
    //   y: '-80%',
    //   rotation: '-=360',
    //   ease: this.ease
    // });
  };

  next = () => {
    const { duration, easing } = this;
    // First
    let first = this.$active.prev()[0];
    if (!first) {
      first = $('.kitchen__img').last();
    }

    anime({
      targets: first,
      translateX: [get(first, 'x'), '-300%'],
      translateY: [get(first, 'y'), '-150%'],
      rotate: '+=1turn',
      easing,
      duration
    });
    // TweenMax.to(first, this.duration, {
    //   x: '-300%',
    //   y: '-150%',
    //   rotation: '+=360',
    //   ease: this.ease
    // });
    anime({
      targets: first,
      translateX: [get(first, 'x'), '200%'],
      translateY: [get(first, 'y'), '-150%'],
      delay: duration / 2.5,
      duration: 0,
      easing
    });
    // TweenMax.to(first, 0, {
    //   delay: this.duration / 2.5,
    //   x: '200%',
    //   y: '-150%'
    // });
    anime({
      targets: first,
      translateX: [get(first, 'x'), '110%'],
      translateY: [get(first, 'y'), '-80%'],
      rotate: '+=1turn',
      duration: duration / 2.5,
      delay: duration / 2.5,
      easing
    });
    // TweenMax.to(first, this.duration / 2.5, {
    //   delay: this.duration / 2.5,
    //   x: '110%',
    //   y: '-80%',
    //   rotation: '+=360',
    //   ease: this.ease
    // });

    // Second
    const second = this.$active[0];
    anime({
      targets: second,
      translateX: [get(second, 'x'), '-210%'],
      translateY: [get(second, 'y'), '-80%'],
      rotate: '+=1turn',
      duration,
      easing,
      begin: () => {
        this.canAnimate = false;
        this.updateNext();
      },
      complete: () => {
        this.canAnimate = true;
      }
    });
    // TweenMax.to(second, this.duration, {
    //   x: '-210%',
    //   y: '-80%',
    //   rotation: '+=360',
    //   ease: this.ease,
    //   onStart: () => {
    //     this.canAnimate = false;
    //     this.updateNext();
    //   },
    //   onComplete: () => {
    //     this.canAnimate = true;
    //   }
    // });

    // Third
    let third = this.$active.next()[0];
    if (!third) {
      third = $('.kitchen__img').first();
    }
    anime({
      targets: third,
      translateX: [get(third, 'x'), '-50%'],
      translateY: [get(third, 'y'), '-50%'],
      rotate: '+=1turn',
      duration,
      easing
    });
    // TweenMax.to(third, this.duration, {
    //   x: '-50%',
    //   y: '-50%',
    //   rotation: '+=360',
    //   ease: this.ease
    // });
  };

  onTab = tab => {
    const tabIndex = $(tab).index();
    const activeIndex = this.$active.index();

    if (tabIndex === activeIndex) return false;

    switch (activeIndex) {
      case 0:
        if (tabIndex === this.$active.next().index()) {
          this.next();
        } else {
          this.prev();
        }
        break;

      case 1:
        if (tabIndex === this.$active.next().index()) {
          this.next();
        } else {
          this.prev();
        }
        break;

      case 2:
        if (tabIndex === this.$active.prev().index()) {
          this.prev();
        } else {
          this.next();
        }
        break;

      default:
        break;
    }
  };
}