Skip to content

Instantly share code, notes, and snippets.

@jameswquinn

jameswquinn/index.html

Created October 19, 2017 22:58
Show Gist options
  • Save jameswquinn/e96fa6b6383f18ba4065ee54d228c4d6 to your computer and use it in GitHub Desktop.
Save jameswquinn/e96fa6b6383f18ba4065ee54d228c4d6 to your computer and use it in GitHub Desktop.
Download ZIP
Velocity.js UI Pack - Transitions Demo
Raw
index.html
<h1 class="word">Velocity.js</h1>
Raw
script.js
$('.word')
.velocity('transition.fadeIn')
.velocity('transition.fadeOut')
.velocity('transition.flipXIn')
.velocity('transition.flipXOut')
.velocity('transition.flipYIn')
.velocity('transition.flipYOut')
.velocity('transition.flipBounceXIn')
.velocity('transition.flipBounceXOut')
.velocity('transition.flipBounceYIn')
.velocity('transition.flipBounceYOut')
.velocity('transition.swoopIn')
.velocity('transition.swoopOut')
.velocity('transition.whirlIn')
.velocity('transition.whirlOut')
.velocity('transition.shrinkIn')
.velocity('transition.shrinkOut')
.velocity('transition.expandIn')
.velocity('transition.expandOut')
.velocity('transition.bounceIn')
.velocity('transition.bounceOut')
.velocity('transition.bounceUpIn')
.velocity('transition.bounceUpOut')
.velocity('transition.bounceDownIn')
.velocity('transition.bounceDownOut')
.velocity('transition.bounceLeftIn')
.velocity('transition.bounceLeftOut')
.velocity('transition.bounceRightIn')
.velocity('transition.bounceRightOut')
.velocity('transition.slideUpIn')
.velocity('transition.slideUpOut')
.velocity('transition.slideDownIn')
.velocity('transition.slideDownOut')
.velocity('transition.slideLeftIn')
.velocity('transition.slideLeftOut')
.velocity('transition.slideRightIn')
.velocity('transition.slideRightOut')
.velocity('transition.slideUpBigIn')
.velocity('transition.slideUpBigOut')
.velocity('transition.slideDownBigIn')
.velocity('transition.slideDownBigOut')
.velocity('transition.slideLeftBigIn')
.velocity('transition.slideLeftBigOut')
.velocity('transition.slideRightBigIn')
.velocity('transition.slideRightBigOut')
.velocity('transition.perspectiveUpIn')
.velocity('transition.perspectiveUpOut')
.velocity('transition.perspectiveDownIn')
.velocity('transition.perspectiveDownOut')
.velocity('transition.perspectiveLeftIn')
.velocity('transition.perspectiveLeftOut')
.velocity('transition.perspectiveRightIn')
.velocity('transition.perspectiveRightOut');
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/0.7.0/jquery.velocity.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/0.7.0/velocity.ui.min.js"></script>
Raw
style.css
body {
background: #39486F;
overflow: hidden;
height:100%;
font-family: open sans;
}
.word {
text-align: center;
opacity:0;
font-size:72px;
color: #fff;
font-weight: 300;
}
Raw
styles
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet" />
Raw
velocity-js-ui-pack-transitions-demo.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment