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.