在使用onepagescroll.js时对部分进行动画处理

Question

我正在使用blurfx：https://github.com/blurfx/onepagescroll的插件来实现一页滚动效果。就像宝石一样，可以创建水平滚动部分，请参见此处的“工作”演示：https://aidloc.githus.io/development.html

当我尝试从单页滚动容器（通过洋红色箭头触发）中进行动画处理时出现问题：

我使用一些简单的jquery在主要部分之间设置动画：

    $('html,body').animate({
        scrollTop: $(proj).offset().top
    },
    1750);

当从橙色部分移动到水平滚动部分时可以使用，但是在从水平滚动部分移动到其下方的部分进行动画设置时不能单独使用。我必须实现其他代码才能使此部分显示：

$(".pinfo").click(function () { //.pinfo is the magenta arrow
 //this is required to enable the one-page scrolling script (onepagescroll.js)
    onepagescroll('div.A', {
        pageContainer: 'section',
        animationType: 'ease-in-out',
        animationTime: 1000,
        infinite: false,
        pagination: false,
        keyboard: false,
        direction: 'vertical'
    });

    $(".A").removeClass("hide"); // removes a class used to hide the section we're animating twoards
    $(".pages").removeClass("ops-container"); // removes the class applied by onepagescroll.js

$('html,body').animate({
        scrollTop: $(proj).offset().bottom
    },
    1750);
});

如您在图像中看到的，我能够到达水平滚动部分下面的部分，但是它突然跳到那里。我了解我要询问的内容涉及很多变量（以及过多的依赖关系，无法建立Codepen），但是任何见解都值得赞赏！

Tl; dr onepagescroll.js劫持了我的标记，并让我跳了圈来制作基本的页面动画。