Autoplay is not working

[jnvgi]

Hello,

I checked pretty much everywhere and couldn't get my sequence to autoplay. I setted well the autoPlay and autoPlayInterval. Did i missed something ?

Here is my HTML

<div id="sequence" class="seq">
    <div class="seq-screen">
        <ul class="seq-canvas">
            <li class="seq-in">
                <div class="seq-image">
                    <img data-seq src="myimg.jpg" alt="" />
                </div>

                <div class="seq-title">
                    <h1 data-seq>Ttitle</h1>
                    <div data-seq>Text</div>
                </div>
            </li>
            <li class="seq-in">
                <div class="seq-image">
                    <img data-seq src="myimg.jpg" alt="" />
                </div>

                <div class="seq-title">
                    <h1 data-seq>Ttitle</h1>
                    <div data-seq>Text</div>
                </div>
            </li>
        </ul>
    </div>
</div>

And my Javascript

<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/hammer.min.js"></script>
<script src="js/sequence.min.js"></script>
<script src="js/sequence-theme.modern-slide-in.js"></script>
<script>
    /* <![CDATA[ */

    /* SEQUENCE
    ---------------------------*/
    // Get the Sequence element
    var sequenceElement = document.getElementById("sequence");

    // Place your Sequence options here to override defaults
    var options = {
        autoPlay: true,
        autoPlayInterval: 4000,
        animateCanvas: false,
        phaseThreshold: false,
        preloader: true,
        reverseWhenNavigatingBackwards: true
    }

    // Launch Sequence on the element, and with the options we specified above
    var mySequence = sequence(sequenceElement, options);

    /* ]]> */
</script>

[IanLunn]

This is usually caused by misunderstanding the use of the data-seq attribute. Please see the documentation here: https://www.sequencejs.com/documentation/#watch-elements

Sequence.js will watch the elements with data-seq and wait for them to finish transitioning/animating. If you haven't added a transition or animation, Sequence.js will get stuck and autoPlay will not work as expected.

Closing this ticket as it is a support request rather than an issue with the code but if you find otherwise or need more help, please let me know.

[jnvgi]

Hello, thanks for your answer. Well, I added the transitions and animatiosn in my CSS too. Here is the part of my SCSS where i set it up :

.seq-image {
    img {
        max-height  : $imageHeight;
        display     : block;
        height      : 90%;
        width       : auto;
        margin      : 0 auto 10% auto;
        opacity     : 0;
        @include prefixed(transform, "translate3d(60px, 0, 0)");
        @include prefixed(transition-duration, ".3s");
        @include prefixed(transition-properties, "transform, opacity");
        @include prefixed(transition-timing-function, "ease-out !important");
    }
}

.seq-title {
    h1,
    div {
        display         : block;
        width           : 98%;
        vertical-align  : middle;
        text-align      : center;
        margin          : 0;
        opacity         : 0;
        font-size       : 16px;
        @include prefixed(transition-duration, ".3s");
        @include prefixed(transition-properties, "opacity");
    }

    h1 {
        padding     : .2em 1%;
        color       : $main;
        font-size   : 24px;
        float       : left;
        font-weight : 300;
    }

    div {
        text-transform  : uppercase;
        clear           : left;
        color           : #000;
    }
}

.seq-in {       
    .seq-image img {
        @include prefixed(transform, "translate3d(0, 0, 0)");
        opacity: 1;
    }
    .seq-title {
        h1,
        div {
            @include prefixed(transform, "translate3d(0, 0, 0)");
            opacity: 1;
        }
    }
}

.seq-out {
    .seq-image img {
        @include prefixed(transform, "translate3d(-60px, 0, 0)");
        opacity: 0;
    }
    .seq-title {
        h1,
        div {
            @include prefixed(transform, "translate3d(0, 0, 0)");
            opacity: 0;
        }
    }
}

[IanLunn]

Can you send a link to a working version please? Your CSS looks good. Only thing I can see at the moment is that you have seq-in on both steps. Remove one and see if that fixes it. Otherwise, please send a link to a working version

[jnvgi]

I "cleaned" the CSS a bit, can't make it work though. Here is the link : www.agencecorail.com

[IanLunn]

Remove this:

<script src="js/sequence-theme.modern-slide-in.js"></script>

It's doing the same as this so not needed:

/* <![CDATA[ */

    /* SEQUENCE
    ---------------------------*/
    // Get the Sequence element
    var sequenceElement = document.getElementById("sequence");

    // Place your Sequence options here to override defaults
    var options = {
        autoPlay: true,
        autoPlayInterval: 4000,
        animateCanvas: false,
        phaseThreshold: false,
        preloader: true,
        reverseWhenNavigatingBackwards: true
    }

    // Launch Sequence on the element, and with the options we specified above
    var mySequence = sequence(sequenceElement, options);

    /* ]]> */

[jnvgi]

Here we go ! Works perfectly. So there was a conflict to the that included script.

Thanks for your help !