I'm trying to playing around with the features of GSAP, but I can't figure out how to work with timelines, I'm new to all this, any help would be appreciated.
What I'm trying to do in my code- Each time the v-shaped silver svg translates away from its initial position and back, the text changes, to a different one, similarly it happens once more.
Here's my codepen link: https://codepen.io/goprime/pen/VGEYeZ
And the code:
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 & 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 & 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 & 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 & 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 & 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});
}
}
}
Now it works well in the first iteration, but once the animation restarts, the timing gets disturbed, I just can't figure out what I'm doing wrong here, hopefully I was able to explain the issue, thanks in advance and hope you guys have a great day!
You'll have trouble syncing everything if you don't put all the animation in the timeline. You're using too much different tweens in my opinion. Also you're sometime using translate and other time using width to reveal the text.
I changed it to
x:"-=510"
I forked your pen. You'll just have to change the text as you please where I commented //change text
Also I think you could benefit from an improved SVG.
Anyway, let me know if something isn't clear enough, I often do complex SVG animation with TimelineMax I should be able to help.