Tag Archives : JavaScript July 2015

• Atomic Guide

  Posted : July 30, 2015 | Filed Under : Open Source

  Pattern guides are created in order to gain a perspective of the project’s parts and inner workings. This process helps developers arrive at an educated decision based on the project’s context. By working in this fashion authors can identify possible coding issues and collectively organize these shared principles across an interface. Read More →

• Transformicons

  Posted : February 9, 2015 | Filed Under : Open Source

  As of lately, my interests in terms of Web development have gone from a devotion to responsive design techniques to the appreciation of finely, well-made animations and interactions. Today I’d like to share a project called “Transformicons” that’s inspired by the work of Bennett Feely and Sara Soueidan. Read More →

• How to ScrollMagic

  Posted : January 2, 2015 | Filed Under : Open Source

  ScrollMagic is a complete rewrite of its predecessor Superscrollorama by John Polacek.
  Like Superscrollorama it relies on the Greensock Animation Platform (GSAP) to build animations, but was developed with specific regard to former shortcomings. Read More →

• TimelineMax Stagger Animation

  Posted : December 31, 2014 | Filed Under : JavaScript

  If you love animation and interactivity then I’m sure you’ve probably seen or heard of the GreenSock Animation Platform library commonly referred to as gsap. For those unfamiliar, the GreenSock Animation Platform is a suite of tools for scripted animation. We’ll look specifically at TimelineMax and a method called staggerTo(). Read More →

• Detecting Scroll Position

  Posted : October 14, 2014 | Filed Under : JavaScript

  JavaScript is that magical creature that can add tremendous flavor to your interactions especially when its events like scrolling. The following is a review of properties available to authors that help detect scroll and position. Read More →

• Lazy Flexslider for WordPress

  Posted : September 17, 2014 | Filed Under : WordPress

  Carousels/sliders are one of the most widely used widgets in development for the Web today (although the debate over using them still varies in opinion). In my experience w/sliders there’s literally no need to load every single image for a slider on init window load. Today I share my implementation for a client project brought to me by Staple Web Design using WordPress and Flexslider (which does not support lazy loading out of the box). Read More →

• Orbit Button Glow

  Posted : July 2, 2014 | Filed Under : CSS

  Maybe you’ve seen this type of interaction already if you’ve taken a glance at Polymer’s paper components. The idea is that when a click event is triggered an orb like glow appears and then vanishes at the end of the event. It’s a nice and subtle way to provide user feedback when they interact with an element on your page, but also doesn’t break layout if it sits next to other items. We achieve the effect through the use of keyframe animations, class toggling with JavaScript and using the animationend listener made available via JavaScript. Read More →