Возникли проблемы при работе с GSAP TimelineMax - PullRequest
Новая
       69

Возникли проблемы при работе с GSAP TimelineMax

0 голосов
/ 17 сентября 2018

Я пытаюсь поэкспериментировать с функциями GSAP, но я не могу понять, как работать со сроками, я новичок во всем этом, любая помощь будет оценена.

ЧтоЯ пытаюсь сделать это в своем коде. Каждый раз, когда v-образный серебряный svg переводится из своей первоначальной позиции и обратно, текст меняется на другой, аналогично это происходит еще раз.

Вот мойкодовая ссылка: https://codepen.io/goprime/pen/VGEYeZ

и код:

HTML: 

<div class="we3dx-content">


                    <svg class="responsive-svg" xmlns="http://www.w3.org/2000/svg" style="isolation:isolate" viewBox="354.38 38.613 1134.424 968.338" width="1134.424" height="968.338">  
                        <g><path d=" M 822 104 L 1025 475 L 909 714" fill="none" vector-effect="non-scaling-stroke" stroke-width="5" stroke="rgb(185,185,185)" stroke-linejoin="miter" stroke-linecap="square" stroke-miterlimit="3"/>


                        <rect x="510.697" y="42.215" width="820.272" height="963.909" transform="matrix(1,0,0,1,0,0)" fill="rgb(205,206,190)"/>
                        <rect x="510.697" y="445.327" width="382.189" height="200.673" transform="matrix(1,0,0,1,0,0)" fill="rgb(205,206,190)"/>

                        <g style="opacity:0.5;"><g opacity="0.5"><path d=" M 1202.79 163.563 L 894.504 783.653 L 1003.494 783.653 L 1327.35 159.571 L 1202.79 163.563 Z" fill="rgb(255,255,255)"/></g></g><g opacity="0.8"><path d=" M 1335.92 696.887 C 1335.92 696.224 1335.953 695.567 1336 694.914 L 1011.666 40 L 819.767 40 L 1322.143 1008.338 L 1335.92 1008.338 L 1335.92 696.887 Z " fill="rgb(255,255,255)"/></g>

                        <g class="we3dx-block-1"><g transform="matrix(1,0,0,1,612.348,109.701)"><text transform="matrix(1,0,0,1,0,35.424)" style="font-family:'Source Sans Pro';font-weight:400;font-size:36px;font-style:normal;fill:#000000;stroke:none;">HEALTH &amp; PHARMA</text></g><g transform="matrix(1,0,0,1,611.348,364.701)"><text transform="matrix(1,0,0,1,0,35.424)" style="font-family:'Source Sans Pro';font-weight:400;font-size:36px;font-style:normal;fill:#000000;stroke:none;">CONSUMER PRODUCTS &amp; RETAIL</text></g><g transform="matrix(1,0,0,1,611.348,173.201)"><text transform="matrix(1,0,0,1,0,35.424)" style="font-family:'Source Sans Pro';font-weight:400;font-size:36px;font-style:normal;fill:#000000;stroke:none;">BANKING &amp; FINANCE</text></g><g transform="matrix(1,0,0,1,611.348,236.759)"><text transform="matrix(1,0,0,1,0,35.424)" style="font-family:'Source Sans Pro';font-weight:400;font-size:36px;font-style:normal;fill:#000000;stroke:none;">MEDIA &amp; ENTERTAINMENT</text></g><g transform="matrix(1,0,0,1,611.348,299.702)"><text transform="matrix(1,0,0,1,0,35.424)" style="font-family:'Source Sans Pro';font-weight:400;font-size:36px;font-style:normal;fill:#000000;stroke:none;">SOFTWARES &amp; UTILITIES</text></g></g>


                        <g opacity="0.5">
                        </g>

                        <g>



                        <g id="we3dx-block-2"><g><text transform="matrix(1,0,0,1,0,172.2)" style="font-family:'Raleway';font-weight:400;font-size:75px;font-style:normal;fill:#000000;stroke:none;">VISUAL</text></g><g transform="matrix(1,0,0,1,462.91,480.256)"><text transform="matrix(1,0,0,1,0,70.5)" style="font-family:'Raleway';font-weight:400;font-size:75px;font-style:normal;fill:#000000;stroke:none;">BRANDING</text></g><g transform="matrix(1,0,0,1,920.501,588.884)"><text transform="matrix(1,0,0,1,0,45.12)" style="font-family:'Raleway';font-weight:400;font-size:48px;font-style:normal;fill:#000000;stroke:none;">MARKETING</text></g><g transform="matrix(1,0,0,1,920.5,504.507)"><text transform="matrix(1,0,0,1,0,45.12)" style="font-family:'Raleway';font-weight:400;font-size:48px;font-style:normal;fill:#000000;stroke:none;">DIGITAL</text></g><g transform="matrix(1,0,0,1,920.501,314.552)"><text transform="matrix(1,0,0,1,0,45.12)" style="font-family:'Raleway';font-weight:400;font-size:48px;font-style:normal;fill:#000000;stroke:none;">MANAGEMENT</text></g><g transform="matrix(1,0,0,1,920.502,405.798)"><text transform="matrix(1,0,0,1,0,45.12)" style="font-family:'Raleway';font-weight:400;font-size:48px;font-style:normal;fill:#000000;stroke:none;">CONSULTANTS</text></g></g>

                        <g class="we3dx-block-1"><g transform="matrix(1,0,0,1,736.227,443.71)"><text transform="matrix(1,0,0,1,0,172.2)" style="font-family:'Raleway';font-weight:400;font-size:175px;font-style:normal;fill:#000000;stroke:none;">IT</text></g><g transform="matrix(1,0,0,1,354.846,482.347)"><text transform="matrix(1,0,0,1,0.06,59.04)" style="font-family:'Raleway';font-weight:400;font-size:60px;font-style:normal;fill:#000000;stroke:none;">CONSULTANCY</text></g><g transform="matrix(1,0,0,1,354.846,558.428)"><text transform="matrix(1,0,0,1,0,59.04)" style="font-family:'Raleway';font-weight:400;font-size:60px;font-style:normal;fill:#000000;stroke:none;">OUTSOURCING</text></g></g>

                        <g id="we3dx-block-3"><g transform="matrix(1,0,0,1,543.707,366.635)"><text transform="matrix(1,0,0,1,0,61.1)" style="font-family:'Raleway';font-weight:400;font-size:65px;font-style:normal;fill:#000000;stroke:none;">RAPID /</text></g><g transform="matrix(1,0,0,1,543.707,456.635)"><text transform="matrix(1,0,0,1,0,61.1)" style="font-family:'Raleway';font-weight:400;font-size:65px;font-style:normal;fill:#000000;stroke:none;">PROTOTYPE</text></g><g transform="matrix(1,0,0,1,543.706,559.686)"><text transform="matrix(1,0,0,1,0,61.1)" style="font-family:'Raleway';font-weight:400;font-size:65px;font-style:normal;fill:#000000;stroke:none;">3D - PRINT</text></g><g><g transform="matrix(1,0,0,1,1089,333)"><text transform="matrix(1,0,0,1,0,61.1)" style="font-family:'Raleway';font-weight:400;font-size:65px;font-style:normal;fill:#000000;stroke:none;">FDM</text></g><g transform="matrix(1,0,0,1,1089,424.054)"><text transform="matrix(1,0,0,1,0,61.1)" style="font-family:'Raleway';font-weight:400;font-size:65px;font-style:normal;fill:#000000;stroke:none;">SLA</text></g><g transform="matrix(1,0,0,1,1089,517.14)"><text transform="matrix(1,0,0,1,0,61.1)" style="font-family:'Raleway';font-weight:400;font-size:65px;font-style:normal;fill:#000000;stroke:none;">SLS</text></g><g transform="matrix(1,0,0,1,1089,611.121)"><text transform="matrix(1,0,0,1,0,61.1)" style="font-family:'Raleway';font-weight:400;font-size:65px;font-style:normal;fill:#000000;stroke:none;">CNC</text></g></g></g>



                        <rect id="we3dx-big-right" x="514" y="449" height="200" width="450" fill="rgb(205,206,190)">
                        </g>

                        <rect id="we3dxbox-topright" transform="rotate(-26)" width="700.697" height="800" x="28" y="80" fill="rgb(205,206,190)"/>
                        <path id="bar-we3dx" d=" M 912.482 701.99 L 1020.772 476.554 L 826.228 104" fill="none" vector-effect="non-scaling-stroke" stroke-width="7" stroke="rgb(165,165,160)" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="10"/>

                        <!-- Top right box -->
                        <rect id="we3dx-small-left" x="354.846" y="449.663" width="155" height="200.673" transform="matrix(1,0,0,1,0,0)" fill="red"/>
                        <rect x="169" y="37.215" width="346.697" height="967.123" transform="matrix(1,0,0,1,0,0)" fill="rgb(242,242,242)" />


                    </svg>

                </div>

CSS: 

#we3dx-block-2{
  opacity:0;
}

#we3dx-block-3{
  opacity:0;
  transform:translateX(-15%);
}

JS: 

we3dxAnimation();


function we3dxAnimation(){

      var box = document.querySelector("#we3dx-big-right");
      var bar = document.querySelector("#bar-we3dx");
      var topBox =document.querySelector("#we3dxbox-topright");

      var txt = document.querySelectorAll(".we3dx-block-1");
      var txt2 = document.querySelector("#we3dx-block-2");
      var txt3 =  document.querySelector("#we3dx-block-3");
      var box2 = document.querySelector("#we3dx-small-left");

        tween = TweenMax.to(bar, 3,{ transform:"translateX(-510px)", repeat:10, yoyo:true, repeatDelay:1.7, ease:Linear.easeNone });
        tween = TweenMax.to(topBox, 3.2,{width: "0", repeat:10 ,yoyo:true,delay:0.2, repeatDelay:1.5, ease:Linear.easeNone});

        tween = TweenMax.to(box, 2, {width:"0", repeat:10, yoyo:true,delay:0.5, repeatDelay:2.7, ease:Linear.easeNone});
        tween = TweenMax.to(box2, 3,{ width:"0", repeat:10, yoyo:true, delay:0.9, repeatDelay:1.7, ease:Linear.easeNone });


      var animation = new TimelineMax({repeat:10});

      animation.add(t);

      animation.add(TweenLite.to(txt2, 1, {opacity:"1", repeat:10, delay:8, yoyo:true, ease:Linear.easeNone}));
      animation.add(TweenLite.to(txt2, 1, {opacity:"0", repeat:10, delay:8.1, yoyo:true, ease:Linear.easeNone}));
      animation.add(TweenLite.to(txt3, 1, {opacity:"1", repeat:10, delay:0.5, yoyo:true, ease:Linear.easeNone}));
      animation.add(TweenLite.to(txt3, 1, {opacity:"0", repeat:10, delay:6, yoyo:true, ease:Linear.easeNone}));

      function t(){
        for(let r=0; r<=1; r++){
          tween = TweenLite.to(txt[r], 1, {opacity:"0", repeat:10, yoyo:true, delay:7.5, ease:Linear.easeNone});
          tween = TweenLite.to(txt[r], 1, {opacity:"1", repeat:10, yoyo:true, delay:28, ease:Linear.easeNone});
        }
      }
}

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

1 Ответ

0 голосов
/ 19 сентября 2018

У вас будут проблемы с синхронизацией всего, если вы не разместите всю анимацию на временной шкале.По моему мнению, вы используете слишком много разных подростков.Также вы иногда используете переводчик, а другой - ширину, чтобы раскрыть текст.

Я изменил его на 

x:"-=510"

Я раздвоил вашу ручку.Вам просто нужно будет изменить текст, как вам угодно, где я прокомментировал // изменить текст

Codepen

Также я думаю, что вы могли бы получить выгоду от улучшенного SVG.

В любом случае, дайте мне знать, если что-то не совсем понятно, я часто делаю сложную SVG-анимацию с TimelineMax, я должен быть в состоянии помочь.

...