Jump to content
Search Community

timeline multiple elements simultaneously with different opacity

Skatedan test
Moderator Tag

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

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

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

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'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

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

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.
×
×
  • Create New...