gavin-hall

.container
  - for (i = 0; i < 400; i++)
    .trigger
  .monitor
    .camera.o-x
      .camera.o-y
        .camera.o-z
          .vr
            - for (i = 0; i < 20; i++)
              .vr_layer

gavin-hall

Anime.js + ScrollMagic Scroll Based Animations

A example of using ScrollMagic to trigger Anime.js animations. Some of the animations are set to play when triggered and some are set to progress as the user scrolls the page.

A Pen by Rex Bullington on CodePen.

License.

gavin-hall

Button Hover Effects

Some button hover effects using psuedo elements and borders.

A Pen by Kyle Brumm on CodePen.

License.

gavin-hall

CSS Gooey Menu (Version 2)

Gooey menu with CSS and SVG filters. Version 2

A Pen by Lucas Bebber on CodePen.

License.

gavin-hall

BBC - 13 Minutes to the Moon

From the BBC's series: https://www.bbc.co.uk/programmes/w13xttx2

I initially tried it with html/css masking/clipping but it was very poor cross browser with the things I needed to do with background-clip: text; So just went all out SVG which is far easier.

A Pen by Pete Barr on CodePen.

License.

gavin-hall

Animated Navigation

Animated mobile navigation created in Javascript using Greensock

A Pen by Greg Hovanesyan on CodePen.

License.

gavin-hall

Animated SVG text mask | Greensock

because awesome

A Pen by Arden on CodePen.

License.

gavin-hall

Browser Scrollbar Controls TimelineLite Animation

This is a test showing how the browser's vertical scrollbar can control a Greensock TimelineLite animation.

A Pen by Adrian Parr on CodePen.

License.

gavin-hall

<section id="one">
    <div class="inner innerS1">
        <h1>Simple ScrollMagic Tutorial</h1>
        <p>Learn how to create a <strong>simple scrolling website</strong> using ScrollMagic</p>
    </div>
</section>
<section id="two">
    <div class="innerText innerS2">
        <h2>Why to learn ScrollMagic?</h2>
        <ul class="features">

gavin-hall

Card Flip

A simple card flip effect using Anime.js

A Pen by Marcos Paulo on CodePen.

License.