expanding bubble diagram on scroll

had to make this happen for a client project. the best part is that it falls back to appropriate, legible markup on browsers that aren't up to the challenge.

by jack gold

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.4/waypoints.min.js"></script>
<h1> scroll down! </h1>

<div class="bubble-container">
    
<h3 class="bubble expandable primary" data-secondaries="management_bubbles">Your Wealth Management Strategy</h3>

    <ul id="management_bubbles" class="secondaries">
        <li class="bubble l">Your Goals</li>
        <li class="bubble tl">Your Values</li>
        <li class="bubble t">Risks</li>
        <li class="bubble tr">Opportunities</li>
        <li class="bubble r">Family Member's Needs</li>
    </ul>
</div>
<div class="bubble-container second">
    <div class="bubble-wrap">
        
<h3 class="bubble expandable primary" data-secondaries="implementation_bubbles">Tactical Implementation Decisions</h3>

        <ul id="implementation_bubbles" class="secondaries">
            <li class="bubble bl">Investment Strategy</li>
            <li class="bubble l">Estate Plan</li>
            <li class="bubble tl">Insurance Risk &amp; Management</li>
            <li class="bubble tr">Lifestyle Management</li>
            <li class="bubble r">Philanthropy</li>
            <li class="bubble br">Tax Planning</li>
        </ul>
    </div>
</div>
<div class="bubble-container">
    
<h3 class="bubble primary">Measure Results</h3>

</div>

SCSS

* { box-sizing:border-box; text-align:center; margin:0 auto; padding:0; font-family: sans-serif; font-weight:normal; font-size:12px; }

.bubble-container {
    position:relative;
    width:600px; height:500px;
    //background:#eee;
    margin-top:50px;
    &:first-of-type { margin-top:600px; }
   opacity:0;
}

.bubble {
    position:absolute;
    top:50%; left:50%;
    margin-left:-6em; margin-top:-6em;
    border-radius:50%;
    height:12em; width:12em;
    padding:1.5em;
    background:skyblue;
    box-shadow:inset 0 0 3px 1px #79B1D2;
    box-shadow: inset 0 0 5px 3px darken(skyblue, 10%);
    align-content:center;
    display:flex;
    
    text-align:center;
    align-items:center;
    justify-content:center;
    align-content:center;
}

h3 {
    z-index:30;
    transform:scale(1.3);
}

li {
    display:flex;
   z-index:10;
    transform: scale(1);
    transform-origin:center;
}

ul { width:100%; height:100%; }


@mixin moveOut($x, $y, $n) {
   
        0% { opacity:-.5; transform: scale(0.1, 0.1) translateX(0) translateY(0) rotateZ(360deg); transform-style:preserve3d; }
       /* 90% {  transform: scale(1.15) translateX($x) translateY($y) rotateZ(360deg); transform-style:preserve3d; } */
    100% { opacity:.95; transform: scale(1,1) translateX($x) translateY($y) rotateZ(360deg); transform-style:preserve3d; }
    
}

$stops: (-200%, 0), (-150%, -140%), (0, -200%), (150%, -140%), (200%, 0), (150%, 140%), (0, 200%), (-150%, 140%);
@for $i from 1 to 8 {
    $x: nth(nth($stops, $i), 1);
    $y: nth(nth($stops, $i), 2);
     @keyframes moveOut#{$i} {
        @include moveOut( $x, $y, $i);
    }
}

@for $i from 0 to 8 {
    
    $deg: (($i*45)+315);

    
  .active li.bubble-$i,
   .active li.bubble:nth-of-type($i) {
        animation-name: moveOut#{$i};
        animation-delay: ($i/8)*.5s;
            position:absolute;
            z-index:20;
            
                &:after {
        content: " ";
        position:absolute;
                   ...

JavaScript

$(function () {

    $('.bubble-container').each(function () {
        $(this).waypoint(function (direction) {
            if (direction == 'down') {
                $(this).animate({
                    opacity: 1,
                    top: '-100px'
                }, 600).addClass('active');
                //   $(this).trigger('activate');
            }
        }, {
            offset: 400
        });
    });



    /* $('.bubble-container').on('activate', function (event) {

        $('.bubble-container').addClass('active');
    }); */
});