Skatedan Posted September 6, 2021 Share Posted September 6, 2021 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 More sharing options...
Cassie Posted September 6, 2021 Share Posted September 6, 2021 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 2 Link to comment Share on other sites More sharing options...
Skatedan Posted September 6, 2021 Author Share Posted September 6, 2021 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 More sharing options...
Cassie Posted September 6, 2021 Share Posted September 6, 2021 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 More sharing options...
Skatedan Posted September 6, 2021 Author Share Posted September 6, 2021 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 More sharing options...
Cassie Posted September 6, 2021 Share Posted September 6, 2021 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 More sharing options...
Skatedan Posted September 6, 2021 Author Share Posted September 6, 2021 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 Link to comment Share on other sites More sharing options...
Cassie Posted September 6, 2021 Share Posted September 6, 2021 You'd approach that the same way - do you see how the position parameter can be used to set the start times for the animation? See the Pen oNwYxKP by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
Skatedan Posted September 6, 2021 Author Share Posted September 6, 2021 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 Link to comment Share on other sites More sharing options...
Cassie Posted September 6, 2021 Share Posted September 6, 2021 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 More sharing options...
Skatedan Posted September 6, 2021 Author Share Posted September 6, 2021 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 More sharing options...
Cassie Posted September 6, 2021 Share Posted September 6, 2021 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 More sharing options...
Skatedan Posted September 6, 2021 Author Share Posted September 6, 2021 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 More sharing options...
Solution nico fonseca Posted September 6, 2021 Solution Share Posted September 6, 2021 @Skatedan something like this? See the Pen 4e8a91ca94a783949a147dd62661552a by nicofonseca (@nicofonseca) on CodePen 5 Link to comment Share on other sites More sharing options...
Skatedan Posted September 6, 2021 Author Share Posted September 6, 2021 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. 1 Link to comment Share on other sites More sharing options...
Skatedan Posted September 6, 2021 Author Share Posted September 6, 2021 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? 1 Link to comment Share on other sites More sharing options...
nico fonseca Posted September 6, 2021 Share Posted September 6, 2021 Yes, sure. See the Pen 56ee731382f5c593dae30b76f0c36588 by nicofonseca (@nicofonseca) on CodePen 4 Link to comment Share on other sites More sharing options...
Skatedan Posted September 14, 2021 Author Share Posted September 14, 2021 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. Link to comment Share on other sites More sharing options...
Cassie Posted September 14, 2021 Share Posted September 14, 2021 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! 3 Link to comment Share on other sites More sharing options...
Skatedan Posted September 14, 2021 Author Share Posted September 14, 2021 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 More sharing options...
Cassie Posted September 14, 2021 Share Posted September 14, 2021 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now