One Paragraph of project description goes here
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
| 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, |
| import { gsap, Power3 } from 'gsap'; | |
| export const baseTransition = ( | |
| elements: HTMLElement | ReadonlyArray<HTMLElement>, | |
| props?: gsap.AnimationVars, | |
| ): gsap.core.Animation => | |
| gsap.from(elements, { | |
| duration: 1.2, | |
| y: 40, | |
| ease: Power3.easeOut, |
| @function strip-unit($number) { | |
| @if type-of($number) == "number" and not unitless($number) { | |
| @return $number / ($number * 0 + 1); | |
| } | |
| @return $number; | |
| } | |
| @function fluid( | |
| $startValue, | |
| $endValue, |