How to make Pinegrow Interactions only load after page-load Lottie animation has finished?

[ai_slop]

I have a full screen lottie logo animation that plays on page load. Users can swipe or click to skip it if they wish.

However, I’d like to use Pinegrow Interactions to add a hero text fade in, followed by some scroll animations further down the page. The problem is that they play prematurely in the background behind the logo animation.

Is there any way of delaying the Pinegrow animations to only play once the Lottie animation has finished? Open to any JS code solution also. Thanks in advance.

[ai_slop]

Just thinking out loud here (I’m new to JS so sorry if this is obvious to some)…

Would it be possible to :

1. use the pgia API to pause all scroll interactions on page load that are above the fold - i.e. all the animations visible on screen once the Lottie splash screen finishes
2. My lottie animation plays
3. Use some PG API function to play or refresh the scroll animations/scene by putting a call back fn. on the lottie JS complete event listener?

I’m not really clear on what the relevant PG API functions are for pausing and resuming scroll scenes.

To grossly oversimplify the last step, I mean something like this:

lottiePageLoadAnimation.addEventListener(“complete”, function () {
pgia.elementAnimationsManager.refreshAnimations(element, descendants);
});

[PeteSharp]

You can set a Trigger, and assign a custom event.

[ai_slop]

Thanks Pete. I’ll give that a go and see how I get on.