Default transitions for Muban

c02-title-and-text.hbs

<link rel="stylesheet" href="./c02-title-and-text.scss">
<script src="./C02TitleAndText.ts"></script>

<section class="c02-title-and-text" data-component="c02-title-and-text" data-scroll-component>
  <div class="block-wrapper{{#if top-padding}} top-{{top-padding}}{{/if}}{{#if bottom-padding}} bottom-{{bottom-padding}}{{/if}}">
    <div class="content-wrapper">
      {{#if label}}
      {{> general/heading label class="heading-5 grey label" data-attr="transition-item" }}
      {{/if}}
      <div class="wrapper">
        {{> general/heading title class="heading-2 semi-bold highlight title" data-attr="transition-item" }}
        <div class="copy-wrapper rich-text" data-transition-item>
          {{{rich-text}}}
        </div>
      </div>
    </div>
  </div>
</section>

C02TitleAndTextTransitionController.ts

import { MubanTransitionController, IMubanTransitionMixin } from 'muban-transition-component';
import { TimelineMax } from 'gsap';
import C02TitleAndText from './C02TitleAndText';
import { verticalFadeIn } from '../../../util/transition-helpers';

class C02TitleAndTextTransitionController extends MubanTransitionController {
  protected setupTransitionInTimeline(
    timeline: TimelineMax,
    parent: C02TitleAndText,
    id: string,
  ): void {
    const transitionItems = parent.getElements('[data-transition-item]');
    timeline.add(verticalFadeIn(transitionItems));
  }

  protected setupTransitionOutTimeline(
    timeline: TimelineMax,
    parent: C02TitleAndText,
    id: string,
  ): void {}

  protected setupLoopingAnimationTimeline(
    timeline: TimelineMax,
    parent: C02TitleAndText,
    id: string,
  ): void {}
}

export default C02TitleAndTextTransitionController;

verticalFadeIn.ts

import { TweenMax, Power2 } from 'gsap';

export const verticalFadeIn = (items: Array<HTMLElement>): Array<TweenMax> => {
  return TweenMax.staggerFromTo(
    items,
    1,
    {
      y: 20,
      autoAlpha: 0,
    },
    {
      y: 0,
      autoAlpha: 1,
      clearProps: 'visibility, opacity, transform',
      ease: Power2.easeOut,
    },
    0.2,
  );
};