Argi

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.