recentpopularlog in

piperh : animation   164

« earlier  
Opening Bar Reveal Text
neat reveal/grow effect using css animation (and a bit of js, though you don't have to use it)
webdesign  web  design  reveal  css  js  effect  animation 
yesterday by piperh
a few button transformations with quick code copy. Nothing unusual here but could be handy for speed. Some hover transitions and a few loading spinners
webdesign  web  design  button  hover  loading  snippets  css  gallery  animation  code  copy 
4 days ago by piperh
Avoid Placeholder Text by Animating Form Labels — Knowbility
an odd technique to combine form field label as though it was a placeholder. Although pretty I don't think it's a great solution 'cos you don't know if you're supposed to type on top of the placeholder until you hover or click there and find that it moves to reveal focussed field. Would be even weirder on touch screen
webdesign  web  design  form  field  placeholder  ui  ux  animation  label 
5 days ago by piperh
Tumult Hype
Create beautiful HTML5 web content. Interactive web content and animations made with Tumult Hype work on desktops, smartphones and iPads. No coding required.
Costs $50
webdesign  web  design  animation  html  interactive  animate  css 
14 days ago by piperh
Parallax scrolling - CSS Animation
a paralllax solution using a vanilla js script. Good breakdown of how it works. Also has a link to a pure css parallax effect
webdesign  web  design  parallax  scroll  animation  js  javascript  script  rallax  effect 
9 weeks ago by piperh
CSS Transform Functions Visualizer
handy tool for previewing and generating css transforms, especially for 3D stuff.
webdesign  web  design  css  generator  tool  transform  scale  3d  perspective  skew  animation 
10 weeks ago by piperh
Create an animated scroll cue - CSS Animation
animated scrollability indicator - eg arrow at bottom of page pointing downwards
webdesign  web  design  css  animated  animation  arrow  scroll  scrollability  scrollable  indicator 
10 weeks ago by piperh
Fading out siblings on hover in CSS | Trys Mudford
Fading out siblings on hover in CSS - impressive css for fading the siblings of an element when that element is hovered
webdesign  web  design  css  fade  sibling  parent  hover  effect  fading  opacity  animation 
may 2019 by piperh
Hamburger 3D CSS Switch animation
codepen example of an animated hamburger icon with a 3D turn effect
webdesign  web  design  css  code  hamburger  menu  icon  animation  animated 
may 2019 by piperh
collection of ready-made css animations
webdesign  web  design  css  animate  animation 
april 2019 by piperh
[no title]
scroll effects - OK on touchscreen but rather dull on desktop with mouse
webdesign  web  design  scroll  effects  js  javascript  script  animation  library 
april 2019 by piperh
Animate a Blob of Text with SVG and Text Clipping | CSS-Tricks
an animated mask/reveal effect on svg text using clip-path and mask
webdesign  web  design  svg  animation  clipPath  clip-path  animate  mask 
february 2019 by piperh
Gradians and Turns: the quiet heroes of CSS angles
more units for rotation and angles: gradians, turns, radians, degrees. Turns v useful and more logical for css animation
webdesign  web  design  css  animation  animate  turn  rotate  degree  radian  gradian  units  angle  circle 
february 2019 by piperh
Slide an Image to Reveal Text with CSS Animations | CSS-Tricks
code howto: Slide an Image to Reveal Text with CSS Animations
webdesign  web  design  css  animation  animate  slide  reveal 
february 2019 by piperh
The developer’s guide to native web animation - Heart Internet Blog - Focusing on all aspects of the web
9.2.19 Outline of methods for achieving native animation in a site - css, web animations api (waapi), javascript
webdesign  web  design  animation  animate  methods  techniques  native  tools  css  api  waapi  js  javascript  script 
february 2019 by piperh
Observe a story
nice logo for a west Texas observatory with animation
webdesign  web  design  inspiration  animation  logo  graphic  css  animate 
december 2018 by piperh
Improve Animated GIF Performance With HTML5 Video — Smashing Magazine
shows how to use html5 native video instead of animated gif. Also shows how to convert gifs to webm or mp4
webdesign  web  design  animated  gif  webm  mp4  video  html5  animation 
november 2018 by piperh
SVG Marching Ants | CSS-Tricks
marching ants effect on outlines using svg
webdesign  web  design  graphic  svg  css  code  coding  marching  ants  animation  animated 
october 2018 by piperh
✅ UX Animation Principles: Duration | @keyframers 1.22.1
possibly useful code for stepped fade-ins of divs, a la typical app behaviour, via css keyframes
webdesign  web  design  keyframe  animation  animate  fadein  fade  load  enter  css  duration  time 
october 2018 by piperh
The ultimate guide to proper use of animation in UX
some principles to keep in mind when animating elements in web design. Useful advice and ideas about animation speed.
webdesign  web  design  animation  timing  speed  principles  movement  advice  tips  ui  ux 
september 2018 by piperh
Guide | ScrollOut
scroll animation library. Allows you to assign css as an element comes into/out of view. Works in both directions of vertical scroll.
Nice on the first view but could get to be annoying
webdesign  web  design  js  javascript  script  scroll  animation  effect 
september 2018 by piperh
Principle - Animated Design
they say: Principle makes it easy to design animated and interactive user interfaces.
$129 app for Mac, for creating animated interactions and flows
webdesign  web  design  animate  animated  interaction  flow  ui  effect  app  mac  tool  animation 
september 2018 by piperh
Icon Transition Generator
online tool to generate code for a transition between two svg icons. Uses js
webdesign  web  design  icon  transition  svg  vector  animation  animate  morph  tool  online 
september 2018 by piperh
UI composition & animation in pure HTML | layerJS
interesting library for constructing pages and transitions, using frames and layers
webdesign  web  design  transition  js  javascript  script  frame  layer  effect  animation  animate  ui  ux  pattern  library 
july 2018 by piperh
7 essential free tools for web animation | Creative Bloq
a short list of js and css tools and libraries for animating
webdesign  web  design  css  animate  animation  js  javascript  script 
june 2018 by piperh
Wicked CSS3 Animations
collection of css animations with code to copy
webdesign  web  design  css  animation  animate  effect 
june 2018 by piperh
Tappy loader
humorous loader icon of tapping fingers
webdesign  web  design  css  codepen  loader  symbol  animation  animated 
june 2018 by piperh
installed into Chrome 5.6.18, works like it says, generates animation css code
webdesign  web  design  css  keyframes  animate  animation  app  extension  timeline  browser  tool  code  coding 
june 2018 by piperh
Particle Effects for Buttons | Codrops
a disintegrate-to-particles effect on buttons. Didn't check to see if it's css or js
webdesign  web  design  animation  effect  button  particle  disintegrate 
may 2018 by piperh
Origami Studio — Design Prototyping
an interaction design app from facebook, for Mac. Free
graphic  webdesign  web  design  origami  facebook  app  software  mac  ios  android  animate  animation  ui  ux  effect  tool 
may 2018 by piperh
GitHub - lmgonzalves/path-slider: Animating Elements Along SVG Paths with Javascript
Animating Elements Along SVG Paths with Javascript.
they say: Sliding elements along SVG paths
webdesign  web  design  animate  animation  svg  js  javascript  script  path 
may 2018 by piperh
they say: Fires a one-time event whenever elements of your choice are about to scroll into the viewport. Perfect for triggering animations or for just-in-time asset loading
webdesign  web  design  js  javascript  script  scroll  viewport  animation  jit  load  loading  just-in-time  lazy  window 
april 2018 by piperh
Creating Usability with Motion: The UX in Motion Manifesto
article about using animation in ui - when it's useful and when not. Not about coding.
webdesign  web  design  ui  ux  usability  animation  motion 
april 2018 by piperh
Micron.js - Webkul
micro animations for click interactions. Requires js lib. Possibly useful for quick gimmick but a bit naff and adds bloat
webdesign  web  design  js  javascript  script  css  animation  micro  library  ui 
april 2018 by piperh
Animating your hero header - CSS Animation
how to animate image and main title with css only. V useful stuff about keyframe and animation.
webdesign  web  design  css  animate  animation 
march 2018 by piperh
js library for animating layout effects on page scroll. You can control when they begin and end. They do happen again if you go back to top and scroll down anew. Could be good for an site if you were to do one, Peter!
webdesign  web  design  js  javascript  script  scroll  effect  animation  css 
march 2018 by piperh
Stylized Buttons
codepen of button css animations. Possibly useful how-to ref, using position absolute and :before :after
webdesign  web  design  css  hover  animation  animated 
march 2018 by piperh
Slice Revealer | Codrops
nice reveal effects on images, using slices that uncover image in animated way
webdesign  web  design  animate  animation  effect  reveal  slices  css  transition 
march 2018 by piperh
gifski — highest-quality GIF converter
converts video frames to gif. Author says: This is a GIF. It's hugely inefficient like any GIF, but now at least looks fine!
webdesign  web  design  video  motion  animation  animate  gif  performance  image  animated 
march 2018 by piperh
SVG Animation Creator - Animate and Export SVG | SVGator
title says: Animate SVG easily. Import, animate and export. online tool lets you import a graphic, choose animation and will export the code
webdesign  web  design  animate  animation  svg  illustration  graphic  effect  import  export  online  tool 
february 2018 by piperh
eases - graph - clickable
codepen demo of many different bezier easings. I couldn't see a way to copy the actual numbers, but there are small graphic representations of the curves.
webdesign  web  design  bezier  ease  curve  easing  animation  css  transition  examples 
january 2018 by piperh
Fancy Loading
curious drop shadow animation effect on lettering
webdesign  web  design  animation  css  effect  shadow 
january 2018 by piperh
animation | CSS-Tricks
another css animation syntax reference list
webdesign  web  design  css  animation  reference  syntax  keyframe 
january 2018 by piperh
CSS Animation Tricks: State Jumping, Negative Delays, Animating Origin, and More | CSS-Tricks
shows some fairly complicated transitions. Says transforms more performant than transitions
webdesign  web  design  css  animation  transition  transform 
january 2018 by piperh
CSS-only shimmering neon text
ingenious css-only neonish (sort of) animated effect on text
webdesign  web  design  css  neon  effect  colour  animate  animation 
january 2018 by piperh
Untitled Slider
nice slider change effect for images
webdesign  web  design  slider  carousel  effect  css  animate  animation  image 
january 2018 by piperh
Simple CSS text animation
simple effect of text sliding down, all css
webdesign  web  design  text  effect  animation  css 
january 2018 by piperh
CSS grid meets Bauhaus
interesting underline effect for links
webdesign  web  design  css  hover  link  effect  transition  animation 
january 2018 by piperh
library of css animations for buttons, modals, scrolls, nav, transitions, captions, tooltips, tabs. Useful, if the code is good. They claim to be performant, no janks
webdesign  web  design  css  transition  animation  effect  tab  button  slide  fade  modal 
november 2017 by piperh
js library for lots of different animation / motion effects, including svg line drawing effect. Many of the effects could probably be achieved without js, but there are some interesting things, especially the svg
webdesign  web  design  js  javascript  script  animation  animate  anime  effects  engine 
october 2017 by piperh
Introducing SpinKit | Tobias Ahlin
animated loading symbols. Quite classy and makes unusual change from default. CSS only
webdesign  web  design  animate  animated  animation  spinner  loader  symbol  css  css-only 
october 2017 by piperh
Animating Link Underlines | Tobias Ahlin
animated link underline - the underline appears and draws outwards from centre. V easy to apply, uses a transform.
webdesign  web  design  animated  animate  animation  link  underline  hover  transform 
october 2017 by piperh
GitHub - Martz90/vivify: Vivify is free CSS animation library.
Vivify is a free CSS animation library. Some handy animations for popups, slide-ins etc
webdesign  web  design  css  animate  animation  library 
september 2017 by piperh
How to create fancy revealing animations with these simple CSS tricks
article title: How to create fancy revealing animations with these simple CSS tricks.
Handy summary at the beginning of the main css properties
webdesign  web  design  animate  animation  css  reveal  revealing 
august 2017 by piperh
Tilt.js - A tiny parallax tilt effect for jQuery
jquery plugin to allow a hover tilt effect on an element. If you place another element above it produces a kind of parallax effect.
webdesign  web  design  effect  tilt  jquery  js  javascript  script  parallax  hover  angle  animation 
june 2017 by piperh
Shape Shifter
online svg morphing animation tool - generates the svg's, html and css code necessary for browser.
webdesign  web  design  svg  html  css  morph  morphing  animate  animation  generate  code 
may 2017 by piperh
Animated handwriting effect (part 1) by Craig Roblewsky on CodePen
tutorial, progressively drawing a handwriting-type line - actually it's a path I think. Uses Greensock plugins - check out greensock 'cos it has ton of effects, very smooth and slick
webdesign  web  design  animate  animated  animation  effect  handwriting  script  draw  javascript  js 
april 2017 by piperh
GSAP, the standard for JavaScript HTML5 animation | GreenSock
Greensock, a free and paid js library for animations. There's a nice lib for animating text - some great effects possible. Has a morphing plugin
webdesign  web  design  js  javascript  script  animate  animation  tween  effect  transform  css  greensock  splittext  text  morph 
april 2017 by piperh
Making Animations Wait | CSS-Tricks
about making browser wait until elements have loaded before starting an animation
webdesign  web  design  css  animation  animate 
april 2017 by piperh
Building performant expand & collapse animations  |  Web  |  Google Developers
google article about performant and non-performant techniques for expand and collapse (eg, on Menu panels)
webdesign  web  design  expand  contract  animate  animation  effect  css  performant  transform  collapse  performance 
march 2017 by piperh
Demo | MoveTo.js
they say: A lightweight scroll animation javascript library without any dependency
webdesign  web  design  scroll  js  javascript  script  vanilla  animation  animate 
march 2017 by piperh
« earlier      
per page:    204080120160

Copy this bookmark:

to read