Hello guys,
I'm new to greensock and so far I love it.
I'm creating an animation using timeline, and I've bumped to some problems.
The one i want to describe is that my autoAlpha att doesn't give me a fading effect. The scenario is: When user click on green button, the two elements should appear from it (it does), but the text on the left side "wczoraj i pojutrze" should fade away, to visibility:hidden. I've attached video so you can see how it actually looks, right now (it is in attachment). And down below you can see my code.
<div id="mainButton" class="stroke-button m-b-3 m-t-3 z-top">
<h3 class="left-text g-text uppercase"> Wczoraj i pojutrze</h3>
<img class="button-green" src="/assets/img/svg/plus.svg"/>
<h3 class="bottom-text b-text uppercase"> Wczoraj i pojutrze</h3>
</div>
<div id="leftStrokeButton" class="stroke-button-small-left m-b-3 m-t-3">
<img class="button-white" src="/assets/img/svg/plus.svg"/>
<h3 class="bottom-text b-text uppercase"> Wczoraj i pojutrze</h3>
</div>
<div id="rightStrokeButton" class="stroke-button-small-right m-b-3 m-t-3">
<img class="button-white" src="/assets/img/svg/plus.svg"/>
<h3 class="bottom-text b-text uppercase"> Wczoraj i pojutrze</h3>
</div>
function strokedButtonAnimation() {
var toggleButton = jQuery("#mainButton"),
tl = new TimelineLite({paused: true}),
duration = 1,
leftStrokeButton = jQuery("#leftStrokeButton"),
rightStrokeButton = jQuery("#rightStrokeButton"),
mainButtonText = jQuery(".stroke-button .left-text");
TweenMax.set(mainButtonText,{autoAlpha:1});
tl.reversed(true);
tl.to(mainButtonText, duration, {ease: Power3.easeOut, autoAlpha: 0}, 0)
.to(leftStrokeButton, duration, {ease: Power3.easeOut, x: -100}, 0)
.to(rightStrokeButton, duration, {ease: Power3.easeOut, x: 100}, 0)
.to(rightStrokeButton, duration, {ease: Power3.easeOut, x: 100}, 0);
function toggleDirection() {
tl.reversed() ? tl.play() : tl.reverse();
}
toggleButton.on('click', function(){
toggleDirection()
});
}
Hope you can help me. I will answer all the questions. Cheers.
filmik.mov