I thought about that as well, but not sure what it is. My setup is as follow:
The gsap and scroll-trigger cdns are above the script that runs the tweens and the tweens are set up like this:
gsap.config({
nullTargetWarn: false,
trialWarn: false,
});
gsap.registerPlugin(ScrollTrigger);
gsap.from(".icons_wcu", {
duration: .5,
stagger: true,
y: 50,
opacity: 0,
stagger: 0.2,
scrollTrigger: {
trigger: ".icons_wcu",
toggleActions: "restart none none reverse",
start: "top 95%",
end: "bottom 95%"
}
});
gsap.from(".iconboxesdotted", {
duration: .5,
stagger: true,
y: 50,
opacity: 0,
stagger: 0.2,
scrollTrigger: {
trigger: ".iconboxesdotted",
toggleActions: "restart none none reverse",
start: "top 95%",
end: "bottom 95%"
}
});
gsap.from(".quoteblob", {
duration: .5,
y: 50,
opacity: 0,
scrollTrigger: {
trigger: ".quoteblob",
toggleActions: "restart none none reverse",
start: "top 95%",
end: "bottom 95%"
}
});
gsap.to(".headbackblue", {
duration: 1,
stagger: true,
x: -350,
opacity: 1,
stagger: 0.33,
ease: "linear.none",
scrollTrigger: {
trigger: ".headbackblue",
toggleActions: "restart none none reverse",
start: "top 95%",
end: "bottom 95%"
}
});
gsap.from(".accordion-button-blue", {
duration: .5,
stagger: true,
y: 50,
opacity: 0,
stagger: 0.2,
ease: "linear.none",
scrollTrigger: {
trigger: ".accordion-button-blue",
toggleActions: "restart none none reverse",
start: "top 95%",
end: "bottom 95%"
}
});
gsap.from(".aso-pic-align", {
duration: .5,
stagger: true,
y: 50,
stagger: 0.2,
ease: "linear.none",
scrollTrigger: {
trigger: ".aso-pic-align",
toggleActions: "restart none none reverse",
start: "top 95%",
end: "bottom 95%"
}
});