This is an animation in which content is displayed from right to left after scrolling this site
I would like to hear
I have created a similar animation site, but the content on the top will be animated in the same way, but if I scroll the similar content below, I want to set it to the same animation, but the animation is executed at the same time The

How can I set up jQuery code to set an animation that won't run at the same time?

I want an animation that doesn't get the same speed when scrolling down.
What code is correct?

If i scroll to a certain position, you can slide the event from right to left, but you can execute the event
After that, if I scroll down, I want another content to be animated with the same speed.

Applicable source code

This is my code.

var thisOffset;
    $(window) .on ('load', function () {
        thisOffset = $('. message-wrap, .clerical-wrap, .person-wrap'). offset (). top + $('. message-wrap, .clerical-wrap, .person-wrap'). outerHeight ( );
    $(window) .scroll (function () {
        $('. message-wrap, .clerical-wrap, .person-wrap'). addClass ('open');
        var top = $(this) .offset (). top;
        if (scrollTop ()>800 + $(window) .height ()>thisOffset) {
            console.log ('once');
            used = true;

Online specific location Find the site that runs the event when you come to
I set it the same way but it didn't work.