SuperScrollOrama и TweenMax плавно появляются и исчезают при прокрутке

У меня есть серия цветных DIV, которые я пытаюсь постепенно увеличивать и уменьшать, когда вы прокручиваете страницу вниз.

Моя настройка для div проста:

<div class="wrapper">
        <div id="content" class="clearfix">
            <div class="box alpha"></div>
            <div class="box beta"></div>
            <div class="box gamma last"></div>
            <div class="box delta"></div>
            <div class="box epsilon"></div>
            <div class="box zeta last"></div>
        </div>
    </div>

Вот мой скрипт superscrollorama/tweenmax:

var controller = $.superscrollorama();
controller.addTween('.box.alpha', TweenMax.from( $('.box.alpha'), 1, {css:{opacity: 1} ,ease:Quad.easeInOut}), 400);
controller.addTween('.box.alpha', TweenMax.to( $('.box.alpha'), 1, {css:{opacity: .2}}), 1600);
controller.addTween('.box.beta', TweenMax.from( $('.box.beta'), 1, {css:{opacity: .2}}), 1600);
controller.addTween('.box.beta', TweenMax.to( $('.box.beta'), 1, {css:{opacity: 1} ,ease:Quad.easeInOut}), 2400);
controller.addTween('.box.gamma', TweenMax.from( $('.box.gamma'), 1, {css:{opacity: .2}}), 2400);
controller.addTween('.box.gamma', TweenMax.to( $('.box.gamma'), 1, {css:{opacity: 1} ,ease:Quad.easeInOut}), 3200);
controller.addTween('.box.delta', TweenMax.from( $('.box.delta'), 1, {css:{opacity: .2}}), 3200);
controller.addTween('.box.delta', TweenMax.to( $('.box.delta'), 1, {css:{opacity: 1} ,ease:Quad.easeInOut}), 4000);
controller.addTween('.box.epsilon', TweenMax.from( $('.box.epsilon'), 1, {css:{opacity: .2}}), 4000);
controller.addTween('.box.epsilon', TweenMax.to( $('.box.epsilon'), 1, {css:{opacity: 1} ,ease:Quad.easeInOut}), 4800);
controller.addTween('.box.zeta', TweenMax.from( $('.box.zeta'), 1, {css:{opacity: .2}}), 4800);
controller.addTween('.box.zeta', TweenMax.to( $('.box.zeta'), 1, {css:{opacity: 1} ,ease:Quad.easeInOut}), 5600);

Все исчезает, когда вы прокручиваете страницу вниз, но я хочу, чтобы поле исчезало, пока появляется следующее поле, я, вероятно, делаю это неправильно, но я не могу найти много документации.

Вот что я делаю: http://emptywalrus.com/scroll/


jquery gsap superscrollorama
person user1272433    schedule 27.01.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вам нужно создать файл Timeline. Вот пример того же, что я только что сделал в одном из своих проектов:

controller.addTween(
    '#the-problem',
    (new TimelineLite())
        .append([
            TweenMax.fromTo($('#the-problem .animation-heading'), 1,
                { delay: 0.3, css: { right: -1500 }, ease: Expo.easeInOut },
                { delay: 0.3, css: { right: 0 }, ease: Expo.easeInOut }),
            TweenMax.fromTo($('#the-problem .animation-text'), 1,
                { delay: 0.1, css: { right: -1500 }, ease: Expo.easeInOut },
                { delay: 0.1, css: { right: 0 }, ease: Expo.easeInOut }),
            TweenMax.fromTo($('#the-problem .animation-image'), 1,
                { delay: 0.1, css: { left: -1500 }, ease: Expo.easeInOut },
                { delay: 0.1, css: { left: 0 }, ease: Expo.easeInOut })
        ]), 700, -400);

controller.addTween(
    '#the-solution',
    (new TimelineLite())
        .append([
            TweenMax.fromTo($('#the-solution .animation-heading'), 1,
                { delay: 0.3, css: { left: -1500 }, ease: Expo.easeInOut },
                { delay: 0.3, css: { left: 0 }, ease: Expo.easeInOut }),
            TweenMax.fromTo($('#the-solution .animation-text'), 1,
                { delay: 0.1, css: { left: -1500 }, ease: Expo.easeInOut },
                { delay: 0.1, css: { left: 0 }, ease: Expo.easeInOut }),
            TweenMax.fromTo($('#the-solution .animation-image'), 1,
                { delay: 0.1, css: { right: -1500 }, ease: Expo.easeInOut },
                { delay: 0.1, css: { right: 0 }, ease: Expo.easeInOut })
        ]), 700, -400);
person Jared Eitnier    schedule 27.01.2014