Add data-attribute for delay start animation

[Romancho]

It will be very comfortable to set data-vp-add-class-delay & data-vp-remove-class-delay in html to create complex animation scenarios.

[gentle-media]

I use https://animejs.com/ and then in particular the timeline function (https://animejs.com/documentation/#timelineBasics) in the callbackFunction of viewportChecker() to create complexed delayed animations.

Example:

$('.product').viewportChecker({
    offset: 300,
    callbackFunction: function () {
        anime.timeline().add({
            targets: '.product.visible .character',
            opacity: [0, 1],
            translateY: ['32px', 0],
            delay: anime.stagger(40, {
                direction: 'reverse'
            }),
        }, 600).add({
            targets: '.product.visible .product-photo img',
            opacity: [
                { value: 0, duration: 300, delay: 75 },
                { value: 1, duration: 300, delay: 75 }
            ],
            translateX: [
                { value: '-100%', duration: 300 },
                { value: 0, duration: 300 }
            ],
            easing: 'easeInQuad',
        }, '-=1500').add({
            targets: '.product.visible .el',
            opacity: [0, 1],
            translateY: ['32px', 0],
            delay: anime.stagger(50),
            complete: function() {
                $('.product.visible').removeClass('visible');
            },
        }, '-=1000')
    },
});