Jump to content
Search Community

ScrollTrigger start not working consistently

brianrivet test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

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

 

Link to comment
Share on other sites

  • Solution

Hi @brianrivet

 

It's too complicated to troubleshoot a live site. If you can put something into a minimal demo, we'd be happy to take a look.

 

You mentioned things work after a resize event so perhaps everything isn't loaded when you set up your initial ScrollTriggers? Resizing will fire ScrollTrigger.refresh(), but you could also manually fire it as a test. 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.refresh()

 

That's where I'd start looking, but we're happy to help if you can demonstrate the problem in a minimal demo.

 

Happy tweening and thanks for being a Club member.

:)

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...