I think I've covered all the cases when mouse wheel (vertical) scrolling using a regular mouse works and when it doesn't.
Does not work:
Remove all tweens:
gsap.utils.toArray(".slideText").forEach(text => {
gsap.timeline({
defaults: {ease: "none"},
scrollTrigger: {
scroller: text.closest(".horizSlider"),
horizontal: true,
trigger: text.closest(".slide"),
start: "left right",
end: "left left",
scrub: true
}
});
});
Remove horizontal: true
gsap.utils.toArray(".slideText").forEach(text => {
gsap.timeline({
defaults: {ease: "none"},
scrollTrigger: {
scroller: text.closest(".horizSlider"),
trigger: text.closest(".slide"),
start: "left right",
end: "left left",
scrub: true
}
})
.fromTo(text, {x: 250}, {x: -250}, 0)
.from(text.nextElementSibling, {scale: 0.8}, 0)
});
Only ScrollTrigger.create()
gsap.utils.toArray(".slideText").forEach(text => {
ScrollTrigger.create({
scroller: text.closest(".horizSlider"),
horizontal: true,
trigger: text.closest(".slide"),
start: "left right",
end: "left left",
scrub: true
});
});
Works:
Remove ScrollTrigger
gsap.utils.toArray(".slideText").forEach(text => {
gsap.timeline({
defaults: {ease: "none"}
})
.fromTo(text, {x: 250}, {x: -250}, 0)
.from(text.nextElementSibling, {scale: 0.8}, 0)
});
I the last case when it works (and I can scroll down using mouse wheel) the animations are run as soon as the page is loaded.