austinoboyle
3/11/2018 - 6:45 PM

animations object for stripe-banner

animations object for stripe-banner

import {TweenMax, Power0, TimelineMax, Power1} from 'gsap';
import {
    APPEAR_TIME, X_OFFSET, SLIDE_TIME, X_TOTAL_DISTANCE,
    X_MAX, X_MIN, BOUNCE_HEIGHT, BOUNCE_TIME
} from '../constants';
import {randomBetween} from '../utils';

export default {
    show(target, scale, startingPos) {
        TweenMax.to(target, 0, {x: startingPos.x, top: startingPos.y})
        TweenMax.fromTo(target, APPEAR_TIME, 
            {scale: 0.5, opacity: 0},
            {opacity: 1, scale: scale, ease: Power0.easeNone}
        );
    },
    hide(target) {
        TweenMax.to(target, APPEAR_TIME, {opacity: 0, scale: 0.5});
    },
    slide(target, startingPos) {
        const slide = new TimelineMax();
        const initialSlide = new TimelineMax();
        const repeatSlide = new TimelineMax({repeat: -1});

        initialSlide.fromTo(
            target, 
            SLIDE_TIME * (1 - (startingPos.x + X_OFFSET)/X_TOTAL_DISTANCE ),
            {x: startingPos.x, top: startingPos.y},
            {x: X_MAX, ease: Power0.easeNone, top: startingPos.y}
        );v
        repeatSlide.fromTo(target, SLIDE_TIME, 
            {x: X_MIN, top: startingPos.y},
            {x: X_MAX, top: startingPos.y, ease: Power0.easeNone}
        );
        slide.add([initialSlide, repeatSlide], "+=0", "sequence");
        return slide;
    },
    bounce(target) {
        const bounce = new TimelineMax({repeat: -1}).yoyo(true);
        bounce.to(target, BOUNCE_TIME, {
            y: -BOUNCE_HEIGHT, 
            ease: Power1.easeInOut
        });
        bounce.timeScale(randomBetween(0.7, 1.3));
        return bounce;
    }
}