如何在视口出现时激活分层SVG的动画？

Question

我已经研究了在视口上出现后触发动画的其他stackoverflow问题，但所有类似的问题只使用了单层SVG。

我的SVG是分层的（不同的部分），因此我不能在视口出现的那一刻立即（或者更确切地说，不知道如何）定位SVG的所有部分。

以下是我所指的Codepen：https://codepen.io/aahlfeeyann/full/rmLmKE/

<svg class="birthday-cake" version="1.1" viewBox="0 0 58 53" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <!--Generated by IJSVG (https://github.com/curthard89/IJSVG)-->
            <defs>
                <path id="path-4" d="M0,0v6"></path>
                <path id="path-6" d="M3,3l-3,-3"></path>
                <path id="path-1" d="M12.5,0c0,3.452 -2.798,6.25 -6.25,6.25c-3.452,0 -6.25,-2.798 -6.25,-6.25"></path>
                <path id="path-3" d="M0,5h10.45c-0.133,-2.781 -2.411,-5 -5.225,-5c-2.814,0 -5.092,2.219 -5.225,5v0Z"></path>
                <path id="path-2" d="M10.45,0h-10.45c0.133,2.781 2.411,5 5.225,5c2.814,0 5.092,-2.219 5.225,-5v0Z"></path>
                <path id="path-5" d="M0,3l3,-3"></path>
            </defs>
            <g transform="translate(-841, -1680)">
                <g transform="translate(842, 1681)">
                    <g fill="none" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">

                        <!-- Candles -->
                        <use class="candles animate" transform="translate(16, 0)" xlink:href="#path-5"></use>
                        <use class="candles animate" transform="translate(23, 0)" xlink:href="#path-5"></use>
                        <use class="candles animate" transform="translate(30, 0)" xlink:href="#path-5"></use>
                        <use class="candles animate" transform="translate(37, 0)" xlink:href="#path-5"></use>
                        <use class="candles animate" transform="translate(37, 0)" xlink:href="#path-6"></use>
                        <use class="candles animate" transform="translate(30, 0)" xlink:href="#path-6"></use>
                        <use class="candles animate" transform="translate(23, 0)" xlink:href="#path-6"></use>
                        <use class="candles animate" transform="translate(16, 0)" xlink:href="#path-6"></use>      

                        <!-- Main Cake Shape -->
                        <path class="cake-shape animate" d="M50,14h-50v-12c0,-1.1 0.9,-2 2,-2h46c1.1,0 2,0.9 2,2v12v0Z" transform="translate(3, 34)"></path>
                        <path class="cake-shape animate" d="M42,14h-42v-12c0,-1.1 0.9,-2 2,-2h38c1.1,0 2,0.9 2,2v12v0Z" transform="translate(7, 20)"></path>
                        <path class="cake-shape animate" d="M34,14h-34v-12c0,-1.1 0.9,-2 2,-2h30c1.1,0 2,0.9 2,2v12v0Z" transform="translate(11, 6)"></path>                    

                        <!-- 1st Layer Deco -->
                        <path class="first-deco animate" d="M4.475,0h-4.475c0.133,2.781 2.411,5 5.225,5c0.433,0 0.847,-0.067 1.25,-0.166v-2.834c0,-1.1 -0.9,-2 -2,-2v0Z" transform="translate(38.525, 6)"></path>
                        <path class="first-deco animate" d="M1.25,5c2.814,0 5.092,-2.219 5.225,-5h-4.475c-1.1,0 -2,0.9 -2,2v2.834c0.403,0.099 0.817,0.166 1.25,0.166v0Z" transform="translate(11, 6)"></path>

                        <use class="first-deco animate" transform="translate(17.525, 6)" xlink:href="#path-2"></use>
                        <use class="first-deco animate" transform="translate(28.025, 6)" xlink:href="#path-2"></use>
                        <use class="first-deco animate" transform="translate(28.025, 15)" xlink:href="#path-3"></use>
                        <use class="first-deco animate" transform="translate(17.525, 15)" xlink:href="#path-3"></use>

                        <path class="first-deco animate" d="M2,5h4.475c-0.133,-2.781 -2.411,-5 -5.225,-5c-0.433,0 -0.847,0.067 -1.25,0.166v2.834c0,1.1 0.9,2 2,2v0Z" transform="translate(11, 15)"></path>
                        <path class="first-deco animate" d="M5.225,0c-2.814,0 -5.092,2.219 -5.225,5h4.475c1.1,0 2,-0.9 2,-2v-2.834c-0.403,-0.099 -0.817,-0.166 -1.25,-0.166v0Z" transform="translate(38.525, 15)"></path>

                        <!-- 2nd Layer Deco -->
                        <use class="second-deco animate" transform="translate(10, 24)" xlink:href="#path-4"></use>
                        <use class="second-deco animate" transform="translate(14, 24)" xlink:href="#path-4"></use>
                        <use class="second-deco animate" transform="translate(18, 24)" xlink:href="#path-4"></use>
                        <use class="second-deco animate" transform="translate(22, 24)" xlink:href="#path-4"></use>
                        <use class="second-deco animate" transform="translate(26, 24)" xlink:href="#path-4"></use>
                        <use class="second-deco animate" transform="translate(30, 24)" xlink:href="#path-4"></use>
                        <use class="second-deco animate" transform="translate(34, 24)" xlink:href="#path-4"></use>
                        <use class="second-deco animate" transform="translate(38, 24)" xlink:href="#path-4"></use>
                        <use class="second-deco animate" transform="translate(42, 24)" xlink:href="#path-4"></use>
                        <use class="second-deco animate" transform="translate(46, 24)" xlink:href="#path-4"></use>

                        <!-- 3rd Layer Deco -->
                        <use class="third-deco animate" transform="translate(3, 37.75)" xlink:href="#path-1"></use>
                        <use class="third-deco animate" transform="translate(15.5, 37.75)" xlink:href="#path-1"></use>
                        <use class="third-deco animate" transform="translate(28, 37.75)" xlink:href="#path-1"></use>
                        <use class="third-deco animate" transform="translate(40.5, 37.75)" xlink:href="#path-1"></use>

                        <!-- Bottom Plate -->
                        <path class="bottom-plate animate" d="M0,0h56" transform="translate(0, 48)"></path>
                        <path class="bottom-plate animate" d="M0,0h48" transform="translate(4, 51)"></path>    

                    </g>
                </g>
            </g>

Answer 1

选择您最喜欢的JS代码，以确定SVG何时在屏幕上。然后让它为SVG添加一个将触发动画的类。

然后确保您的动画CSS规则仅在SVG具有“onscreen”类时触发。

.animate{
    stroke-width: 2;
    stroke: #000;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

.onscreen .animate{
    animation-name: draw;
}

此处示例：

document.getElementById("test").addEventListener('click', function(evt) {
  $("#birthday-cake").addClass("onscreen");
  // Note: addClass() on SVG elements requires jQuery 2.2+
})

h4{
    font-size: 1.750em;
}


.info-box{
    width: 400px;
    height: 500px;
    
    margin: 50px 0;
    
    border: 1px solid burlywood;
    border-radius: 10px;
    text-align: center;
    transition: all 0.4s;
}

.info-box:hover{
    box-shadow: 0px 10px 50px -10px rgba(0,0,0,0.4);
}

.info-title{
    margin-top: 30px;
}

.info-title p{
    width: 70%;
    margin: 30px auto;
}

/* Cake Panel */
svg{
    max-width: 60%;
    max-height: 60%;
    margin-top: 20px;
}
.animate{
    stroke-width: 2;
    stroke: #000;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}
.onscreen .animate{
    animation-name: draw;
}
.candles{
    stroke-dasharray: 5;
    stroke-dashoffset: 5;
    animation-duration: 1s;
    animation-delay: 2s;
}
.cake-shape{
    stroke-dasharray: 140;
    stroke-dashoffset: 140;
    animation-duration: 2s;
}
.first-deco{
    stroke-dasharray: 140;
    stroke-dashoffset: 140;
    animation-duration: 1s;
    animation-delay: 2s
}
.second-deco{
    stroke-dasharray: 10;
    stroke-dashoffset: 10;
    animation-duration: 1s;
    animation-delay: 2s
}
.third-deco{
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation-duration: 1s;
    animation-delay: 2s
}
.bottom-plate{
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation-duration: 1s;
    animation-delay: 2s
}

/* Icon Keyframes*/
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Footer */
footer{
    min-width: 100%;
    height:100px;
    background-color: burlywood;
}

.hero{
  height: 100vh;
  width:100%;
  background-color: #ff0000;
  display: flex;
  align-items:center;
}

.hero p{
  margin: 0 auto;
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="info-box">
                <div class="info-title">
                    <h4>We have the greatest collections of cakes</h4>
                    <p>Our cakes are oven-baked to golden-brown, with handpicked ingredients to ensure 100% quality.</p>
                </div>
                <svg id="birthday-cake" version="1.1" viewBox="0 0 58 53" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <!--Generated by IJSVG (https://github.com/curthard89/IJSVG)-->
                <defs>
                    <path id="path-4" d="M0,0v6"></path>
                    <path id="path-6" d="M3,3l-3,-3"></path>
                    <path id="path-1" d="M12.5,0c0,3.452 -2.798,6.25 -6.25,6.25c-3.452,0 -6.25,-2.798 -6.25,-6.25"></path>
                    <path id="path-3" d="M0,5h10.45c-0.133,-2.781 -2.411,-5 -5.225,-5c-2.814,0 -5.092,2.219 -5.225,5v0Z"></path>
                    <path id="path-2" d="M10.45,0h-10.45c0.133,2.781 2.411,5 5.225,5c2.814,0 5.092,-2.219 5.225,-5v0Z"></path>
                    <path id="path-5" d="M0,3l3,-3"></path>
                </defs>
                <g transform="translate(-841, -1680)">
                    <g transform="translate(842, 1681)">
                        <g fill="none" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
                            <!-- Candles -->
                            <use class="candles animate" transform="translate(16, 0)" xlink:href="#path-5"></use>
                            <use class="candles animate" transform="translate(23, 0)" xlink:href="#path-5"></use>
                            <use class="candles animate" transform="translate(30, 0)" xlink:href="#path-5"></use>
                            <use class="candles animate" transform="translate(37, 0)" xlink:href="#path-5"></use>
                            <use class="candles animate" transform="translate(37, 0)" xlink:href="#path-6"></use>
                            <use class="candles animate" transform="translate(30, 0)" xlink:href="#path-6"></use>
                            <use class="candles animate" transform="translate(23, 0)" xlink:href="#path-6"></use>
                            <use class="candles animate" transform="translate(16, 0)" xlink:href="#path-6"></use>      
                            
                            <!-- Main Cake Shape -->
                            <path class="cake-shape animate" d="M50,14h-50v-12c0,-1.1 0.9,-2 2,-2h46c1.1,0 2,0.9 2,2v12v0Z" transform="translate(3, 34)"></path>
                            <path class="cake-shape animate" d="M42,14h-42v-12c0,-1.1 0.9,-2 2,-2h38c1.1,0 2,0.9 2,2v12v0Z" transform="translate(7, 20)"></path>
                            <path class="cake-shape animate" d="M34,14h-34v-12c0,-1.1 0.9,-2 2,-2h30c1.1,0 2,0.9 2,2v12v0Z" transform="translate(11, 6)"></path>                    
                            <!-- 1st Layer Deco -->
                            <path class="first-deco animate" d="M4.475,0h-4.475c0.133,2.781 2.411,5 5.225,5c0.433,0 0.847,-0.067 1.25,-0.166v-2.834c0,-1.1 -0.9,-2 -2,-2v0Z" transform="translate(38.525, 6)"></path>
                            <path class="first-deco animate" d="M1.25,5c2.814,0 5.092,-2.219 5.225,-5h-4.475c-1.1,0 -2,0.9 -2,2v2.834c0.403,0.099 0.817,0.166 1.25,0.166v0Z" transform="translate(11, 6)"></path>
                            
                            <use class="first-deco animate" transform="translate(17.525, 6)" xlink:href="#path-2"></use>
                            <use class="first-deco animate" transform="translate(28.025, 6)" xlink:href="#path-2"></use>
                            <use class="first-deco animate" transform="translate(28.025, 15)" xlink:href="#path-3"></use>
                            <use class="first-deco animate" transform="translate(17.525, 15)" xlink:href="#path-3"></use>
                            
                            <path class="first-deco animate" d="M2,5h4.475c-0.133,-2.781 -2.411,-5 -5.225,-5c-0.433,0 -0.847,0.067 -1.25,0.166v2.834c0,1.1 0.9,2 2,2v0Z" transform="translate(11, 15)"></path>
                            <path class="first-deco animate" d="M5.225,0c-2.814,0 -5.092,2.219 -5.225,5h4.475c1.1,0 2,-0.9 2,-2v-2.834c-0.403,-0.099 -0.817,-0.166 -1.25,-0.166v0Z" transform="translate(38.525, 15)"></path>
                            
                            <!-- 2nd Layer Deco -->
                            <use class="second-deco animate" transform="translate(10, 24)" xlink:href="#path-4"></use>
                            <use class="second-deco animate" transform="translate(14, 24)" xlink:href="#path-4"></use>
                            <use class="second-deco animate" transform="translate(18, 24)" xlink:href="#path-4"></use>
                            <use class="second-deco animate" transform="translate(22, 24)" xlink:href="#path-4"></use>
                            <use class="second-deco animate" transform="translate(26, 24)" xlink:href="#path-4"></use>
                            <use class="second-deco animate" transform="translate(30, 24)" xlink:href="#path-4"></use>
                            <use class="second-deco animate" transform="translate(34, 24)" xlink:href="#path-4"></use>
                            <use class="second-deco animate" transform="translate(38, 24)" xlink:href="#path-4"></use>
                            <use class="second-deco animate" transform="translate(42, 24)" xlink:href="#path-4"></use>
                            <use class="second-deco animate" transform="translate(46, 24)" xlink:href="#path-4"></use>
                            
                            <!-- 3rd Layer Deco -->
                            <use class="third-deco animate" transform="translate(3, 37.75)" xlink:href="#path-1"></use>
                            <use class="third-deco animate" transform="translate(15.5, 37.75)" xlink:href="#path-1"></use>
                            <use class="third-deco animate" transform="translate(28, 37.75)" xlink:href="#path-1"></use>
                            <use class="third-deco animate" transform="translate(40.5, 37.75)" xlink:href="#path-1"></use>
                                                      
                            <!-- Bottom Plate -->
                            <path class="bottom-plate animate" d="M0,0h56" transform="translate(0, 48)"></path>
                            <path class="bottom-plate animate" d="M0,0h48" transform="translate(4, 51)"></path>    
                                           
                        </g>
                    </g>
                </g>
</svg>
              <button id="test">Trigger onscreesn</button>
            </div>

Answer 2

此代码将帮助您在向下滚动时为蛋糕设置动画。我正在使用ScrollMagic v2.0.5进行滚动检测。 首先，您需要初始化控制器`：

var controller = new ScrollMagic.Controller();

然后，您为操作构建scene添加setClassToggle，并addTo添加controller：

var scene = new ScrollMagic.Scene({triggerElement: "#trigger", duration: 300});
scene.setClassToggle("#birthday-cake", "ontrigger");
scene.addTo(controller);

我向id="trigger"类div添加了info-title：

最后在CSS我从animation-name: draw;课程中删除了.animate并创建了.ontrigger .animate规则：

.ontrigger .animate{
    animation-name: draw;
}

<强>更新

使用 ScrollMagic 的想法是控制何时触发event，您还可以控制要触发该事件的次数。

因此我将scene.setClassToggle()替换为the on() method以添加两个事件侦听器。第一个事件是触发器enter到屏幕中间，另一个事件发生在end。

scene.on('enter', function(e) {
  ...
})
scene.on('end', function(e) {
  ...
});

最后一个要素是我们需要使用the remove() method从scene移除控制器，以便它停止触发enter和end事件

这是Codepen

中的实施

$(function() { // wait for document ready
  // init controller
  var controller = new ScrollMagic.Controller();

  // build scene
  var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 300
  });

  scene.on('enter', function(e) {
    console.log('onEnter');
    $('#birthday-cake').addClass('ontrigger');
  });

  scene.on('end', function(e) {
    console.log('onEnd');
    scene.remove();
  });

  scene.addTo(controller);
});

h4{
    font-size: 1.750em;
}


.info-box{
    width: 400px;
    height: 500px;
    
    margin: 50px 0;
    
    border: 1px solid burlywood;
    border-radius: 10px;
    text-align: center;
    transition: all 0.4s;
}

.info-box:hover{
    box-shadow: 0px 10px 50px -10px rgba(0,0,0,0.4);
}

.info-title{
    margin-top: 30px;
}

.info-title p{
    width: 70%;
    margin: 30px auto;
}

/* Cake Panel */
svg{
    max-width: 60%;
    max-height: 60%;
    margin-top: 20px;
}
.animate {
    stroke-width: 2;
    stroke: #000;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}
.ontrigger .animate {
    animation-name: draw;
}
.candles{
    stroke-dasharray: 5;
    stroke-dashoffset: 5;
    animation-duration: 1s;
    animation-delay: 2s;
}
.cake-shape{
    stroke-dasharray: 140;
    stroke-dashoffset: 140;
    animation-duration: 2s;
}
.first-deco{
    stroke-dasharray: 140;
    stroke-dashoffset: 140;
    animation-duration: 1s;
    animation-delay: 2s
}
.second-deco{
    stroke-dasharray: 10;
    stroke-dashoffset: 10;
    animation-duration: 1s;
    animation-delay: 2s
}
.third-deco{
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation-duration: 1s;
    animation-delay: 2s
}
.bottom-plate{
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation-duration: 1s;
    animation-delay: 2s
}

/* Icon Keyframes*/
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Footer */
footer{
    min-width: 100%;
    height:100px;
    background-color: burlywood;
}

.hero{
  height: 100vh;
  width:100%;
  background-color: #ff0000;
  display: flex;
  align-items:center;
}

.hero p{
  margin: 0 auto;
}

<link href="https://fonts.googleapis.com/css?family=Lato:400,400i|Playfair+Display:900" rel="stylesheet">

<body>

  <!-- Hero -->
  <div class="hero">
    <p>FULL SCREEN DIV</p>
  </div>

  <!-- Main Content -->
  <section class="detail">
    <h1 class="section-header">What We Do</h1>

    <div class="info-box">
      <div id="trigger" class="info-title">
        <h4>We have the greatest collections of cakes</h4>
        <p>Our cakes are oven-baked to golden-brown, with handpicked ingredients to ensure 100% quality.</p>
      </div>
      <svg id="birthday-cake" version="1.1" viewBox="0 0 58 53" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <!--Generated by IJSVG (https://github.com/curthard89/IJSVG)-->
        <defs>
          <path id="path-4" d="M0,0v6"></path>
          <path id="path-6" d="M3,3l-3,-3"></path>
          <path id="path-1" d="M12.5,0c0,3.452 -2.798,6.25 -6.25,6.25c-3.452,0 -6.25,-2.798 -6.25,-6.25"></path>
          <path id="path-3" d="M0,5h10.45c-0.133,-2.781 -2.411,-5 -5.225,-5c-2.814,0 -5.092,2.219 -5.225,5v0Z"></path>
          <path id="path-2" d="M10.45,0h-10.45c0.133,2.781 2.411,5 5.225,5c2.814,0 5.092,-2.219 5.225,-5v0Z"></path>
          <path id="path-5" d="M0,3l3,-3"></path>
        </defs>
        <g transform="translate(-841, -1680)">
          <g transform="translate(842, 1681)">
            <g fill="none" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
              <!-- Candles -->
              <use class="candles animate" transform="translate(16, 0)" xlink:href="#path-5"></use>
              <use class="candles animate" transform="translate(23, 0)" xlink:href="#path-5"></use>
              <use class="candles animate" transform="translate(30, 0)" xlink:href="#path-5"></use>
              <use class="candles animate" transform="translate(37, 0)" xlink:href="#path-5"></use>
              <use class="candles animate" transform="translate(37, 0)" xlink:href="#path-6"></use>
              <use class="candles animate" transform="translate(30, 0)" xlink:href="#path-6"></use>
              <use class="candles animate" transform="translate(23, 0)" xlink:href="#path-6"></use>
              <use class="candles animate" transform="translate(16, 0)" xlink:href="#path-6"></use>

              <!-- Main Cake Shape -->
              <path class="cake-shape animate" d="M50,14h-50v-12c0,-1.1 0.9,-2 2,-2h46c1.1,0 2,0.9 2,2v12v0Z" transform="translate(3, 34)"></path>
              <path class="cake-shape animate" d="M42,14h-42v-12c0,-1.1 0.9,-2 2,-2h38c1.1,0 2,0.9 2,2v12v0Z" transform="translate(7, 20)"></path>
              <path class="cake-shape animate" d="M34,14h-34v-12c0,-1.1 0.9,-2 2,-2h30c1.1,0 2,0.9 2,2v12v0Z" transform="translate(11, 6)"></path>
              <!-- 1st Layer Deco -->
              <path class="first-deco animate" d="M4.475,0h-4.475c0.133,2.781 2.411,5 5.225,5c0.433,0 0.847,-0.067 1.25,-0.166v-2.834c0,-1.1 -0.9,-2 -2,-2v0Z" transform="translate(38.525, 6)"></path>
              <path class="first-deco animate" d="M1.25,5c2.814,0 5.092,-2.219 5.225,-5h-4.475c-1.1,0 -2,0.9 -2,2v2.834c0.403,0.099 0.817,0.166 1.25,0.166v0Z" transform="translate(11, 6)"></path>

              <use class="first-deco animate" transform="translate(17.525, 6)" xlink:href="#path-2"></use>
              <use class="first-deco animate" transform="translate(28.025, 6)" xlink:href="#path-2"></use>
              <use class="first-deco animate" transform="translate(28.025, 15)" xlink:href="#path-3"></use>
              <use class="first-deco animate" transform="translate(17.525, 15)" xlink:href="#path-3"></use>

              <path class="first-deco animate" d="M2,5h4.475c-0.133,-2.781 -2.411,-5 -5.225,-5c-0.433,0 -0.847,0.067 -1.25,0.166v2.834c0,1.1 0.9,2 2,2v0Z" transform="translate(11, 15)"></path>
              <path class="first-deco animate" d="M5.225,0c-2.814,0 -5.092,2.219 -5.225,5h4.475c1.1,0 2,-0.9 2,-2v-2.834c-0.403,-0.099 -0.817,-0.166 -1.25,-0.166v0Z" transform="translate(38.525, 15)"></path>

              <!-- 2nd Layer Deco -->
              <use class="second-deco animate" transform="translate(10, 24)" xlink:href="#path-4"></use>
              <use class="second-deco animate" transform="translate(14, 24)" xlink:href="#path-4"></use>
              <use class="second-deco animate" transform="translate(18, 24)" xlink:href="#path-4"></use>
              <use class="second-deco animate" transform="translate(22, 24)" xlink:href="#path-4"></use>
              <use class="second-deco animate" transform="translate(26, 24)" xlink:href="#path-4"></use>
              <use class="second-deco animate" transform="translate(30, 24)" xlink:href="#path-4"></use>
              <use class="second-deco animate" transform="translate(34, 24)" xlink:href="#path-4"></use>
              <use class="second-deco animate" transform="translate(38, 24)" xlink:href="#path-4"></use>
              <use class="second-deco animate" transform="translate(42, 24)" xlink:href="#path-4"></use>
              <use class="second-deco animate" transform="translate(46, 24)" xlink:href="#path-4"></use>

              <!-- 3rd Layer Deco -->
              <use class="third-deco animate" transform="translate(3, 37.75)" xlink:href="#path-1"></use>
              <use class="third-deco animate" transform="translate(15.5, 37.75)" xlink:href="#path-1"></use>
              <use class="third-deco animate" transform="translate(28, 37.75)" xlink:href="#path-1"></use>
              <use class="third-deco animate" transform="translate(40.5, 37.75)" xlink:href="#path-1"></use>

              <!-- Bottom Plate -->
              <path class="bottom-plate animate" d="M0,0h56" transform="translate(0, 48)"></path>
              <path class="bottom-plate animate" d="M0,0h48" transform="translate(4, 51)"></path>

            </g>
          </g>
        </g>
      </svg>
    </div>

    <div class="info-box">
      <div class="info-title">
        <h4>Our cookies are irresistible</h4>
        <p>From almonds to hazelnuts, we have a variety of mouth-watering cookies for you to choose from. </p>
      </div>
    </div>

    <div class="info-box">
      <div class="info-title">
        <h4>Island-wide outlets to cater to your needs</h4>
        <p>We have 40 outlets islandwide, so you don't worry about not finding an outlet near you!</p>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer>
  </footer>

  <!-- Scripts -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
</body>