What are the possible key reasons any/all animate-out's of a sequence may not work?

[shafqatevo]

[reposting as the last post may not have gotten posted]

Hi Ian,

None of the animate-out's are working in our case regardless of browsers - we're possibly making any mistake anywhere but failing to identify it.

In general, what are the key possible reasons animate-out may not work at all?

[IanLunn]

The most common problem is that one of the top-level frame elements hasn't been given a transition. As per the documentation: " Each frame can contain as many elements as necessary. However, Sequence expects all top level elements to transition and may not function correctly if that is not the case."

A frame is the <li> elements within the Sequence canvas and top-level elements are the first level of elements within the <li>. Be certain they all have a transition applied to them.

[IanLunn]

Your top level elements are <div class="title">, <div class="frame">, <div class="bing-label">, and <div class="ad-aware-label">, all of which need to have a transition applied to them.

If you've applied a transition to <div class="title-contents"> (which is a second-level element), then I'm guessing you haven't done so for <div class="title">.

[shafqatevo]

Thanks Ian, we have just double-checked now each of the top-level items and made sure we applied transitions (of at least properties like opacity:1) to each of the top-level elements.

Really stuck here!

[shafqatevo]

Just to re-state, while everything else is working fine, like frame transitions and animate-in's, animate-out isn't working for any of the elements in any of the frames.

We're surely doing a common mistake but can't identify what.

[shafqatevo]

And here's the options file:

$(document).ready(function(){
    var options = {
        preventDelayWhenReversingAnimations:false,
        nextButton: true,
        prevButton: true,
        pagination: true,
        animateStartingFrameIn: true,
        reverseAnimationsWhenNavigatingBackwards:false,
        showNextButtonOnInit:false,
        autoPlay: false,
        autoPlayDelay: 600, // 7s
        preloader: false,
        preloadTheseFrames: [1,2],
        preloadTheseImages: [
            "images/laptop.png",
            "images/slide1-bing.png",
            "images/slide1-title-1.png"

        ]
    };

    var mySequence = $("#sequence").sequence(options).data("sequence");

    mySequence.beforeNextFrameAnimatesIn = function() { 
        console.log("Next frame:"+mySequence.currentFrameID);

        if(mySequence.nextFrameID == 1){
            $(".sequence-prev, .sequence-next").hide();
        } else if (mySequence.nextFrameID == 4) {
            $(".sequence-prev").show();
            $(".sequence-next").hide();
        } else {
            $(".sequence-prev, .sequence-next").show();
        }

    }

    $("#startTour").on("click", function(){
        mySequence.startAutoPlay(100);
    });

});

[IanLunn]

Top-level elements MUST have a transition applied to them. You either need to change your CSS to have transitions apply to <div class="title">, <div class="frame">, <div class="bing-label">, and <div class="ad-aware-label">, or more realistically, change the structure of your HTML so that the elements you are animating become top-level.

[shafqatevo]

Thanks for taking look, Ian. All top level elements does have a transition applied to them.

Still it's not working.

Is there a possibility that top-level div's transition settings may override or adversely affect its child elements' transitions?

[shafqatevo]

opacity: 1 qualifies as a transition, right? Or does it need to be any movement?

[IanLunn]

Any CSS3 transitionable property applies, which includes opacity. I'll look through your HTML and CSS closer

[IanLunn]

There's a lot of HTML/CSS to go through so we might have to do some back and forth but this may be an issue:

.animate-in .frame {
  opacity: 1;
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -ms-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s; }

Although you've specified a transition-duration, you're kinda cheating with the 0s. Try setting it to 0.1s.

[shafqatevo]

Got it, Ian! Let's test.

[shafqatevo]

We changed it to 0.1s but still doesn't work!

[IanLunn]

Could you link to your demo please or provide a reduced case on a platform such as jsbin.com or jsfiddle.net?

[shafqatevo]

Here's the copy of the work in a Google Drive folder that you can access: https://drive.google.com/folderview?id=0Bzr5D4a5ajqJcXRMMFZIRjFmSHc&usp=sharing

[shafqatevo]

(Revised the link above)

[shafqatevo]

Hi Ian, is there any way to force the animate-out? Maybe in sequence.beforeCurrentFrameAnimatesOut callback?

[IanLunn]

The animate-out is actually working but there are a couple of issues making it appear as though it isn't.

To be certain all of your CSS is transitioning correctly, set autoPlay to true. If Sequence does a fully cycle on its own, then you know your CSS is working fine. In doing that, I picked up this CSS which needs to be changed:

.animate-in .labtop-frame {
  opacity: 1;
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -ms-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s; }

As before, although you've specified a transition-duration, you actually haven't because it's got a value of 0s. Change that to something else and Sequence will no longer get stuck when in autoPlay.

However, this doesn't address your original issue.

The reason you don't see the animate-out phase is because the next frame immediately appears on top of the previous one. By default, Sequence will move each active frame on top of the others by changing z-index. If you use the option moveActiveFrameToTop: false, you won't see anything happen until Sequence reaches the last frame. The last frame is on top of the others so you'll see it both animate-in and animate-out as expected.

I'd recommend removing the BG color and img from each <li> and instead apply them to the Sequence element. That way, your <li> elements will be transparent and should allow frames below the active one to show through.

Also remove transitionThreshold:false for the time being until you can get a better understanding of what is going on.

[shafqatevo]

Hi Ian, thanks so much - yes, removing the BG color and img from li is now showing the animate-out's.

However, many other artifacts are happening now like previous frame's elements remaining/appearing in later slides. We're trying to figure out why these are happening now that animate-out is working....

[shafqatevo]

We could clean up the artifacts but two animate-out transitions are still not happening (in the second slide). We'll troubleshoot it further and will let you know if we can't.

Thank you Ian for the extraordinary attention and help you extended. Really setting an example!

[shafqatevo]

Hi Ian,

We identified one more reason why some of our animate-out's were not working: if the very first animate-in of the next frame is an animated GIF element.

We placed an intermediate image as the first element to animate-in for the next frame and only then the animate-out's of the previous frame worked.

Thanks once again for your amazing support throughout our Sequence project journey!

[IanLunn]

No problem. So it's all working now?

[shafqatevo]

Well we're struggling with implementing the attached animation for a single frame. Animate.css or other CSS keyframe animations aren't working when user comes back to the frame another time.

Any idea how to implement the animations shown in this GIF for a single frame? Particularly, we need to fade out a set of elements (the logos) and then bring another set of logos in. We also need to animate the window-pane on the left side of this animation number of times slide out and in with respect to a viewport.

[IanLunn]

The problem you're faced with is that Sequence doesn't officially support the keyframe animations you'd need to make those logos fade in/out. When you use them, Sequence won't recognise them and may try to animate to the next frame quicker than it should. To work around this, you could add hidden element that transitions for the same amount of time the keyframes do.

[shafqatevo]

Thanks, Ian! We'll try this tomorrow and update here.

Thanks! Shafqat On Apr 29, 2014 11:20 PM, "Ian Lunn" notifications@github.com wrote:

The problem you're faced with is that Sequence doesn't officially support the keyframe animations you'd need to make those logos fade in/out. When you use them, Sequence won't recognise them and may try to animate to the next frame quicker than it should. To work around this, you could add hidden element that transitions for the same amount of time the keyframes do.

— Reply to this email directly or view it on GitHubhttps://github.com/IanLunn/Sequence/issues/241#issuecomment-41705193 .

[shafqatevo]

Just to update, yes, the work around you gave lastly for the animations did work in general. Thanks again!

[IanLunn]

:+1: