CSS animation of input and output element when scrolling on page

Question

I’m making a div appear with input animation when the scroll hits a point on the page, the problem is that I can’t make the output animation when the scroll returns.

The <div class="box"></div> has the following CSS:

.box {
    right: -384px;
    visibility: hidden;
    -webkit-transition: right 500ms cubic-bezier(0.265, 0.365, 0.26, 0.865);
    -moz-transition: right 500ms cubic-bezier(0.265, 0.365, 0.26, 0.865);
    -o-transition: right 500ms cubic-bezier(0.265, 0.365, 0.26, 0.865);
    transition: right 500ms cubic-bezier(0.265, 0.365, 0.26, 0.865);
}

And when the scroll reaches a certain point, I add the class display-block executing the animation:

.display-block {
    right: 0px;
    visibility: visible;   
}

This is the jQuery:

$(window).scroll(function (e) {
    var height = $(window).scrollTop();
    var available = $(document).height();
    var percentage_of_page = 0.5;
    var half_screen = available * percentage_of_page;
    if ( height > half_screen ) {
        $('.box').addClass('display-block');
    } else {
        $('.box').removeClass('display-block');
    }
});

I tried to create an extra class to hide the element with a animation by keyframes, but it didn’t work. I know it’s possible to use a library like Waypoints to do this easily, but how to do with pure CSS and jQuery?

I made a Jsfiddle very basic, because maybe Scroll isn’t even important. And also a Jsfiddle more complete where the effect can be seen.

Answer 1

In your case, apply the transition in div box, limit the entry and exit effect. To make the move would need to apply removeClass but would lose formatting. Another problem is that when collecting the div, you are using $('.box'). removeClass('display-block'), and take property Visible making hidden without being able to apply the effect.

One solution is to separate the element formatting and keep the input and output effect separate for each event. Full code online example available on jsfiddle.

---

Maintaining the element formatting box box

.box {
    position: fixed;
    width: 293px;
    bottom: 48px;
    right: -384px;
    background-color: #fafafa;
    padding: 16px 25px 0px 25px;
    z-index: 9999;
}

Creating effect of exit moving the div to the side.

.motionL{
    background:#669900;
    transition: right 500ms cubic-bezier(0.265, 0.365, 0.26, 0.865);
}

Creating effect of entree positionally right:0px

.motionR{
    background:#FF00FF;
    transition: right 500ms cubic-bezier(0.265, 0.365, 0.26, 0.865);
    right: 0px;
}

jQuery: Var status marks the condition of div( open or closed ), so applies the class to collect the element only if she is visible.

var status = 'close'

$(window).scroll(function (e) {
    write_status();

    if ( $(window).scrollTop() > half_screen )
    {
        $('.box').removeClass('motionL');
        $('.box').addClass('motionR');
        status = 'open';
    }
    else
    {
        if( status === 'open' )
        {
            $('.box').removeClass('motionR');
            $('.box').addClass('motionL');
            status = 'close';
        }
    }
});

Html

<div class="box">
    <span class="box-title text">MORE STORIES</span>
    <div>
        <a href="#"><img width="326" height="150" src="http://dummyimage.com/326x150/23a343/edfcf7&text=Detect+scroll" /></a>
        <h3><a href="#">Lorem ipsum</a></h3>
        <p>Neque porro [...]</p>
    </div>
</div>