@@ -36,5 +36,18 @@ class TemplateListener implements FrameworkAwareInterface

     {

       $template->class = trim($template->class . ' layout_' . $template->es_col_text);

     }

+    if ($template->es_animate)

+    {

+      $template->class = trim($template->class . ' is-animated ' . $template->es_animate_type);

+

+      if ($template->es_animate_children)

+      {

+          $template->class = trim($template->class . ' animate-children');

+      }

+      if ($template->es_animate_fade)

+      {

+          $template->class = trim($template->class . ' -fade');

+      }

+    }

   }

 }

@@ -17,11 +17,15 @@ foreach ($GLOBALS['TL_DCA']['tl_content']['palettes'] as $key => $palette)

     {

         \Contao\CoreBundle\DataContainer\PaletteManipulator::create()->addField('es_textAlign', 'cssID')->addField('es_spacing', 'es_textAlign')->addField('es_padding', 'es_spacing')->applyToPalette($key, 'tl_content');

         \Contao\CoreBundle\DataContainer\PaletteManipulator::create()->addField('es_col_text','text',\Contao\CoreBundle\DataContainer\PaletteManipulator::POSITION_BEFORE)->applyToPalette($key,'tl_content');

+        \Contao\CoreBundle\DataContainer\PaletteManipulator::create()->addField('es_animate_legend','protected_legend')->addField('es_animate','es_animate_legend',\Contao\CoreBundle\DataContainer\PaletteManipulator::POSITION_APPEND)->applyToPalette($key,'tl_content');

     }

 }

 \Contao\CoreBundle\DataContainer\PaletteManipulator::create()->addLegend('col_layout_legend','rs_columns_legend')->addField('es_rs_columns_valign','col_layout_legend',\Contao\CoreBundle\DataContainer\PaletteManipulator::POSITION_APPEND)->applyToPalette('rs_columns_start','tl_content');

 \Contao\CoreBundle\DataContainer\PaletteManipulator::create()->addLegend('col_layout_legend','protected_legend')->addField('es_rs_column_sort_large','col_layout_legend',\Contao\CoreBundle\DataContainer\PaletteManipulator::POSITION_APPEND)->addField('es_rs_column_sort_medium','es_rs_column_sort_large')->addField('es_rs_column_sort_small','es_rs_column_sort_medium')->addField('es_rs_columns_valign','es_rs_column_sort_small')->applyToPalette('rs_column_start','tl_content');

+$GLOBALS['TL_DCA']['tl_content']['palettes']['__selector__'][] = 'es_animate';

+$GLOBALS['TL_DCA']['tl_content']['subpalettes']['es_animate'] = 'es_animate_children,es_animate_type,es_animate_fade';

+

 /*

  * Add fields

  */

@@ -106,3 +110,41 @@ $GLOBALS['TL_DCA']['tl_content']['fields']['es_rs_column_sort_large'] = array

     'eval'                    => array('tl_class'=>'rs_columns_w33', 'rgxp'=>'natural','maxval'=>6),

     'sql'                     => "varchar(255) NOT NULL default ''"

 );

+

+$GLOBALS['TL_DCA']['tl_content']['fields']['es_animate'] = array

+(

+    'label'                   => &$GLOBALS['TL_LANG']['tl_content']['es_animate'],

+    'exclude'                 => true,

+    'inputType'               => 'checkbox',

+    'eval'                    => array('tl_class'=>'w50 m12', 'submitOnChange'=>true),

+    'sql'                     => "char(1) NOT NULL default ''"

+);

+

+$GLOBALS['TL_DCA']['tl_content']['fields']['es_animate_children'] = array

+(

+    'label'                   => &$GLOBALS['TL_LANG']['tl_content']['es_animate_children'],

+    'exclude'                 => true,

+    'inputType'               => 'checkbox',

+    'eval'                    => array('tl_class'=>'w50 m12'),

+    'sql'                     => "char(1) NOT NULL default ''"

+);

+

+$GLOBALS['TL_DCA']['tl_content']['fields']['es_animate_type'] = array

+(

+    'label'                   => &$GLOBALS['TL_LANG']['tl_content']['es_animate_type'],

+    'exclude'                 => true,

+    'inputType'               => 'select',

+    'options'                 => array('-move','-move -move-right','-move -move-top','-move -move-bottom'),

+    'reference'               => &$GLOBALS['TL_LANG']['tl_content']['REF']['es_animate_type'],

+    'eval'                    => array('tl_class'=>'clr w50','mandatory'=>true,'includeBlankOption'=>true),

+    'sql'                     => "varchar(32) NOT NULL default ''"

+);

+

+$GLOBALS['TL_DCA']['tl_content']['fields']['es_animate_fade'] = array

+(

+    'label'                   => &$GLOBALS['TL_LANG']['tl_content']['es_animate_fade'],

+    'exclude'                 => true,

+    'inputType'               => 'checkbox',

+    'eval'                    => array('tl_class'=>'w50 m12'),

+    'sql'                     => "char(1) NOT NULL default ''"

+);

new file mode 100644

@@ -0,0 +1,15 @@

+@mixin transform($transform...) {

+  -webkit-transform: $transform;

+  -moz-transform: $transform;

+  -ms-transform: $transform;

+  -o-transform: $transform;

+  transform: $transform;

+}

+

+@mixin transition($transition...) {

+  -webkit-transition: $transition;

+  -moz-transition: $transition;

+  -ms-transition: $transition;

+  -o-transition: $transition;

+  transition: $transition;

+}

new file mode 100644

@@ -0,0 +1,69 @@

+@import "helper";

+

+@mixin animation-start {

+  @include transition(opacity 0.6s linear, transform 0.6s ease-out);

+

+  .-fade& {

+    opacity: 1;

+  }

+  .-move& {

+    @include transform(translate(0, 0));

+  }

+}

+

+@mixin animation-presets {

+  .-fade& {

+    opacity: 0;

+  }

+  .-move& {

+    @include transform(translate(50px, 0));

+  }

+  .-move-right& {

+    @include transform(translate(-50px, 0));

+  }

+  .-move-top& {

+    @include transform(translate(0, 50px));

+  }

+  .-move-bottom& {

+    @include transform(translate(0, -50px));

+  }

+}

+

+.is-animated {

+  &:not(.rs-columns) {

+    > *:not(.rs-columns) {

+      .-in-view& {

+        @include animation-start;

+      }

+      :not(.-in-view)& {

+        @include animation-presets;

+      }

+    }

+  }

+

+  &:not(.rs-columns) {

+    > *.rs-columns {

+      > * {

+        &.-in-view > * {

+          @include animation-start;

+        }

+

+        &:not(.-in-view) > * {

+          @include animation-presets;

+        }

+      }

+    }

+  }

+

+  &.rs-columns {

+    > * {

+      &.-in-view > * {

+        @include animation-start;

+      }

+

+      &:not(.-in-view) > * {

+        @include animation-presets;

+      }

+    }

+  }

+}

new file mode 100644

@@ -0,0 +1,83 @@

+(function(){

+

+  function isElementInViewport(element) {

+    var rect = element.getBoundingClientRect();

+    if (

+      rect.top >= 0 &&

+      rect.left >= 0 &&

+      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) + (element.offsetHeight * 0.75) &&

+      rect.right <= (window.innerWidth || document.documentElement.clientWidth))

+    {

+      return 1;

+    } else if (

+      rect.left >= 0 &&

+      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&

+      rect.right <= (window.innerWidth || document.documentElement.clientWidth))

+    {

+      return 2;

+    }

+    return false;

+  }

+

+  //var elements = document.querySelectorAll(".is-animated:not(.rs-columns), .is-animated:not(.rs-columns) > .rs-columns > *, .is-animated.rs-columns > *");

+  function getAnimatedElements() {

+    var animatedWrapper = document.querySelectorAll(".is-animated"),

+      elements = [];

+

+    for (var i = 0; i < animatedWrapper.length; i++)

+    {

+      if (animatedWrapper[i].classList.contains("rs-columns") || animatedWrapper[i].classList.contains("animate-children"))

+      {

+        elements = animatedWrapper[i].children;

+      } else if (!animatedWrapper[i].classList.contains("rs-columns"))

+      {

+        for (var j = 0; j < animatedWrapper[i].children.length; j++)

+        {

+          if (animatedWrapper[i].children[j].classList.contains("rs-columns"))

+          {

+            for (var k = 0; k < animatedWrapper[i].children[j].children.length; k++)

+            {

+              elements.push(animatedWrapper[i].children[j].children[k]);

+            }

+          }

+        }

+        if (!elements.length)

+        {

+          elements = animatedWrapper;

+        }

+      }

+    }

+    return elements;

+  }

+

+  var elements = getAnimatedElements();

+  console.log(elements);

+

+  function callbackFunc() {

+    var delay = 0;

+    for (var i = 0; i < elements.length; i++)

+    {

+      if (elements[i].classList.contains('-in-view') === false && (hasDelay = isElementInViewport(elements[i])))

+      {

+        if (hasDelay === 1)

+        {

+          for (var j = 0; j < elements[i].children.length; j++)

+          {

+            elements[i].children[j].style.transitionDelay = delay + 'ms';

+          }

+          delay = delay + 125;

+        }

+        elements[i].classList.add("-in-view");

+      }

+

+      /* Else-Bedinung entfernen, um .visible nicht wieder zu löschen, wenn das Element den Viewport verlässt. */

+      /*else

+      {

+        elements[i].classList.remove("-in-view");

+      }*/

+    }

+  }

+

+  window.addEventListener("load", callbackFunc);

+  window.addEventListener("scroll", callbackFunc);

+})();