Parallax effect at the midpoint of an artboard

I am trying to create an animation for the midpoint of a website homepage. I've created a simple animation which you can see here: https://xd.adobe.com/view/914a3466-f75f-45f3-9d59-e818b66f476a-c419/screen/9af47e5b-8078-4a48-9910-0dbf385d06da which is triggered by a click.

I want to have three of these animation that appear on a page as you scroll down the homepage. Above these animation are full bleed panels with text etc. I can't think of a way to create the same animation on click at the midpoint of an artboard. Am i creating webpages incorrectly, as long long artboard. Or should i make the homepage from multiple artboards that are actioned on click rather than scroll?

The only way i can see to demonstrate what i want is to have a full page design in it final states, then have a seperate file for the animation. The issue with this is that it doesn't resemble the actual user experience.

Thanks.