Hello, I have a JS related question. I have this scene: Dolores Jiménez y Muro (three.js + gsap) that is browsed by clicking the buttons below. The way I’m doing it is by using a “counter” variable and several if statements to display and hide specific texts at each location determined by my “counter” variable value. It works okay but if I click the buttons too fast before the animation ends, several texts are displayed overlapped onto each other on screen. I understand this is because “counter” changes its value very quickly (0,1,2,3,4…) and so it triggers all the animations at once, not giving a chance for the “hiding” animation to occur. Does anyone know how can I correct this behavior? Here’s my repo also: GitHub - tv4Interactivo/DoloresJimenezyMuro
Heres an example of how I’m handling the actions of a single button, the problem is with the animations using “gsap.to”:
btn_next.onclick = function(){
if(counter == 0){
//camara
moveCamera(-1.001,1.017,2.385)
rotateCamera(-0.445,0.035,0.017)
gsap.to(".title",{"opacity":"0"})
gsap.to(".camara",{"opacity":"1",duration:2,delay:2})
gsap.to(".b_prev",{"opacity":"1"})
counter = 1
}
else if(counter == 1){
//villa-silla
moveCamera(-0.083,1.146,0.541)
rotateCamera(-0.492,0.733,0.344)
gsap.to(".camara",{"opacity":0})
gsap.to(".villa",{"opacity":"1",duration:2,delay:2})
counter = 2
}
else if(counter == 2){
//dolores
moveCamera(-0.499,1.269,0.057)
rotateCamera(-0.311,0.870,0.241)
gsap.to(".villa",{"opacity":0})
gsap.to(".dolores",{"opacity":"1",duration:2,delay:2})
counter = 3
}
else if(counter == 3){
//maestra
moveCamera(0.141,1.972,0.050)
rotateCamera(-0.331,-0.583,-0.187)
gsap.to(".dolores",{"opacity":0})
gsap.to(".maestra",{"opacity":"1",duration:2,delay:2})
counter = 4
}
else if(counter == 4){
//con revolucionarios
moveCamera(-0.927,2.387,0.189)
rotateCamera(-0.248,0.252,0.063)
gsap.to(".maestra",{"opacity":0})
gsap.to(".revo",{"opacity":"1",duration:2,delay:2})
counter = 5
}
else if(counter == 5){
//vesper
moveCamera(-1.543,2.847,0.368)
rotateCamera(0.010,-0.003, 0.000)
gsap.to(".revo",{"opacity":0})
gsap.to(".vesper",{"opacity":"1",duration:2,delay:2})
counter = 6
}
else if(counter == 6){
//hijas de cuauhtemoc
moveCamera(-0.018,3.148,-0.387)
rotateCamera(-0.073,-0.017,-0.001)
gsap.to(".vesper",{"opacity":0})
gsap.to(".cuau",{"opacity":"1",duration:2,delay:2})
counter = 7
}
else if(counter == 7){
//plan de ayala
moveCamera(0.829,3.139,0.344)
rotateCamera(-0.067,-0.490, -0.031)
gsap.to(".cuau",{"opacity":0})
gsap.to(".ayala",{"opacity":"1",duration:2,delay:2})
counter = 8
}
else if(counter == 8){
//antorcha
moveCamera(1.890,2.708,-0.119)
rotateCamera(-0.297,0.893,0.234)
gsap.to(".ayala",{"opacity":0})
gsap.to(".antorcha",{"opacity":"1",duration:2,delay:2})
counter = 9
}
else if(counter == 9){
//retrato
moveCamera(0.678,1.238,1.009)
rotateCamera(-0.518,-0.783,-0.382)
gsap.to(".antorcha",{"opacity":0})
gsap.to(".retrato",{"opacity":"1",duration:2,delay:2})
gsap.to(".b_next",{"opacity":"0"})
counter = 10
}
}