smoothstate alternate reverse not animating

Question

Im using the plugin but right now im stuck on reversing the animations which drives me crazy.

I'tried so much now that I really cant figure out whats going on.

The starting animation works perfect, the code I have so far

<div id="smooth" class='stage'>

  <nav class="chronology-nav">
    {% if prev is not null or prev is not empty %}
      <div class="date date-current stage-element stage-element-reveal-left">
        <h6><a href="{{ url('/')}}{{ prev.url }} ">{{ prev.title }}</a></h6>
        <strong>{{prev.year}}</strong>
      </div>
    {% endif %}

    {% if next is not null or next is not empty %}
      <div class="date date-next  stage-element stage-element-reveal-3d">
        <h6><a href="{{url('/')}}{{ next.url }}">{{next.title}}</a></h6>
        <strong>{{next.year}}</strong>
      </div>
    {% endif %}
  </nav>
  <div class="content scroll" >
    <article class='stage-element stage-element-reveal-bottom'>
      <h6 class="alt"><small>Tradycja i historia <span>{{ year }}</span></small></h6>
      <h2>{{ staticPage.title|raw }}</h2>
      <section>
        {{ staticPage.content|raw }}
      </section>
    </article>
  </div>
  {% if banner is not null or banner is not empty %}
    <aside class='stage-element stage-element-fade-in' style='background-image: url({{ banner|media }})' ></aside>
  {% endif %}
</div>

animations

.stage-element-reveal-left{
  animation-name: reveal-left;
}
.stage-element-reveal-3d{
  animation-name: reveal-fade-3d;
}

.stage-element-reveal-bottom{
  animation-name: reveal;
}

.stage-element-fade-in{
  animation-name: fade-in;
}

.stage{
 .stage-element{
    animation-duration: 2s;
    animation-timing-duration: ease-in;
    animation-fill-mode: both;
  }
  &.is-exiting .stage-element{
    animation:fade-in 2s 1;
    animation-direction: reverse;
  }
}

Coffeescript

$ ->
  'use strict'
  options =
    prefetch: true
    cacheLength: 6
    onStart:
      duration: 2000
      render: ($container) ->
        $container.addClass 'is-exiting'
        $('body').removeClass('done')
    onProgress:
      duration: 0
      render: ($container) ->
        $container.hide()
        return
    onReady:
      duration: 0
      render: ($container, $newContent) ->
        $container.show()
        smoothState.restartCSSAnimations()
        $('body').addClass('done')
        $container.html $newContent
        $container.removeClass 'is-exiting'
        return
    onAfter: ($container, $newContent) ->
      $('.scroll article').slimScroll(
        height: '70vh',
        color: '#ebebeb'
        )
  smoothState = $('#smooth').smoothState(options).data('smoothState')

Right now the fade out animation works (except the element where there was a fade in animation in the first place).

What I've tried is to change the onStart, onEnd etc. animation directions, adding removing smoothstate.restartCSSAnimations() functions and so on.

The animation is stopped and the flashes away before exiting (dev site http://gabinet-paluch.pl/dev/tradycja/poczatki ).

score 1 · Accepted Answer · answered Aug 07 '17 at 12:05

You don't necessarily need to use reverse. You can use the opposite of FadeIn - use FadeOut.

.m-scene.banner-isloaded .scene-main--fadeInUpBig {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}
.m-scene.is-exiting .scene-main {
    //  -webkit-animation-direction: alternate-reverse;
    //  animation-direction: alternate-reverse;
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown;
}

smoothstate alternate reverse not animating

1 Answers1