Hi, I've only recently found GS but I'm having a lot of fun seeing what I can do with it.
I'm having an issue on my website, seemingly specific to mobile devices where my code isn't running at the start and end of where I thought it should be.
$('.animate-on-scroll').each(function(index, element) {
let animateClass = ScrollTrigger.create({
trigger: element,
start: "top bottom-=1",
end: "bottom top+=1",
once: false,
onEnter: () => {
$(element).addClass('animation-trigger');
},
onLeaveBack: () => {
$(element).removeClass('animation-trigger');
}
});
});
What I am trying to do is to apply the class 'animation-trigger' to each item that already has a class of 'animate-on-scroll' when it enters the screen (going downwards) and only removes it after going past it upwards, effectively meaning that the animation will be reset and re-triggered if you go back up past it.
This seems to work as I expect it to on desktop displays, however, I am having mixed effects on mobile devices/screen sizes, it seems as though certain elements are able to get most of the way into the page before the class gets added, am I misunderstanding how the 'start' and 'end' properties work?
In the picture below you can see that one of my items is half way into the page and it still doesn't have the class yet
Any help would be great
Thanks
