Issue Regarding Opacity

[rootx86 1 Likes (Newbie)]

Hey Team,

 

I just started using GSAP and It's awesome.

 

But I used this piece of code

 

        gsap.from('.btn-blue', {
            opacity: 0,
            duration: 0.5,
            delay: 21,
        });

        gsap.from('.anim1', {
            opacity: 0,
            y: -100,
            duration: 0.5,
            stagger: 0.5
        })

But the issue is, The Button I applied this animation to, Firstly appears on the the Screen and then it Disappears and comes back after the Delay. I want it like, It should not be displayed at its original position at the beginning.

 

How can I do that?

[akapowl 5,494 Likes (Superhero)]

Hey @rootx86

 

A minimal demo of what you are experiencing always helps others better understand what the problem might be.

In this case, your issue might be related to using .from-tweens and how GSAP renders/sets the values.

 

Try using

 

immediateRender: false

 

on your tweens - that might resolve the issue.

 

Although old, the gist of this article in the learning-center still applies today:

 

 

 

 

 

@GreenSock just recently put it in these words in a related article that referred to multiple timelines:

 

Quote:

"If you set immediateRender: false, that's a cue to GSAP that the state is specific to that tween, thus if you rewind the playhead PAST the start, it should REVERT to the previous value. It's like there are 3 states - the "before the tween started" state, the "starting values" and the "ending values". When immediateRender is true, it's more like two states (no "before the tween started" state). 

For example, if box.height starts at 0 and then you do a .from(box, {height: 100, immediateRender: false}, 1) it would stay at 0 for the first 1 second and then JUMP to 100 and animate down to a height of 0. But imagine rewinding that.... it would go 0 -> 100...then JUMP back to 0 (the pre-tween value!) "

 

 

 

 

 

  

 

Hope this helps with your issue.

Cheers,

Paul

 

[rootx86 1 Likes (Newbie)]

Hey @akapowl,

 

Thanks for your help.

 

The issue is fixed now.