Sketches Library

This section was created to showcase work related case study samples, or self-taught projects exploring various scripting languages and techniques.

Animation Techniques

Languages: CSS based animation, together with HTML and SVG elements

View Library

JavaScript and JQuery

Languages: Javascript and jQuery animated elements and features

View Library

Processing P5.js and Canvas

In progress

GSAP Playground : The Basics

Review 5: the basics

Ease visualiser

The basics: the attr property

The basics: SVG interaction

Review 3: The Scroll Trigger

Ease visualiser

The basics: textFX


The quick brown fox jumps over the lazy dog.

Review 3: The Scroll Trigger

Ease visualiser

The basics: ScrollTigger

Next space

The basics: draggable

Review 2

Ease visualiser

The basics: tweens

The basics: timelines 2

Review

Ease visualiser

The basics: tweens

Hallo!
Hallo!
Hello!

The basics: timelines

Hallo!
Hallo!
Hallo!
Hallo!
Hallo!
Hallo!
Hallo!

Resources

An Element

SVG Animation

Progress bar

Rotate Element (SVG)

Easing FX

bounce in (fromTo)


bounce out (from)


bounce inOut


elastic out


back out


Timeline 1

Adobe Firefly
GSAP JS
Dreamweaver

Timeline 2

  • Figma
  • GSAP JS
  • Dreamweaver
  • Photoshop
  • Illustrator
  • Premier Pro
  • InDesign
  • After Effects
  • Vanilla Javascript
  • CSS-Bootstrap
  • CSS-Flexbox
  • HTML

Timeline 3 : label exercises

Hallo!
Hola!

Timeline 4

Timeline control

Hallo!

Timeline labels

start
sequence
label
fade label

Morpth shape