Slider jump in sequence

[owarigit]

Hi,

I'm trying to use sequencejs for my horizontal parallax slider. I have a problem when the I manually jump from the 1st slide to the 3rd slide, the 2nd slide doesn't have the "animate-out" class, so the animation in 2nd will start from right side (initial position).

Is it possible for an option to make the slide jump in sequence, like when I jump to the 3rd, I have to play the 2nd slide first? So the animation will play in sequence like parallax scrolling.

example site : http://muncul.in/test/themes/sample/

Thanks :)

[IanLunn]

Hi, the behaviour you describe is expected and works in the basic slider for example.

When navigating back to step 2 from step 3, Sequence very briefly adds the animate-out class to step 2 to reset it, then swaps that class for animate-in so it comes in from the left.

Something in your CSS is breaking this process. In this CSS:

/* Slide 2 */
    .slide2.animate-in .slide {transition-delay: 0s !important; -webkit-transition-delay: 0s !important;
        transition-duration: 0.8s !important; -webkit-transition-duration: 0.8s !important;
    }

    .slide2.animate-out .slide { transition-delay: 0s !important; -webkit-transition-delay: 0s !important;
        transition-duration: 0.8s !important; -webkit-transition-duration: 0.8s !important;
    }

I removed all instances of !important and the behaviour works as expected again. I can't be specific as to why this is happening without digging into your CSS deeper. I'd recommend trying to avoid the use of !important and instead rely on the cascade and specificity.

[owarigit]

Hi,  Thanks for the reply.
I tried to use the basic slide (just adding the pagination) here http://muncul.in/test/themes/basic-slide/ . The animation works fine, just when I navigate to slide 3 directly from slide 1, the slide 2 will have no class (it has no problem if there is class animate-out).Also for the 2nd question, can I modify the slide so when I go to slide 3 directly from slide 1, the slide will also play slide 2 (also maybe adding animate-out) in advance. Like this one http://tympanus.net/Tutorials/ParallaxSlider/
I try to make a timeline slider, and some of the slider have connected background like my previous example.

Sorry for my english, hope it doesn't too confusing :)

Thanks

 On Tuesday, July 21, 2015 4:13 PM, Ian Lunn <notifications@github.com> wrote:

Hi, the behaviour you describe is expected and works in the basic slider for example.When navigating back to step 2 from step 3, Sequence very briefly adds the animate-out class to step 2 to reset it, then swaps that class for animate-in so it comes in from the left.Something in your CSS is breaking this process. In this CSS:/* Slide 2 */
.slide2.animate-in .slide {transition-delay: 0s !important; -webkit-transition-delay: 0s !important;
transition-duration: 0.8s !important; -webkit-transition-duration: 0.8s !important;
}

.slide2.animate-out .slide { transition-delay: 0s !important; -webkit-transition-delay: 0s !important;
    transition-duration: 0.8s !important; -webkit-transition-duration: 0.8s !important;
}

I removed all instances of !important and the behaviour works as expected again. I can't be specific as to why this is happening without digging into your CSS deeper. I'd recommend trying to avoid the use of !important and instead rely on the cascade and specificity.—
Reply to this email directly or view it on GitHub.

[IanLunn]

No, Sequence.js doesn't do that. I don't think this is something we would want to implement for the future either. Sorry!

[owarigit]

Ok thanks for your information :)

 On Friday, July 24, 2015 3:31 PM, Ian Lunn <notifications@github.com> wrote:

No, Sequence.js doesn't do that. I don't think this is something we would want to implement for the future either. Sorry!—
Reply to this email directly or view it on GitHub.