Argi

@Carl thank you for your help. Sorry I'm only writing back now but I've been busy. In the end I did as you instructed, which is two separate animations. As for my code, on the other hand, these 'ifs' were more to illustrate what I want to achieve. Thank you again for your help and best regards ! ?

Hi! I have a problem with the timeline, which I will describe below On the attached codepen I would like the animation to work like this: First start 1. Orange box appears 2. Red box move 3. Orange box disappear Now the yoyo return and... 4. Do not repeat reversed step 3 5. Move (reversed) red box 6. Do not repeat reversed step 1 And now the loop starts again 7. Go back to 1st step and run like a 1st time I need this because the 'orange box' will be the text that appears, after which a certain animation is performed and the text disappears. The 'red box' then returns to its place, and when the animation of the 'orange box' starts to appear, it already has new content in it. I have tried several ways, but clearly lack experience in GSAP Regards, Kamil.

Thank you for your time. I have a lot of questions, but its not for this theard. I think we can close this one Regards

Hi! Thank you for your response, thanks to you i made my code a bit shorter. I saw someone on youtube who is recommending to use both (opacity and autoalpha) for sure, but if you telling me there is no sense - it's even better for me Thanks also for advise of using defaults values. So if i understand well i need to use fromVars but i dont need to use toVars if i put them to the defaults ? Could you explain me how gsap.set works ? Where is the different between that and defaults? As i said, my code looks better now but the solution didn't work for me, and it's hard to put the demo (it would take too much time). I figured it out on my own - the problem was in useEffect dependencies but it's hard to explain without the code Could you gave me some example of reseting animation ? What i mean by that: For example i have a hamburger menu and it's hide/show on hamburger button click. How to avoid gsap animation collapse if someone would still clicking the hamburger button ? Regards!

Hi there ! I have some problem with GSAP animations. To give you some my code understanding i gonna tell u what i want to achieve. So i have on my page 2 languages to chose and u chose it by pressing the button. When you click the button my page content is changing - my pageContent is an object, and it is a state which is changing depends on chosen language. And here is my problem: I'm using react hook useEffect to trigger animation, so my animation will start on pageContent change (so basically on language change) // Animation trigger useEffect(()=> { //Check if data exists, if data not exists page will not animate which will prevent from causing gsap errors if(pageContent === undefined || pageContent === null ) {return}; animatePage(); }, [ pageContent ]); Animation function look like that: // Animate Page Function function animatePage() { // Get elements to animate const contact = document.getElementsByClassName('contact'); const contactDetails = document.getElementById('contact-details'); const contactH = document.getElementById('contact-h'); const field1 = document.getElementById('field1'); const field2 = document.getElementById('field2'); const field3 = document.getElementById('field3'); const field4 = document.getElementById('field4'); const btnContact = document.getElementById('btn-contact'); const mapContainer = document.getElementById('map-container'); // Setup gsap.set([contact,contactDetails,contactH, field1, field2, field3, field4, btnContact, mapContainer], {autoAlpha: 0, opacity: 0}); // Animation pageTl .fromTo(contact, {opacity: 0, autoAlpha: 0}, {delay: .1, duration: .1, opacity: 1, autoAlpha: 1}) .fromTo(contactDetails, {y: '-=150'}, {duration: .2, opacity: 1, autoAlpha: 1,y: '+=150'}) .fromTo(contactH, {y: '-=150'}, {duration: 1, opacity: 1, autoAlpha: 1,y: '+=150'}) .fromTo(field1, {y: '+=300'}, {duration: .44, y: '-=300', autoAlpha: 1}, '-=0.15') .fromTo(field2, {y: '+=300'}, {duration: .44, y: '-=300', autoAlpha: 1}, '-=0.15') .fromTo(field3, {y: '+=300'}, {duration: .44, y: '-=300', autoAlpha: 1}, '-=0.15') .fromTo(field4, {y: '+=300'}, {duration: .44, y: '-=300', autoAlpha: 1}, '-=0.15') .fromTo(btnContact, {y: '+=300'}, {duration: .44, y: '-=300', autoAlpha: 1}, '-=0.15') .fromTo(mapContainer, {y: '+=1000'}, {duration: .8, y: '-=1000', autoAlpha: 1}, '-=0.8') }; The problem is - if i gonna press the language button before animation will end whole animation gonna broke and what i mean by that is; the elements which are animating will no appear where they should at the end. I was trying to use .restart() and .kill() but probably im doing something wrong because it's not working for me. I was trying to fix it by a long time so i would be pleased if someone could help me with that. How can i restart this animation ? Sorry if my english is not as good as it could be :P Regards, Kamil.