How To Animate The Direction Of A Solid

Seamless blithe page transitions in Jekyll with Animate.css

A while back, I was working on a personal side projection for a simple "collection of links" website with a click through to a summary of the referenced content. When I got to the point where i was tweaking the mobile layout for the mail summary page I thought it would be a cool thought to become some bear on gestures in for navigating through next/previous posts.

Things escalated quickly 😀 — I started dreaming of having polish animated transitions and background color animations equally it went from current to next mail.

In that location were a couple of potential bug with those dreamy ideas:

I am just a front end dev enthusiast — coding isn't something I exercise oftentimes then the learning curve would be pretty steep
I've congenital this project using Jekyll — static pages could be a serious issue and i didn't want to build a carousel where all posts are loaded on to each summary folio making the site huge
Animating content + gestures with static folio posts and background color changes — I had no thought where to commencement.

Blueprint

I've had a basic design in a sketch file which i was quickly able to transform into a html. I had tap/click navigation included for next and previous mail already using {{next.page}} / {{previous.folio}}, now i needed to figure how to make those trigger some animations.

Before jumping into code i made a unproblematic storyboard that would assist me understand how those pages and elements would interact so I would know exactly what I need to build before getting into it.

Getting on with JS via Zepto

It was articulate to me I was going to need some javascript here, not simply to trigger animations but besides to add together bear on gestures later on. Libraries, libraries, libraries — at the same time I wanted to keep it light(first reason for going with Jekyll was fast performance) so i decided to try this out with Zepto.

In add-on to being lighter and faster then jQuery, Zepto offered a fully features gestures library that came to be perfect for what my end goal was. I've installed the latest version from GitHub and added information technology to the footer aslope with my custom scripts file link and Zepto Touch library.

          <script src="../js/zepto.min.js" type="text/javascript"></script>
<script src="../js/affect.js" type="text/javascript"></script>
<script src="../js/scripts.js" blazon="text/javascript"></script>

Adding basic animation

I knew petty nigh web/css animations at that point and Animate.css seemed like a good point to beginning. Integration is simple and easy as usual, dropping a css link into the head section of the html mark upwardly.

          <caput>
            <link rel="stylesheet" href="../css/animate.min.css">
</head>

I thought it would be a adept idea to get-go attempt doing this with a basic click / tap interactions earlier gettin into gestures. So i began by calculation a simple interaction to the next / previous links to include a fade out /slide out animations when leaving the origin page.

          $('#next-post').click(function () {                      $('#adjacent-postal service').parent().parent().addClass('slideOutLeft');
            $(".wrap").addClass('fadeOut');          });          $('#prev-post').click(role () {          $('#prev-post').parent().parent().addClass('slideOutRight');
            $(".wrap").addClass('fadeOut');          });

To follow my initial thought, I used .slideOutLeft for next mail service navigation and .slideOutRight for previous post navigation and then the current content leaves the screen in the direction which is intuitive to the move direction. I did a quick examination and encountered a first problem — animation was failing to complete before the browser would navigate to the destination page.

Adding a delay long enough to allow animation to fully complete came out to be pretty simple after a quick browse on stackoverflow.

          $('#prev-post').click(function (e) {                      var t    = this,          //shop the href for the clicked element                href = t.href;
                    //prevent the default behavior                      e.preventDefault();          //apply the fade out transition form to the container and wrap                      $(t).parent().parent().addClass('slideOutRight');
            $(".wrap").addClass('fadeOut');          //setTimeout to wait for fade out blitheness to complete before changing pages                      setTimeout(role (){ window.location = href;}, 350);              //the length of fourth dimension should vary depending on the length of the blitheness.
                    });

Later I tweaked animation speed to shorten the overall interaction length by modifying animation-duration: of the default animate.css settings. Then I too added a .fadeInUp to the principal container so every fourth dimension user lands on the new page new mail animates in with a fade in slide upwards transition.

Information technology worked 🙌 but real challenges began here.

I want to accept seamless smooth transitions between 2 post pages ; requires animations on destination folio to complete the transition
I want this to be a touch on gesture interactions and so users could simply swipe left and right to navigate betwixt next / previous postal service
I want the transition to be direction aware, which is problematic since there is no way of telling if user came from previous or side by side mail relatively and the fade slide animation direction of those would be in opposite.

Later another crawl on Stackoverflow I came beyond this interesting JS selector

          certificate.referrer;

This allowed me to capture the URL of the page where the user comes from and combined with Jekyll's {{ page.side by side.url }} / {{folio.previous.url}} selectors that I already used for generating the UI for Next / Previous post links it was getting closer to where I needed to exist.

I solved this with a unproblematic if /else logic to compare if the referrer matched the {{page.previous.url}} and added an appropriate animate.css class according to the direction from which the user came from.

                      var referrer =  document.referrer;                      if(referrer == '{{site.url}}{{folio.previous.url}}'){
            $('.postal service-container').addClass('slideInLeft');
            } else {
            $('.post-container').addClass('slideInRight');
            }

Bingo! Nosotros are on a winning streak.Everything worked like a amuse! I wanted to do is to add background color changes based on the mail category. Each one of my category labels had a dissimilar color.

I also used tints and shades of the core color to create a variety of colors used for coloring the outline of the next /previous post link boxes and the groundwork colour of the mail summary page.

In guild non to write a long list of CSS classes i grabbed Textile Colors SCSS library from GitHub and added it to the projection. Using a basic array and some loops i generated all color variations for: outlines, titles, icons and background colors required based on the base color by using very handy numeric values of material color names. I as well added some transition mixin's to have softer hovers and transitions on interactions.

          // Listing of categories
$categorys: (website: deep-orangish, ui: cyan, ux: amber, product: ruby, brand: blueish );          // Loop over list of categories
// @each ( $category : $color )          @each $category, $colour in $categorys {          .category{
            &.#{$category} {
            groundwork-colour: fabric-color('#{$colour}', '500');
            color: #ffffff;
            }
            }          .wrap{
            &.#{$category} {
            @include linear-gradient(material-colour('#{$colour}', '300'), cloth-color('#{$color}', '200') );          .image-container{
            @include linear-gradient(material-color('#{$color}', '300'), material-color('#{$color}', '700') );
            }
            }
            }          .list-item{
            &.#{$category}{
            @include transition(background 0.3s ease-in);          &:hover{
            @include linear-gradient(-135deg, fabric-color('#{$colour}', '50'), #ffffff, #ffffff);
            edge-correct: 3px solid material-color('#{$color}', '500');
            border-bottom-color: material-color('#{$color}', '500');
            @include transition(groundwork 0.4s ease-in);
            }          .paradigm{
            background-color: material-color('#{$color}', '500');
            }
            }
            }          .post-management{
            &.#{$category}{
            @include transition(background 0.4s ease-in);          &:hover{
            border-bottom: 3px solid material-color('#{$color}', '500');
            @include transition(edge 0.2s ease-in);          .mail service-direction-championship{
            edge-lesser-colour: material-color('#{$color}', '500');
            h6{
            colour: fabric-colour('#{$color}', '500');
            }
            .pointer{
            fill up: fabric-color('#{$color}', '500');
            }
            }
            }
            }
            }          }

Add to finalize everything — add in touch triggering events from Zepto combined with exit animations on on origin folio and enter blitheness for the destination using document.referrer and we are almost in that location.

          $(certificate).ready(function() {          //touch swipe gestures
            $(".mail-box").swipeLeft(function () {          $(".mail-box").addClass('slideOutLeft');
            $(".wrap").addClass('fadeOut');
            setTimeout(function (){
            window.location = '{{site.url}}{{folio.previous.url}}';
            }, 100);          });          $(".post-box").swipeRight(function () {          $(".post-box").addClass('slideOutRight');
            $(".wrap").addClass('fadeOut');
            setTimeout(function (){
            window.location = '{{site.url}}{{page.next.url}}';
            }, 100);          });          // folio order aware sliding
            var referrer =  certificate.referrer;
            if(referrer == '{{site.url}}{{page.previous.url}}'){
            $('.post-container').addClass('slideInLeft');
            } else {
            $('.mail-container').addClass('slideInRight');
            }          });

Conclusion

I built this example quite some fourth dimension ago and there are probably much cleaner and easier solutions to reach similar results today particularly if you are well versed in JS. But for me this worked as a great motivator to be able to take something that seemed near impossible and quite complicated at the offset and slowly get information technology right where it needed to exist, which in turn led me to do many more than experiments with familiar technologies investigating how far can those be pushed.

Cheers for reading!

If yous liked this article please evidence some ❤️ and 👏

Editor's notation: This is a second commodity I have written in a long time and it came out from a large stack of drafts i've been procrastinating on publishing for a while. Hopefully this is a offset of a continuous written work I've been planning to kicking off for a long time and I would actually appreciate some feedback.

Comment below, catch me on twitter or drop me a mail to anton@lebed.works

Source: https://medium.com/@ntnlbd/direction-aware-navigation-animations-in-jekyll-with-animate-css-zepto-fca9018470be

Posted by: keeleycopichatte59.blogspot.com