Multiple autoAlpha to multiple elements

[Nasr Galal]

any simpler way to do this?
as the '#note3' will not show up

plus, it is a lot repetitive!

tl
        .to('#note1', 0.8, { autoAlpha: 1, }, 5)
        .to('#note1', 0.8, { autoAlpha: 0, }, 10)
        .to('#note2', 0.8, { autoAlpha: 1, })
        .to('#note2', 0.8, { autoAlpha: 0 },15)
        .to('#note3', 0.8, { autoAlpha: 1 })
        .to('#note3', 0.8, { autoAlpha: 0 }, 20)
        .to('#note4', 0.8, { autoAlpha: 1, })
        .to('#note4', 0.8, { autoAlpha: 0, }, 25)
        .to('#note5', 0.8, { autoAlpha: 1, })
        .to('#note5', 0.8, { autoAlpha: 0, }, 30)
        .to('#note6', 0.8, { autoAlpha: 1, })
        .to('#note6', 0.8, { autoAlpha: 0, }, 35)

 

[mikel]

Hey @Nasr Galal,

 

Your case in a codePen would be nice.

 

Using classes, stagger and the new syntax - e.g.:

 

See the Pen eYJwYVz by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

[Nasr Galal]

Hi @mikel

Appreciate your response

how about something like this:

See the Pen oNbrgvM by nasr3090 (@nasr3090) on CodePen

 

[mikel]

Hey,

 

You could use simple staggers:

 

See the Pen zYrVxqp by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[Nasr Galal]

Thanks! with codepen it is okay,

 once I apply it in a Vue app, it does only show elements which results in overlapping

 

[mikel]

 

Sorry - I'm no vue expert.

[Nasr Galal]

I replaced autoAlpha with opacity, It does the trick

[Nasr Galal]

Also found out that using `delay` is more stable

e.g:
 

.to('#something', 0.8, { opacity: 0, delay: 4 })

 

[ZachSaucier]

7 minutes ago, Nasr Galal said:

Also found out that using `delay` is more stable

It shouldn't be. Please provide a minimal demo of your situation (including Vue) for us to check out. CodePen has a handy Vue editor you should use.

 

By the way, we recommend that you include the duration inside of the vars parameter so that you can use features like GSAP's defaults. The syntax that you're using may not be supported in a (distant) future version of GSAP.

[Nasr Galal]

@ZachSaucier

this is really strange!

 

in codepen, It runs as expected

See the Pen YzqPWZP by nasr3090 (@nasr3090) on CodePen

in code sandbox, it runs as expected

https://codesandbox.io/s/text-opacity-animation-pxlos?file=/src/App.vue

 

but in my vue cli localhost it does not!

[ZachSaucier]

2 minutes ago, Nasr Galal said:

but in my vue cli localhost it does not!

That tells us that it's some environmental issue  Good luck figuring out the cause, hah.

 

By the way it's best to avoid setting transforms outside of GSAP for elements that you manipulate with GSAP. It's one of the most common GSAP mistakes: