Jump to content
Search Community

pravissimo

Members
  • Posts

    1
  • Joined

  • Last visited

pravissimo's Achievements

0

Reputation

  1. 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
×
×
  • Create New...