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

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