autoAlpha is not working properly

[AsKadir]

Hi!

I have a long timeline on my localhost,

I tried to recreate it in codepen, but there it's working fine.

So in my timeline in the end I have:

        tl.from(menuList, 0.5,  {
            autoAlpha: 0,
            x: -40,
            ease: Expo.easeOut
        }, "-=0.5")

in menuList I have a lot of <li></li> elements.

So when animation starts I can see in my DevTools how menuList is coming visible inside inline styles,

but li elements not appears, only when animation is ended, they become visible.

If I change autoAlpha: 0 to opacity: 0, everything is working fine.

Maybe you met this before? Can somebody give me explanation of it?

I'm using gsap 2.1.3, checked this in last versions of Safari, Chrome.

[mikel]

Hey @AslanGoi,

 

The special 'phenomenon' of a from() tween is (see the DOCS)

 

NOTE: By default, immediateRender is true in from() tweens, meaning that they immediately render their starting state regardless of any delay that is specified. You can override this behavior by passing immediateRender: false in the vars parameter so that it will wait to render until the tween actually begins.

 

Does this notice make the situation clear?

 

Happy tweening ...

Mikel

 

[ZachSaucier]

Hey Aslan. 

 

35 minutes ago, AslanGoi said:

If I change autoAlpha: 0 to opacity: 0, everything is working fine.

Maybe you met this before? Can somebody give me explanation of it?

No, we haven't ran into anything like this before. There's is almost definitely something wrong in your code/setup that's causing this difference but without us being able to take a look it's pretty impossible for us to say what  

 

Any chance you could host a minimal demo of the issue on a live site for us to see? If not, maybe you could share a ZIP of the minimal demo recreating the issue?

 

P.S. I see you still haven't upgraded to GSAP 3...  

[AsKadir]

@ZachSaucier I'm trying to recreate this issue in codepen, but it's working)

When I will end my project, I will show it on livesite.

I can't use GSAP 3 because of ScrollMagic(((

I promise I will learn Intersection Observer!

Thanks, Zach!

[AsKadir]

2 hours ago, mikel said:

Hey @AslanGoi,

 

The special 'phenomenon' of a from() tween is (see the DOCS)

 

NOTE: By default, immediateRender is true in from() tweens, meaning that they immediately render their starting state regardless of any delay that is specified. You can override this behavior by passing immediateRender: false in the vars parameter so that it will wait to render until the tween actually begins.

 

Does this notice make the situation clear?

 

Happy tweening ...

Mikel

 

It doesn't(

I think I will use opacity instead of autoAlpha.

Thanks, Mikel!