Hi everyone, I've been trying to solve this problem for many hours, but I can't find a solution. I hope some of you can help me.
Depending on the situation, I dynamically create a timeline to run when needed. Below I leave you an example code:
let itemScrollTimeLine = gsap.timeline({ paused: true, onComplete: resetTimeline });
function resetTimeline() {
console.log('Completed');
itemScrollTimeLine.clear();
}
if (itemList.indexOf(elem.id) >= 0) {
let elemPos = (window.innerHeight - document.getElementById(elem.id).offsetHeight) / 2;
itemScrollTimeLine.add(gsap.to(window, { duration: 1.2, ease: "power1.inOut", scrollTo: { y: elem, offsetY: elemPos } }));
}
else {
itemScrollTimeLine.add(gsap.to(window, { duration: 1.2, ease: "power1.inOut", scrollTo: { y: elem, offsetY: 100 } }));
}
itemScrollTimeLine.add(gsap.to(elem, { ease: "power3.inOut", duration: 0.8, '--line-color-top': '#a18248' }), '>');
// And so on....
When i click a button I start the timeline with the command itemScrollTimeLine.play(); .
Depending on the button clicked (in the code it is saved in the "elem" variable) a scroll is carried out on a specific position on the page.
If the buttons are clicked sequentially fast, however, there is a bad effect, and I'm trying to find a solution.
I thought a solution would be to check if the animation is currently active, and if the scroll is running, stop it, and immediately complete the rest of the animations a jump effect upon immediate completion of the animation).
This is the code I tried to write that I inserted as a control before creating a new timeline of the pressed key:
if (itemScrollTimeLine.isActive()) {
if (itemScrollTimeLine.progress() < 0.6) {
itemScrollTimeLine.seek(1.2);
let children = itemScrollTimeLine.getChildren(false, true, true);
itemScrollTimeLine.remove(children[0]);
}
itemScrollTimeLine.progress(1);
}
I entered 0.6 as the progress value because the timeline has a total duration of 2 seconds and the scroll has a duration of 1.2 seconds.
Unfortunately running this code I always have a jump effect to the immediate completion of the running timeline.
Can you tell me a method to solve this annoying problem?
Many thanks in advance!?
