Applied examples

See how PHARION moves.

A page to play with, compare, and understand the animations that turn a static interface into a visual experience.

View the demos See it in the workflow

A visual lab

Each card contains a real technique you can reuse.

Demos

3.15

GSAP

∞

Possibilities

Toolbox

Seven ways to bring an interface to life.

Press “Play” on each example

01gsap.to

Move an element

Define a destination and let GSAP interpolate movement, rotation, and scale.

x · y · rotate · scale

gsap.to(target, vars)

02gsap.from

Enter from a point

Ideal for reveals: the animation starts away from its final state and ends in its natural position.

Visible contentopacity: 1 · y: 0

from → 0

gsap.from(target, vars)

03gsap.fromTo

Control start and end

When you need total precision, explicitly declare both the starting and ending states.

New styleready to explore

opacity: 0 → 1scale: .48 → 1

gsap.fromTo(target, from, to)

04timeline

Orchestrate a sequence

A timeline chains layers and controls their timing to create an editorial entrance.

03 / 03

Final result

0.38s · 0.55s

timeline.fromTo(...).fromTo(...)

05stagger

Reveal a collection

Apply the same motion to many elements with a small delay between each one.

20 elementos

gsap.from(items, { stagger: 0.06 })

06ScrollTrigger

Respond to scroll

Page progress controls the animation: useful for storytelling, transitions, and parallax.

startend

Keep scrolling

scrollTrigger: { scrub: 1 }Scroll

07parallax

Add depth to an image

A slower movement inside a window creates depth without overwhelming the composition.

Reference image

yPercent: -14

gsap.to(image, { yPercent: -14 })Scroll

In product

These techniques already have a place in PHARION.

The workflow uses staggered entrances, parallax, and ScrollTrigger. This page lets you see what each piece does and tune it with intention.

Open workflow