Submit Search
Upload
the rabbit and the tortoise
•
15 likes
•
4,579 views
T
threepointone
Follow
how a fable inspired a css animation library
Read less
Read more
Technology
Lifestyle
Report
Share
Report
Share
1 of 50
Download now
Download to read offline
Recommended
1st npm
1st npm
Camilo Lopez
Designing Motion - FITC TO
Designing Motion - FITC TO
thisisportable
CSS3 Animations
CSS3 Animations
Ombu Labs, The Lean Software Boutique
CSS3 Animation and Artful Storytelling: Adding Value to Children’s Ebooks - e...
CSS3 Animation and Artful Storytelling: Adding Value to Children’s Ebooks - e...
BookNet Canada
Css3 animation
Css3 animation
Ted Hsu
CSS3 Transforms Transitions and Animations
CSS3 Transforms Transitions and Animations
Inayaili León
Fastest css3 animations
Fastest css3 animations
Ismail Berkay Beyaz
The Future State of Layout
The Future State of Layout
Stephen Hay
Recommended
1st npm
1st npm
Camilo Lopez
Designing Motion - FITC TO
Designing Motion - FITC TO
thisisportable
CSS3 Animations
CSS3 Animations
Ombu Labs, The Lean Software Boutique
CSS3 Animation and Artful Storytelling: Adding Value to Children’s Ebooks - e...
CSS3 Animation and Artful Storytelling: Adding Value to Children’s Ebooks - e...
BookNet Canada
Css3 animation
Css3 animation
Ted Hsu
CSS3 Transforms Transitions and Animations
CSS3 Transforms Transitions and Animations
Inayaili León
Fastest css3 animations
Fastest css3 animations
Ismail Berkay Beyaz
The Future State of Layout
The Future State of Layout
Stephen Hay
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
Rami Sayar
Serious Animation (an introduction to Web Animations)
Serious Animation (an introduction to Web Animations)
brianskold
Experience Themes: An Element of Story Applied to Design
Experience Themes: An Element of Story Applied to Design
Cindy Chastain
Fables and Morals presentation
Fables and Morals presentation
alazrom
Performance: Beyond Your Portfolio
Performance: Beyond Your Portfolio
FITC
How to Extend Axure's Animation Capability
How to Extend Axure's Animation Capability
Svetlin Denkov
Short Story Powerpoint
Short Story Powerpoint
autumnrain76
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
Stephanie Beckett
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
LoriGlavin3
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
BookNet Canada
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
Rick Flair
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptx
BkGupta21
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
gvaughan
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
ScyllaDB
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
LoriGlavin3
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
Curtis Poe
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Mark Simos
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
Lonnie McRorey
Training state-of-the-art general text embedding
Training state-of-the-art general text embedding
Zilliz
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
Pixlogix Infotech
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
LoriGlavin3
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
Hervé Boutemy
More Related Content
Viewers also liked
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
Rami Sayar
Serious Animation (an introduction to Web Animations)
Serious Animation (an introduction to Web Animations)
brianskold
Experience Themes: An Element of Story Applied to Design
Experience Themes: An Element of Story Applied to Design
Cindy Chastain
Fables and Morals presentation
Fables and Morals presentation
alazrom
Performance: Beyond Your Portfolio
Performance: Beyond Your Portfolio
FITC
How to Extend Axure's Animation Capability
How to Extend Axure's Animation Capability
Svetlin Denkov
Short Story Powerpoint
Short Story Powerpoint
autumnrain76
Viewers also liked
(7)
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
Creating Beautiful CSS3 Animations - FITC Amsterdam 2016
Serious Animation (an introduction to Web Animations)
Serious Animation (an introduction to Web Animations)
Experience Themes: An Element of Story Applied to Design
Experience Themes: An Element of Story Applied to Design
Fables and Morals presentation
Fables and Morals presentation
Performance: Beyond Your Portfolio
Performance: Beyond Your Portfolio
How to Extend Axure's Animation Capability
How to Extend Axure's Animation Capability
Short Story Powerpoint
Short Story Powerpoint
Recently uploaded
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
Stephanie Beckett
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
LoriGlavin3
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
BookNet Canada
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
Rick Flair
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptx
BkGupta21
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
gvaughan
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
ScyllaDB
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
LoriGlavin3
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
Curtis Poe
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Mark Simos
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
Lonnie McRorey
Training state-of-the-art general text embedding
Training state-of-the-art general text embedding
Zilliz
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
Pixlogix Infotech
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
LoriGlavin3
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
Hervé Boutemy
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
HarshalMandlekar2
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
Sergiu Bodiu
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
MounikaPolabathina
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
Fwdays
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
UiPathCommunity
Recently uploaded
(20)
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptx
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
Training state-of-the-art general text embedding
Training state-of-the-art general text embedding
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
the rabbit and the tortoise
1.
THE RABBIT AND
THE TORTOISE the story of how a fable inspired a css animation library
2.
MY NAME’S PI (my
mum calls me sunya)
3.
4.
5.
6.
7.
first, a demo
8.
PHYSICS and UX
9.
Let’s talk about
history
10.
ROBERT PENNER
11.
12.
13.
ƒ(Δ∆t, start, stop,
duration)
14.
15.
another demo
16.
and that’s how
we consider most animations - a series of pre-timed, predetermined sequential/parallel motions
17.
this was picked
up by jQuery, Prototype.js, MooTools, Dojo, et al
18.
and there was
much rejoicing and revelry to be had
19.
THE END
20.
THE END except...
21.
Let’s talk about
physics
22.
Let’s talk about
physics FAFFERY ALERT
23.
24.
Physics is important,
mmkay?
25.
FAMILIARITY AND AFFORDANCE
26.
FAMILIARITY AND AFFORDANCE skeumorphs,
anyone?
27.
A CONTINUOUS STREAM
OF INPUTS (eg: gravity)
28.
A CONTINUOUS STREAM
OF INPUTS (eg: gravity) including from the users themselves!
29.
ƒ(Δ∆t, start, stop,
duration)
30.
DAMMIT BOB
31.
sidenote: css transitions
32.
Let’s talk about
math
33.
“consider time to
be a stream”
34.
WORST. ANALOGY. EVER. “consider
time to be a stream”
35.
THE RABBIT AND
THE TORTOISE (finally)
36.
ZENO’S PARADOXES (look it
up. trippy as heck.)
37.
38.
Δ∆x = (target
- current)*fraction
39.
demo
40.
interesting, but is
it practical?
41.
Let’s talk about
UX
42.
pull out your
iPhones
43.
DAMMIT APPLE
44.
DAMMIT GOOGLE
45.
drum roll...
46.
BEAM https://github.com/threepointone/beam
47.
demos demos demos
48.
CAVEATS!
49.
and.... done! questions?
50.
DHANYAWADAGALU
Download now