Pen Reveal Effect Project

An interactive pen reveal effect triggered by the user's scroll.

  • Languages: HTML5, CSS3, Javascript, jQuery
  • Libraries: GSAP: TweenMax & Animation, ScrollMagic.js
  • This course / assets are taught & provided by: Petr Tichy

Project Breakdown

  • Learned proper HTML & CSS structure to layout such an animation.
  • Fix the body of the pen
  • Create a tween
  • Set the right duration and offset
  • Reset position of bottom parts
  • A starting point for revealing them
  • Create a scene to lock and unlock all the parts
  • Animate remaining elements to y: 0
  • use .setClassToggle()to toggle .fade-inclass

Sample Code Below

HTML

CSS

JS