Visibility or display animation

[emmanuelulloa]

I am trying to create an animation where things are not visible, then "pop" into existence and then move into final position.

So I am using something like this:

 

const wordAnimationSetup = { xPercent: 5, autoAlpha: 0};//for this I use gsap.set(elements, wordAnimationSetup);
const wordAnimationIn = {xPercent: 0, stagger: 0.1, duration: 0.15, ease: "circ.out", autoAlpha: 1};

const wordAnimationOut = {xPercent: -5, stagger: 0.1, duration: 0.15, ease: "circ.in", autoAlpha: 0};
//then I move things in and out using tl.to(elements, wordAnimationIn, "+=0.5"); 

 

Now the problem is that there is a small fade whenever things appear.  I want them to show up THEN slide into position.

I guess I could use tl.set(elements, {autoAlpha: 1} but it does not work with staggers because ALL elements show up and then 1 by 1 slide into position.

I basically want to stagger the display/visibility and then do the animation per element.

Any ideas?

[Rodrigo]

Hey Emmauel!

 

Perhaps something like this?

See the Pen KwNwWRg by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[emmanuelulloa]

This is very helpful @Rodrigo.  I did not know you can put stagger in the .set function!

Thanks a lot!