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
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
itnewsafrica
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
marketing932765
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Jeffrey Haguewood
A Framework for Development in the AI Age
A Framework for Development in the AI Age
Cprime
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
ThousandEyes
4. Cobus Valentine- Cybersecurity Threats and Solutions for the Public Sector
4. Cobus Valentine- Cybersecurity Threats and Solutions for the Public Sector
itnewsafrica
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdf
Aarwolf Industries LLC
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
Pixlogix Infotech
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
panagenda
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Nikki Chapple
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
Kari Kakkonen
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
Bernd Ruecker
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Mark Simos
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Nikki Chapple
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
panagenda
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
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
itnewsafrica
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
marketing932765
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Jeffrey Haguewood
A Framework for Development in the AI Age
A Framework for Development in the AI Age
Cprime
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
ThousandEyes
4. Cobus Valentine- Cybersecurity Threats and Solutions for the Public Sector
4. Cobus Valentine- Cybersecurity Threats and Solutions for the Public Sector
itnewsafrica
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdf
Aarwolf Industries LLC
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
Pixlogix Infotech
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
panagenda
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Nikki Chapple
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
Kari Kakkonen
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
Bernd Ruecker
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Mark Simos
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Nikki Chapple
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
panagenda
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
itnewsafrica
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Pim van der Noll
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Alkin Tezuysal
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
fnnc6jmgwh
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024
TopCSSGallery
Recently uploaded
(20)
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Zeshan Sattar- Assessing the skill requirements and industry expectations for...
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
A Framework for Development in the AI Age
A Framework for Development in the AI Age
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
4. Cobus Valentine- Cybersecurity Threats and Solutions for the Public Sector
4. Cobus Valentine- Cybersecurity Threats and Solutions for the Public Sector
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdf
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024
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