Jump to content


Issue Regarding Opacity

Moderator Tag

Recommended Posts

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?

Link to comment
Share on other sites

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:



"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.




  • Like 3
  • Thanks 1
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.