Prevent initial "jump" on first Scrolltrigger target

[marco_sohn]

Hello everyone,

I've had the same "problem" in several projects and I'm now starting to wonder if there's a nice solution for this.

I've implemented a animation using Scrolltrigger and the scrub option.
Since we are working with a CMS and the authors are able to place the animated elements as they wish.
If the animated elements are on the top of the page, the animation jumps to the progress without animating. 

I'm aware that this is the case because as soon as the gsap code gets initialized the first element has already reached the trigger. 
Is there somehow an option to make it catch up smoothly instead of jumping instantly to the scrollprogress?

I thought that setting scrub to a number might work.

Any inputs are appreciated.

See the Pen yLGwmaM by mschuler (@mschuler) on CodePen

[GreenSock]

Well you can certainly set scrub to a number to smooth things out in general, but if you're trying to avoid any initial shift when the page loads, that's an entirely different story because browsers always load the content first, often rendering it as it's parsed, and THEN when the DOM is fully loaded, it fires JavaScript which is when ScrollTrigger does its magic. That's the legendary "flash of unstyled content" thing: https://greensock.com/fouc

 

So to get around that, maybe you could start out with your elements being opacity: 0 or something, and then when the page loads, do a quick fade-in. That way, the user never sees the initial [incorrect] styling/sizing. 

 

Also, you might want to look into clamping your ScrollTriggers - it's a new feature in GSAP 3.12. Here's a video: 

 

I hope that helps!

[marco_sohn]

@GreenSock thank you for the helpful inputs. I really appreciate it!

Clamp seems to be the solution I was looking for. If I somehow still encounter any issues I'll gladly fall back to the post about «fouc».

For anyone wondering, i'll post the pen with clamp below:

See the Pen abPxWxO by mschuler (@mschuler) on CodePen

Kind regards