Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Skatedan

timeline multiple elements simultaneously with different opacity

Go to solution Solved by nico fonseca,

Recommended Posts

Hi, I would like to animate this elements simultaneously:

tl.to(".elemMe1",{opacity:0,duration:1}).to(".elemMe2",{opacity:1,duration:1})

tl.to("#elemMe1",{opacity:0.5,duration:1}).to("#elemMe2",{opacity:1,duration:1})

How could I do? I also tried to use the staggerTo() method, but it didn't allow me to handle two different opacity values.
Could anyone kindly support me?
Thank you

 

Link to comment
Share on other sites

Hi Skatedan,

You're probably looking for the position parameter!

 

// begin the second animation at the start time of the first
tl.to(".first", { opacity: 1 }), 
tl.to(".second", { opacity: 0 }, '<'), 


 

 

See the Pen PopXddg by GreenSock (@GreenSock) on CodePen

  • Like 2
Link to comment
Share on other sites

2 minutes ago, Cassie said:

Hi Skatedan,

You're probably looking for the position parameter!
 

 

 

Hi Cassie, 
thank you for your quick response, but honestly I don't know that this could be adeguate for my case.
I am creating a double menu that by scrolling the viewport, I would like to change the opacity of the items contained within the first menu (left) from 0.5 to 1 (and inverse to scroll-up), and at the items on the right menu the opacity changes from 0 to 1 and 1 to 0 at the scroll-up

Link to comment
Share on other sites

I don't think I'll be able to help any further without a minimal demo, could you pop one together so we can help?

Thanks!

Link to comment
Share on other sites

2 hours ago, Cassie said:

I don't think I'll be able to help any further without a minimal demo, could you pop one together so we can help?

Thanks!

here there is an example for with my code:

See the Pen bGRBEJm by skatedan26 (@skatedan26) on CodePen

Link to comment
Share on other sites

Thanks! Are you looking for something like this?

See the Pen JjJbXry by GreenSock (@GreenSock) on CodePen



Note - You had inline opacity settings and opacity settings in your CSS and JS - that's an easy way to end up with conflicts and confusion.

Link to comment
Share on other sites

6 minutes ago, Cassie said:

Thanks! Are you looking for something like this?
 

 


Note - You had inline opacity settings and opacity settings in your CSS and JS - that's an easy way to end up with conflicts and confusion.

 

 

that's right, the scroll must change the opacity for both menu items
 

image.png

Link to comment
Share on other sites

19 minutes ago, Cassie said:

Ti avvicineresti allo stesso modo: vedi come il parametro di posizione può essere utilizzato per impostare i tempi di inizio dell'animazione?

 

 


 

 

 

I understand, but I saw that such a thing should be handled in a synchronized manner using this method:
 

tl.staggerTo(".elemMe1, #elemMe1", 1, {opacity:0})
tl.staggerTo(".elemMe2, #elemMe2", 1, {opacity:1})

it could help me?
The only thing is that it doesn't allow me to enter an additional value for the second element
 

image.png

Link to comment
Share on other sites

This is old GreenSock syntax - if you look closer at the example I've put together for you you'll see it is using staggers with the updated GSAP3 syntax.

 

Link to comment
Share on other sites

18 minutes ago, Cassie said:

Questa è la vecchia sintassi GreenSock: se guardi più da vicino l'esempio che ho messo insieme per te, vedrai che utilizza scaglionamenti con la sintassi GSAP3 aggiornata.

 

aaah ok, i got it but from the example they don't seem synchronized

Link to comment
Share on other sites

I don't think I know what you mean by synchronised - could you explain? 

(I've increased the stagger time to make it a little more clear what's happening too.)

Link to comment
Share on other sites

I'm sorry if I haven't explained myself well, I would like the first element of the left menu to have opacity 1 by default (the others have opacity 0.5) and at the same time the first of the right menu has opacity 1 (the others with opacity 0 ), when I scroll the elements with opacity 1 of the left menu I will have opacity 0.5 and the next one with opacity 1, while for the right menu the one with opacity 1 changes to 0 and the next one is shown with opacity 1.
it's a bit confusing, I hope I've explained myself sufficiently :)

Link to comment
Share on other sites

1 hour ago, nico fonseca said:

@Skatedan something like this?
 

 

Great, it looks just what I need, I try and update you, thank you very much.

  • Like 1
Link to comment
Share on other sites

2 hours ago, nico fonseca said:

@Skatedan something like this?
 

 

ok, it seems great! :)

there is only one that I would like to change, when the animation ends, is it possible to leave the last state of opacity visible?

  • Like 1
Link to comment
Share on other sites

Hi @nico fonseca & @Cassie, now i would like to enter and exit more smooth then now, it seems too jerky.

At this link you can find a little video demostration.

Thanks for your support.

Skatedan.

image.png

Link to comment
Share on other sites

Hi Skatedan - we'e provided a lot of examples for you here for you to tweak and learn from. I'm afraid it's out of the scope of these forums to sculpt finalised custom solutions for people.

If you would like the fade to be slower the duration of the fade would need to be longer in relation to the stagger spacing, or the distance of the scroll would need to be longer.

Think of timings in a scrollTriggers animation as ratios, they take up a certain percentage of the scroll distance.


If a duration is 1 and the staggered gap is 0.5 the gap will last half as long as the duration.

If you'd like more help please post a codepen detailing what you've tried or what GSAP-specific behaviour you're struggling to understand.

 

Good luck!

 

  • Like 3
Link to comment
Share on other sites

hi @Cassie,

Thanks for the reply!
Sorry if I didn't explain myself well, but I don't need to have slower animation fades during the effect but go into animation and animation output.

The code I am working on is yours published days ago

:)

 

Link to comment
Share on other sites

I don't understand that last request I'm afraid.

Either way we've provided a lot of demos for you to learn from.

Give the docs a read,  give it a go and if you're struggling to comprehend something we're happy to answer specific questions.

  • Like 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.
×