Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Clean up slide animation

  • Loading branch information...
commit 25ebeb7bf48a6289f375fd461f4e049018d4dc32 1 parent 74a335b
@ai authored
View
10 Rakefile
@@ -108,7 +108,15 @@ class Helpers
def easings
@easings ||= begin
- YAML.load_file(ROOT.join('easings.yml')).map { |i| Easing.new(i) }
+ YAML.load_file(ROOT.join('easings.yml')).
+ map { |i| Easing.new(i) }.reject(&:linear?)
+ end
+ end
+
+ def linear_easing
+ @linear_easing ||= begin
+ YAML.load_file(ROOT.join('easings.yml')).
+ map { |i| Easing.new(i) }.find(&:linear?)
end
end
View
11 layout/action.js.coffee
@@ -5,6 +5,7 @@ after = (ms, fn) -> setTimeout(fn, ms)
jQuery ($) ->
easings = $('.easings li')
+ $body = $('body')
# Link emulation
@@ -49,28 +50,28 @@ jQuery ($) ->
showSubpage = ->
if location.hash == '#' or location.hash == ''
- slider.removeClass('easing')
+ $body.removeClass('easing-page')
else
name = location.hash[1..-1]
easingPages.hide()
easingPages.filter(".#{name}").show()
- slider.addClass('easing')
+ $body.addClass('easing-page')
showSubpage()
$(window).on('hashchange', showSubpage)
- after 1, -> slider.addClass('animated')
+ after 1, -> $body.addClass('page-animation')
# Detect 3D support
detect3d = ->
- support = $('body').css('perspective')?
+ support = $body.css('perspective')?
if support and document.body.style.webkitPerspective?
support = matchMedia("(transform-3d), (-webkit-transform-3d)").matches
support
support3d = detect3d()
- $('body').addClass(if support3d then 'transform3d' else 'transform2d')
+ $body.addClass(if support3d then 'transform3d' else 'transform2d')
# Open source corner animation
View
186 layout/index.html.slim
@@ -1,109 +1,109 @@
.about
= t.about
+ .easing.linear
+ h2= linear_easing.name
+ .graph
+ .example
+ .rect
+ .arrow
+ .dot
+ - x = 120
+ - y = 60
+ - dots = linear_easing.dots(100, x, y)
+ svg( xmlns="http://www.w3.org/2000/svg"
+ viewBox="-2 -40 #{x + 4} #{y + 80}" )
+ line x1="0" y1="0" x2="0" y2="#{y}"
+ text x="2" y="6"
+ | x
+ line x1="0" y1="#{y}" x2="#{x}" y2="#{y}"
+ text x="#{x - 5}" y="#{y - 3}"
+ | t
+ path d="M0,#{y} L#{to_path dots}"
-.slide-position
- .slide-slider
- ul.easings
- - easings.each do |easing|
- li class=easing_classes(easing)
- h2= easing.name
- - x = 120
- - y = 60
- - dots = easing.dots(100, x, y)
- - if easing.linear?
- .graph
- .example
- .rect
- .arrow
- .dot
- - x = 120
- - y = 60
- svg( xmlns="http://www.w3.org/2000/svg"
- viewBox="-2 -40 #{x + 4} #{y + 80}" )
- line x1="0" y1="0" x2="0" y2="#{y}"
- text x="2" y="6"
- | x
- line x1="0" y1="#{y}" x2="#{x}" y2="#{y}"
- text x="#{x - 5}" y="#{y - 3}"
- | t
- path d="M0,#{y} L#{to_path dots}"
- - else
- a.graph.link href="##{easing.name}"
- .example
- .rect
- .arrow
- .dot
- svg( xmlns="http://www.w3.org/2000/svg"
- viewBox="-2 -40 #{x + 4} #{y + 80}" )
- line x1="0" y1="0" x2="#{x}" y2="0"
- line x1="0" y1="#{y}" x2="#{x}" y2="#{y}"
- path d="M0,#{y} L#{to_path dots}"
- .howtos
+.page-slider
+ ul.easings
+ - easings.each do |easing|
+ li.easing class=easing_classes(easing)
+ h2= easing.name
+ - x = 120
+ - y = 60
+ - dots = easing.dots(100, x, y)
+ a.graph.link href="##{easing.name}"
+ .example
+ .rect
+ .arrow
+ .dot
+ svg( xmlns="http://www.w3.org/2000/svg"
+ viewBox="-2 -40 #{x + 4} #{y + 80}" )
+ line x1="0" y1="0" x2="#{x}" y2="0"
+ line x1="0" y1="#{y}" x2="#{x}" y2="#{y}"
+ path d="M0,#{y} L#{to_path dots}"
+ .howtos
+ section.js
+ h3 JavaScript
+ p= t.howtos.js.link('jQuery Easing Plugin', 'http://gsgd.co.uk/sandbox/jquery/easing/')
+ pre
+ code
+ | div.animate({ top: '-=100px' }, 600, '#{easing_example}', function () { … })
+
+ section.sass
+ h3 Sass
+ p= t.howtos.sass.link('Compass Ceaser', 'http://thesassway.com/projects/compass-ceaser')
+ pre
+ code
+ | div
+ @include transition(all 600ms ceaser('#{easing_example}'))
+
+ section.css
+ h3 CSS
+ p= t.howtos.css + ' ' + t.howtos.css_bad
+ .click
+ p= t.howtos.css_help
+ pre
+ code
+ | div {
+ -webkit-transition: all 600ms #{easing_example(t.howtos.desc)};
+ -moz-transition: all 600ms #{easing_example(t.howtos.desc)};
+ -ms-transition: all 600ms #{easing_example(t.howtos.desc)};
+ -o-transition: all 600ms #{easing_example(t.howtos.desc)};
+ transition: all 600ms #{easing_example(t.howtos.desc)}; }
+
+ - easings.each do |easing|
+ - next if easing.linear?
+ article.easing-description class=easing.name
+ a.back href="#"
+ | ←
+ span.text= t.easing.all_easings
+ h2= easing.name
section.js
h3 JavaScript
p= t.howtos.js.link('jQuery Easing Plugin', 'http://gsgd.co.uk/sandbox/jquery/easing/')
pre
code
- | div.animate({ top: '-=100px' }, 600, '#{easing_example}', function () { … })
+ | div.animate({ top: '-=100px' }, 600, '#{easing_example(easing.name)}', function () { … })
section.sass
h3 Sass
- p= t.howtos.sass.link('Compass Ceaser', 'http://thesassway.com/projects/compass-ceaser')
- pre
- code
- | div
- @include transition(all 600ms ceaser('#{easing_example}'))
+ - if easing.css
+ p= t.howtos.sass.link('Compass Ceaser', 'http://thesassway.com/projects/compass-ceaser')
+ pre
+ code
+ | div
+ @include transition(all 600ms ceaser('#{easing_example(easing.name)}'))
+ - else
+ p= t.easing.no_css
section.css
h3 CSS
- p= t.howtos.css + ' ' + t.howtos.css_bad
- .click
- p= t.howtos.css_help
- pre
- code
- | div {
- -webkit-transition: all 600ms #{easing_example(t.howtos.desc)};
- -moz-transition: all 600ms #{easing_example(t.howtos.desc)};
- -ms-transition: all 600ms #{easing_example(t.howtos.desc)};
- -o-transition: all 600ms #{easing_example(t.howtos.desc)};
- transition: all 600ms #{easing_example(t.howtos.desc)}; }
-
- - easings.each do |easing|
- - next if easing.linear?
- article.easing-description class=easing.name
- a.back href="#"
- | ←
- span.text= t.easing.all_easings
- h2= easing.name
- section.js
- h3 JavaScript
- p= t.howtos.js.link('jQuery Easing Plugin', 'http://gsgd.co.uk/sandbox/jquery/easing/')
+ - if easing.css
+ p= t.howtos.css
pre
code
- | div.animate({ top: '-=100px' }, 600, '#{easing_example(easing.name)}', function () { … })
-
- section.sass
- h3 Sass
- - if easing.css
- p= t.howtos.sass.link('Compass Ceaser', 'http://thesassway.com/projects/compass-ceaser')
- pre
- code
- | div
- @include transition(all 600ms ceaser('#{easing_example(easing.name)}'))
- - else
- p= t.easing.no_css
-
- section.css
- h3 CSS
- - if easing.css
- p= t.howtos.css
- pre
- code
- | div {
- -webkit-transition: all 600ms #{easing_example(easing.css)};
- -moz-transition: all 600ms #{easing_example(easing.css)};
- -ms-transition: all 600ms #{easing_example(easing.css)};
- -o-transition: all 600ms #{easing_example(easing.css)};
- transition: all 600ms #{easing_example(easing.css)}; }
- - else
- p= t.easing.no_css
+ | div {
+ -webkit-transition: all 600ms #{easing_example(easing.css)};
+ -moz-transition: all 600ms #{easing_example(easing.css)};
+ -ms-transition: all 600ms #{easing_example(easing.css)};
+ -o-transition: all 600ms #{easing_example(easing.css)};
+ transition: all 600ms #{easing_example(easing.css)}; }
+ - else
+ p= t.easing.no_css
View
83 layout/style.css.sass
@@ -48,6 +48,7 @@ $easing-width: 120px + 4px
.root
padding: 0 10px
+ overflow: hidden
.about
padding: 20px ($easing-width + 40px) 5px 0
@@ -58,18 +59,21 @@ $easing-width: 120px + 4px
.easings
margin: 0 -30px 0 -10px
position: relative
- li
- list-style: none
- display: inline-block
- margin: 3px 4px
- padding: 5px
- position: relative
- &.linear
- position: absolute
- top: -140px
- right: 35px
- &.in-out
- margin-right: 25px
+
+.easing
+ list-style: none
+ display: inline-block
+ margin: 3px 4px
+ padding: 5px
+ position: relative
+ &.linear
+ position: absolute
+ top: 0
+ right: 25px
+ &.in-out
+ margin-right: 25px
+ &.easeOutElastic h2
+ +box-shadow(white 0 26px 8px -8px inset)
h2
text-align: center
font-size: 15px
@@ -77,10 +81,11 @@ $easing-width: 120px + 4px
margin-bottom: -25px
position: relative
z-index: 2
- li.easeOutElastic h2
- +box-shadow(white 0 26px 8px -8px inset)
+ .graph
+ text-decoration: none
+ position: relative
-.easings
+.easing
svg
width: $easing-width
height: 60px + 80px
@@ -97,15 +102,10 @@ $easing-width: 120px + 4px
font-size: 12px
fill: #bbb
-.easings
- .link
- display: block
- .graph
- text-decoration: none
- position: relative
+.easing
.example
position: absolute
- top: 94px
+ top: 0
left: $easing-width - 2px
width: 21px
height: 12px
@@ -136,22 +136,9 @@ $easing-width: 120px + 4px
.example, .dot
opacity: 0
+transition(opacity 200ms)
- li.hover
- .example, .dot
- opacity: 1
-
-.easings
- li
- +transition(opacity 400ms)
- &.highlighted
- li
- opacity: 0.15
+ &.hover
.example, .dot
- display: none
- li.highlight
opacity: 1
- .example, .dot
- display: block
.howtos
margin-top: -10px
@@ -167,7 +154,7 @@ $easing-width: 120px + 4px
.easing-description
.back
float: right
- margin-top: 4px
+ margin-top: 19px
color: red
text-decoration: none
.text
@@ -179,6 +166,7 @@ $easing-width: 120px + 4px
h2
font-weight: normal
font-size: 25px
+ margin-top: 15px
h3
font-size: 22px
@@ -202,21 +190,24 @@ $easing-width: 120px + 4px
// Slider
-.slide-position
- position: relative
- overflow: hidden
-.slide-slider
- position: relative
- &.animated
- +transition(left 600ms cubic-bezier(0.770, 0.000, 0.175, 1.000))
- &.easing
- left: -105%
.easing-description
position: absolute
top: 0
left: 105%
width: 100%
display: none
+.page-slider
+ position: relative
+.page-animation
+ .page-slider
+ +transition(left 600ms cubic-bezier(0.770, 0.000, 0.175, 1.000))
+ .easing.linear
+ +transition(top 600ms cubic-bezier(0.770, 0.000, 0.175, 1.000))
+.easing-page
+ .page-slider
+ left: -105%
+ .easing.linear
+ top: -105px
// Open source badge
Please sign in to comment.
Something went wrong with that request. Please try again.