Verndale Animation Framework

The Verndale Animation Framework is a versatile collection of web components designed to simplify the integration of specific animations into web projects. These components serve as wrappers around various animation libraries, making it easy for developers to incorporate engaging animations without delving into complex code.

Table of Contents

Introduction

Modern web applications demand visually appealing interactions to captivate users and deliver an immersive experience. However, integrating animations can be time-consuming and require a deep understanding of animation libraries. The Verndale Animation Framework aims to simplify this process by providing a set of user-friendly web components that wrap around popular animation libraries, offering developers a seamless way to enhance their projects with stunning animations.

Features

• Web Components: Utilizes the power of web components to encapsulate animations in a modular and reusable manner.
• Simplicity: Easily integrate complex animations without in-depth knowledge of animation libraries or javascript code.
• Customization: Customize animations by adjusting attributes such as duration, delay, and easing.
• Scroll Based Animations: Trigger animations based on scroll position.
• Toggle Animations: Trigger animations based on user interaction.
• Preset Animations: Choose from a variety of preset animations.
• CSS Classes: Add CSS classes to further customize/style animated elements.
• Cross Framework Compatibility: Compatible with any framework that supports web components.

Installation

The @verndale/animation-framework npm package is hosted as private artifact on Azure DevOps. To install the package, you will need to add the following to your .npmrc file:

Windows

Add a .npmrc to your project, in the same directory as your package.json and init it with the following code:

@verndale:registry=https://pkgs.dev.azure.com/verndale/V00066-Verndale/_packaging/VerndalecomFeed/npm/registry/

always-auth=true

Other OS

Please do not forget to include @verndale: at the beginning of the registry URL. This is the scope of the package, it helps Azure DevOps to pull only the packages that are scoped to Verndale from Azure and the rest of the packages from the public npm registry.

Setup credentials for the registry

Step 1: Add the code below to your .npmrc file

; begin auth token
//pkgs.dev.azure.com/verndale/V00066-Verndale/_packaging/VerndalecomFeed/npm/registry/:username=verndale
//pkgs.dev.azure.com/verndale/V00066-Verndale/_packaging/VerndalecomFeed/npm/registry/:_password=[BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
//pkgs.dev.azure.com/verndale/V00066-Verndale/_packaging/VerndalecomFeed/npm/registry/:email=npm requires email to be set but does not use the value
//pkgs.dev.azure.com/verndale/V00066-Verndale/_packaging/VerndalecomFeed/npm/:username=verndale
//pkgs.dev.azure.com/verndale/V00066-Verndale/_packaging/VerndalecomFeed/npm/:_password=[BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
//pkgs.dev.azure.com/verndale/V00066-Verndale/_packaging/VerndalecomFeed/npm/:email=npm requires email to be set but does not use the value
; end auth token

Step 2: Generate a Personal Access Token with Packaging read & write scopes.

Step 3 : Base64 encode the personal access token from Step 2.

One safe and secure method of Base64 encoding a string is to:

1. From a command/shell prompt run:

  node -e "require('readline') .createInterface({input:process.stdin,output:process.stdout,historySize:0}) .question('PAT> ',p => { b64=Buffer.from(p.trim()).toString('base64');console.log(b64);process.exit(); })"

3. Paste your personal access token value and press Enter/Return
4. Copy the Base64 encoded value

Step 4 : Replace both [BASE64_ENCODED_PERSONAL_ACCESS_TOKEN] values in your user .npmrc file with your personal access token from Step 3.

Step 5 : Run npm install @verndale/animation-framework to install the package.

Usage

1. Import the animation-framework package into your project (e.g. in your scripts/index.ts file):

import '@verndale/animation-framework';

1. Add the component to your HTML:

<fade-in duration="1000" delay="200" easing="ease-out">
  <!-- Your content here -->
</fade-in>

Scroll Based Animations

• Animated Element

• Animated Timeline

• Preset Animations:

  • Blur
  • Fade In
  • Fade Out
  • Rotate
  • Scale In
  • Scale Out
  • Slide In
  • Slide Out
  • Zoom In
  • Zoom Out

Test Story for Preset Animated Elements - use Storybook's addon panel to experiment with the different preset animated elements and their parameters.

Toggle Animations

• Trigger Element

• Trigger Group

License

The Verndale Animation Framework is open-source software licensed under the MIT License.

##WIP

Add React support