Исчезновение в дочерних элементах после прокрутки волшебной анимации - PullRequest
Новая
       43

Исчезновение в дочерних элементах после прокрутки волшебной анимации

0 голосов
/ 04 ноября 2019

Я пытаюсь разобраться со ScrollMagic и GSAP, я получаю удовольствие от этого, но наткнулся на загадку. У меня есть элемент, который вставляется во время прокрутки (.box), но я не могу заставить контент, размещенный внутри него, постепенно исчезать после завершения начальной анимации. 

<div id="trigger1">
   <div id="animate1" class="box box1">
       <div id="animate2" class="con">
          <div class="img">
            <img src="img/cog.svg" width="100%" height="500">
        </div>
        <div class="text">
            <h2>Nice Title Here</h2>
            <p>Content here</p>
        </div>
    </div>
</div>


$(function() {

// Set the controller

var controller = new ScrollMagic.Controller();

// End

// Set a scene

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger1",
    duration: 300,
})
.setTween
    ("#animate1", 0.5, {backgroundColor: "white", marginLeft:'0', transitionTimingFunction:'ease-in-out'}) // trigger a TweenMax.to tween
    .addIndicators({name: "trigger 1"}) // add indicators (requires plugin)
    .addTo(controller); 

});

// End Scene

Что мне нужно сделать, чтобы содержимое внутри .con исчезло после завершения анимации .box? Я попытался добавить второго подростка в сцену, но это, похоже, не работает вообще и мешает ему работать вообще.

У меня есть кодовая ручка, которая показывает, где я нахожусь - https://codepen.io/HappyCode89/pen/gOOvRZQ

Заранее благодарен за любую помощь:)

...