Add animation when displaying quotes

Author: sdelquin

apps/homepage/static/homepage/js/random-quotes/index.js

@@ -1,11 +1,9 @@
 function init() {
-  // Show the first quote
   getRandomQuote();
 
-  // Change quote every RANDOM_QUOTE
+  // Change quote every RANDOM_QUOTE_INTERVAL
   setInterval(function() { getRandomQuote(); }, random_quote_interval);
 
-  // Retrieve random quote using the api
   function getRandomQuote() {
     // Get the text and author span id
     let text = document.getElementById("quote-text");
@@ -17,9 +15,23 @@ function init() {
         text.textContent = data.result.text
         author.textContent = data.result.author
       })
+    // Animate display
+    let quote_block = document.getElementById("quote-block");
+    fadeInQuote(quote_block)
   }
 }
 
+function fadeInQuote(quote, duration=2000) {
+  quote.animate([
+    { // from
+      opacity: 0,
+    },
+    { // to
+      opacity: 1,
+    }
+  ], duration);
+}
+
 export default {
   init
 }

apps/homepage/templates/homepage/index.html

@@ -37,7 +37,7 @@
 
         <img class="logo" src="{{ assets|get_asset_key:'commons/img/logo_text.png' }}" alt="Python Canarias" />
 
-        <div class="quote is-centered">
+        <div id="quote-block" class="quote is-centered">
             <p>
               <i class="fas fa-quote-left"></i>
                 <span id="quote-text">