From 44f57ce954dc4be965c5f0baa366916b9514c0f5 Mon Sep 17 00:00:00 2001
From: JulianPrieber <60265788+JulianPrieber@users.noreply.github.com>
Date: Thu, 17 Feb 2022 22:09:58 +0100
Subject: [PATCH] Added button entrance animation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Live demo: https://julianprieber.github.io/littlelink-admin-demo/button-entrance.html

Added an entrance animation for buttons on littlelink.blade.php. This animation was made by the Animate.css project (https://github.com/animate-css/animate.css).

Each button entrance animation lasts 100ms. Every button after the first adds 100ms to the value of the previous button i.e. button 1 loads after 100ms, button 2 loads after 200ms,  button 3 after 300ms and so on...

Timings for the buttons can be changed in /littlelink/css/animate.css

I put every button in a separate <div> Tag, so the animation wouldn't in interfere with the existing hover animation.

Likewise, I removed all <br> Tags.
---
 resources/views/littlelink.blade.php | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/resources/views/littlelink.blade.php b/resources/views/littlelink.blade.php
index af598eb..1425f47 100644
--- a/resources/views/littlelink.blade.php
+++ b/resources/views/littlelink.blade.php
@@ -40,6 +40,7 @@
   <link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-light.css') }}">
   <link rel="stylesheet" href="{{ asset('littlelink/css/brands.css') }}">
   <link rel="stylesheet" href="{{ asset('littlelink/css/hover-min.css') }}">
+  <link rel="stylesheet" href="{{ asset('littlelink/css/animate.css') }}">
   <link rel="icon" type="image/png" href="{{ asset('littlelink/images/avatar.png') }}">
   <style>
 	.container { max-width: 1080px !important; }
@@ -77,19 +78,19 @@
         <p>{{ $info->littlelink_description }}</p>
         
         @endforeach
+		
+		
         <!-- Buttons -->
+<?php $initial=1; // <-- Effectively sets the initial loading time of the buttons. This value should be left at 1. ?>
         @foreach($links as $link)
          @php $linkName = str_replace('default ','',$link->name) @endphp
          @if($link->button_id === 0)
-         <a class="button button-title button hvr-grow hvr-icon-wobble-vertical" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank">
-         	{{ $link->title }}</a>
-          <br>
+         <div style="--delay: {{ $initial++ }}s" class="button-entrance"><a class="button button-title button hvr-grow hvr-icon-wobble-vertical" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank">
+         	{{ $link->title }}</a></div>
          @elseif($link->name === "custom")
-         <a class="button button-{{ $link->name }} button hvr-grow hvr-icon-wobble-vertical" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank"><img class="icon hvr-icon" src="{{ asset('\/littlelink/icons\/') . $linkName }}.svg">{{ $link->title }}</a>
-          <br>
+         <div style="--delay: {{ $initial++ }}s" class="button-entrance"><a class="button button-{{ $link->name }} button hvr-grow hvr-icon-wobble-vertical" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank"><img class="icon hvr-icon" src="{{ asset('\/littlelink/icons\/') . $linkName }}.svg">{{ $link->title }}</a></div>
          @else
-         <a class="button button-{{ $link->name }} button hvr-grow hvr-icon-wobble-vertical" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank"><img class="icon hvr-icon" src="{{ asset('\/littlelink/icons\/') . $linkName }}.svg">{{ ucfirst($linkName) }}</a>
-          <br>
+         <div style="--delay: {{ $initial++ }}s" class="button-entrance"><a class="button button-{{ $link->name }} button hvr-grow hvr-icon-wobble-vertical" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank"><img class="icon hvr-icon" src="{{ asset('\/littlelink/icons\/') . $linkName }}.svg">{{ ucfirst($linkName) }}</a></div>
          @endif
         @endforeach