Changed parts of animation system

src/documents/index.html

@@ -4,6 +4,6 @@ title: "Home"
 icon: "home"
 order: 0
 ---
-<div>
+<div class="animated">
   Hello World!
 </div>

src/documents/script.js

@@ -5,15 +5,15 @@ $(document).ready(function(){
     prefetch: true,
     debug: true,
     onStart: {
-      duration: 250,
+      duration: 400,
       render: function (container, url) {
-        container.addClass('is-exiting');
+        container.addClass("is-exiting");
         smoothState.restartCSSAnimations();
       }
     },
     onReady: {
       duration: 0,
-      render: function (container, newContent) {
+      render: function (container, newContent){
         container.removeClass("is-exiting");
         container.attr("data-slug", $(newContent).filter("meta").data("slug"))
         container.html(newContent);

src/documents/styles.css.scss

@@ -81,16 +81,22 @@ body{
 }
 
 
-.m-scene .scene_element {
+.animations .animated{
-  animation-duration: 0.25s;
+  animation-duration: 0.4s;
   transition-timing-function: ease-in;
   animation-fill-mode: both;
 }
 
-.m-scene .scene_element--fadein {
+.animations.is-exiting .animated{
-  animation-name: slideInUp;
-}
-
-.m-scene.is-exiting .scene_element {
   animation-direction: alternate-reverse;
 }
+
+.animations[data-slug="index"]{
+  >div{
+    animation-name: slideInRight;
+  }
+}
+
+.animations #lightcontent{
+  animation-name: slideInUp;
+}

src/layouts/contentpage.html.ejs

@@ -2,7 +2,7 @@
 layout: core.html
 ---
 
-<div id="lightcontent" class="scene_element scene_element--fadein">
+<div id="lightcontent" class="animated">
   <div>
     <%- content %>
   </div>

src/layouts/core.html.ejs

@@ -20,7 +20,7 @@
           <% }) %>
         </div>
       </div>
-      <div id="content" class="m-scene" data-slug="<%- document.slug %>">
+      <div id="content" class="animations" data-slug="<%- document.slug %>">
         <meta data-menu="<%= document.url.split("/")[1] %>" data-slug="<%- document.slug %>" />
         <%- content %>
       </div>