Hi,
I have a site I'm working on that uses ScrollTrigger for reveal animations. We are having trouble with a particular reveal animation not firing consistently.
Here's the code for the reveal:
slideUps.forEach(aniItem => {
gsap.to(aniItem, {
duration: duration * 1.5,
y: 0,
force3D: true,
opacity: 1,
// Note: Easing Pack required for easing
ease: "expo.out",
onComplete: postRevealFunction,
onCompleteParams: [aniItem],
scrollTrigger: {
trigger: aniItem,
start: "top bottom-=20px",
}
})
});
It is being applied to an element in the footer (The push the envelop text, icons and social links). It works as expected on most pages of the site but a few pages seem to have issues on some loads where the animation doesn't fire. You can see it behaving as it should here: http://staging.tiltbuilt.com/
But on these pages it doesn't fire consistently. http://staging.tiltbuilt.com/work http://staging.tiltbuilt.com/services/packaging
http://staging.tiltbuilt.com/services/branding
There are others, but these will give you the idea. The weird thing is, if you resize the browser window, the animation then fires. We've had the start setting set to "top 90%", and "top bottom" but we still see the same thing. I was hoping you might shed some light on what the issue might be. If you need anything in addition to whaty I've posted here, please let me know.
Thanks!
Brian
