Jump to content
Search Community

autoAlpha not very smooth

pravissimo test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...