title: I want my svg animation to start when scrolled down to the div
body: <p>My name is Daniel Götz and i'm currently working on my portfolio website but i have a problem. My SVG animation starts when the page is loaded, but i want it to start when i'm scrolled down to it. </p>
  
  <p>My website : <a href="http://20162.hosts.ma-cloud.nl/portfoliowebsite/" rel="nofollow noreferrer">http://20162.hosts.ma-cloud.nl/portfoliowebsite/</a></p>
  
  <p>If you scroll down to the H1 called: "Mijn skills" You can see the Photoshop logo being animated. But i want this animation to start when  scrolled down to it.</p>
  
  <p>I have no idea how to do this, i really hope someone can help me out.</p>
  
  <p><strong>HTML CODE:</strong> </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="author" content="Daniel Gotz"&gt;
    &lt;title&gt;Daniel G&amp;ouml;tz | Porfolio &lt;/title&gt;
    &lt;link href="css/aos.css"&gt;
    &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
    &lt;link href="css/styles.css" rel="stylesheet"&gt;
    &lt;link href="css/scrolling-nav.css" rel="stylesheet"&gt;
    &lt;link href="dist/hamburgers.css" rel="stylesheet"&gt;
    &lt;link href="css/animate.css" rel="stylesheet"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Exo+2:600,900|Roboto" rel="stylesheet"&gt;
    &lt;script src="js/typed.js" type="text/javascript"&gt;
    &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top"&gt;
    &lt;a class="page-scroll animated bounceInUp" href="#intro" id="myBtn" title="Go to top"&gt; &lt;img src="links/up-arrow.svg"&gt; &lt;/a&gt;
    &lt;!-- Navigation --&gt;
    &lt;section id="intro" class="intro-section"&gt;
      &lt;nav class="navbar navbar-default" role="navigation"&gt;
        &lt;div class="navbar-header page-scroll"&gt;
          &lt;button class="hamburger hamburger--spin navbar-toggle visible-xs" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse"&gt; &lt;span class=" hamburger-box"&gt;
      &lt;span class=" hamburger-inner"&gt;&lt;/span&gt; &lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="collapse navbar-collapse navbar-ex1-collapse "&gt;
          &lt;ul class="nav navbar-nav right"&gt;
            &lt;li class="hidden"&gt;
              &lt;a class="page-scroll " href="#page-top"&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt; &lt;a class="page-scroll " href="#intro"&gt;Intro&lt;/a&gt; &lt;/li&gt;
            &lt;li&gt; &lt;a class="page-scroll" href="#mijnwerk"&gt;Mijn werk&lt;/a&gt; &lt;/li&gt;
            &lt;li&gt; &lt;a class="page-scroll" href="#overdaniel"&gt;Over Daniel&lt;/a&gt; &lt;/li&gt;
            &lt;li&gt; &lt;a class="page-scroll" href="#contact"&gt;Contact&lt;/a&gt; &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
      &lt;div class="overlay" id="overlay"&gt;&lt;/div&gt;
      &lt;div class="title"&gt;
        &lt;div id="typed-strings"&gt;
          &lt;h1&gt; Hello,&lt;/h1&gt;
          &lt;h1&gt; My name is Daniel G&amp;ouml;tz.&lt;/h1&gt;
          &lt;h1&gt; I'm an Interaction Designer.&lt;/h1&gt;
          &lt;h1&gt; Discover my work.&lt;/h1&gt; &lt;/div&gt; &lt;span id="typed"&gt;&lt;/span&gt;&lt;/div&gt;
      &lt;div class="berg"&gt; &lt;img src="links/backgroundmountain.svg"&gt; &lt;/div&gt;
    &lt;/section&gt;
    &lt;section class="mijnwerk-section"&gt;
      &lt;div class="container"&gt;
        &lt;div id="mijnwerk" class="center"&gt;
          &lt;h2&gt; Mijn werk &lt;/h2&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-sm-4 col-xs-12 .col-padding"&gt;
              &lt;div class="project1 col-centered"&gt; &lt;img class="fit" src="links/stadalsspelthumbnail.jpg"&gt;
                &lt;div class="blackframe"&gt;&lt;/div&gt;
                &lt;div class="projecttext"&gt; Stad als spel&lt;/div&gt;
                &lt;div class="projecttextmobile"&gt; Stad als spel&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-sm-4 col-xs-12 .col-padding"&gt;
              &lt;div class="project1 col-centered"&gt; &lt;img class="fit" src="links/stadalsspelthumbnail.jpg"&gt;
                &lt;div class="blackframe"&gt;&lt;/div&gt;
                &lt;div class="projecttext"&gt; Stad als spel&lt;/div&gt;
                &lt;div class="projecttextmobile"&gt; Stad als spel&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-sm-4 col-xs-12 .col-padding"&gt;
              &lt;div class="project1 col-centered"&gt; &lt;img class="fit" src="links/stadalsspelthumbnail.jpg"&gt;
                &lt;div class="blackframe"&gt;&lt;/div&gt;
                &lt;div class="projecttext"&gt; Stad als spel&lt;/div&gt;
                &lt;div class="projecttextmobile"&gt; Stad als spel&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-sm-4 col-xs-12 .col-padding"&gt;
              &lt;div class="project1 col-centered"&gt; &lt;img class="fit" src="links/stadalsspelthumbnail.jpg"&gt;
                &lt;div class="blackframe"&gt;&lt;/div&gt;
                &lt;div class="projecttext"&gt; Stad als spel&lt;/div&gt;
                &lt;div class="projecttextmobile"&gt; Stad als spel&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-sm-4 col-xs-12 .col-padding"&gt;
              &lt;div class="project1 col-centered"&gt; &lt;img class="fit" src="links/stadalsspelthumbnail.jpg"&gt;
                &lt;div class="blackframe"&gt;&lt;/div&gt;
                &lt;div class="projecttext"&gt; Stad als spel&lt;/div&gt;
                &lt;div class="projecttextmobile"&gt; Stad als spel&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-sm-4 col-xs-12 .col-padding"&gt;
              &lt;div class="project1 col-centered"&gt; &lt;img class="fit" src="links/stadalsspelthumbnail.jpg"&gt;
                &lt;div class="blackframe"&gt;&lt;/div&gt;
                &lt;div class="projecttext"&gt; Stad als spel&lt;/div&gt;
                &lt;div class="projecttextmobile"&gt; Stad als spel&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="sea"&gt; &lt;img src="links/backgroundsea.svg"&gt; &lt;/div&gt;
    &lt;/section&gt;
    &lt;section class="services-section"&gt;
      &lt;div id="overdaniel" class="center"&gt;
        &lt;div class="container"&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-sm-6 col-xs-12 text"&gt;
              &lt;div class="h3text"&gt;
                &lt;h3&gt; Over Daniel G&amp;ouml;tz &lt;/h3&gt; &lt;/div&gt;
              &lt;div class="ptext"&gt;
                &lt;p&gt; Mijn naam is Daniel, ik ben 18 jaar en studeer aan Het mediacollege Amsterdam als interactief vormgever. &lt;/p&gt;
                &lt;p&gt; Ik ben een leergierige student en wil graag steeds nieuwe dingen leren en uitproberen, zodat ik uiteindelijk een hele goede interactieve designer word. &lt;/p&gt;
                &lt;p&gt; Ik ben bekend met veel codetalen zoals: HTML, CSS, PHP en javascript. &lt;/p&gt;
                &lt;p&gt; Ook ben ik belend met programma’s zoals Photoshop, Illustrator, Indesign, permiere pro en After Effects. En tot slot kan ik ook Bootstrap, Jquery en Mediaqueries toepassen. &lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-sm-6 col-xs-12"&gt;
              &lt;div class="foto"&gt; &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-xs-12"&gt;
              &lt;div class="h3text"&gt;
                &lt;h3&gt; Mijn skills&lt;/h3&gt; &lt;/div&gt;
            &lt;/div&gt;
              &lt;div class="col-xs-4"&gt;
                &lt;div class="aos-item" data-aos="fade-up"&gt;
                  &lt;div class="photoshop"&gt;
                    &lt;object id="my-svg-id" type="image/svg+xml" data="links/photshop_animated.svg"&gt;&lt;/object&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
    &lt;section id="contact" class="contact-section"&gt; &lt;/section&gt;
    &lt;!-- jQuery --&gt;
    &lt;script&gt;
      var typed = new Typed('#typed', {
        stringsElement: '#typed-strings'
        , typeSpeed: 20
        , backSpeed: 20
        , backDelay: 1000
      , })
    &lt;/script&gt;
    &lt;script&gt;
      new Vivus('my-svg-id', {
        type: 'delayed'
        , duration: 200
      }, myCallback);
    &lt;/script&gt;
    &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
    &lt;!-- Bootstrap Core JavaScript --&gt;
    &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;!-- Scrolling Nav JavaScript --&gt;
    &lt;script src="js/jquery.easing.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/scrolling-nav.js"&gt;&lt;/script&gt;
    &lt;script src="js/hamburgers.js"&gt;&lt;/script&gt;
    &lt;script src="dist/vivus.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS CODE:</strong></p>
  
  <pre><code>body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
  
  }
  
  html {
    width: 100%;
    height: 100%;
  }
  
  .overflow {
    overflow-x: hidden;
  }
  
  ul li a {
    width: 125px;
    text-align: center;
  }
  
  ul li a:before {
    content: "";
    width: 0px;
    height: 3px;
    background: white;
    position: absolute;
    top: 110%;
    left: 0;
    transition: .5s;
    mix-blend-mode: multiply;
  }
  
  ul li a:after {
    content: "";
    width: 0px;
    height: 3px;
    background: white;
    position: absolute;
    top: 110%;
    right: 0;
    transition: .5s;
    mix-blend-mode: multiply;
  }
  
  ul li:hover a:before {
    width: 50%;
    transform: translateX(100%)
  }
  
  ul li:hover a:after {
    width: 50%;
    transform: translateX(-100%)
  }
  
  .intro-section {
    height: 100%;
    background: #2ecc71;
    color: white;
    text-align: center;
  }
  
  .mijnwerk-section {
    width: 100%;
    min-height: 120vh;
    text-align: center;
    background: #27ae60;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-bottom: 50px;
  }
  
  .services-section {
    width: 100%;
    min-height: 120vh;
    text-align: center;
    background: #27ae60;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-bottom: 50px;  background: #3498db;
  }
  
  .contact-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #eee;
  }
  
  .home {
    height: 100vh;
    width: 100vw;
    background-color: #2ecc71;
  }
  
  .mijnwerk {
    height: 100vh;
    width: 100vw;
    background-color: #27ae60;
  }
  
  .navbar-default {
    background: none;
    border-color: transparent;
    z-index: 3;
    border: 0;
  }
  
  .navbar.navbar-default {
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  
  .navbar.navbar-default .navbar-collapse {
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  
  .right {
    float: right;
    text-align: right;
  }
  
  .navbar-default .navbar-nav&gt;li&gt;a {
    font-family: 'Roboto', sans-serif;
    color: #ecf0f1;
    font-size: 14px;
  }
  
  .nav&gt;li&gt;a {
    padding: 15px 25px;
    border-style: none;
  }
  
  .navbar-default .navbar-nav&gt;li&gt;a:focus,
  .navbar-default .navbar-nav&gt;li&gt;a:hover {
    color: #ecf0f1;
    border-style: none;
  }
  
  .navbar-default .navbar-toggle:focus,
  .navbar-default .navbar-toggle:hover {
    background: none
  }
  
  .navbar-default .navbar-collapse,
  .navbar-default .navbar-form {
    border-style: none;
  }
  
  h1 {
    font-size: 37px;
    font-family: 'Exo 2', sans-serif;
    font-weight: 900;
    line-height: 60px;
  }
  
  .title {
    font-family: 'Exo 2', sans-serif;
    text-align: center;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 37px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    z-index: 3;
    min-width: 1000px;
  }
  
  .berg {
    position: absolute;
    width: 100%;
    bottom: 0;
    margin: 0 0 -2px 0;
    z-index: 2
  }
  
  .sea {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 1;
    margin: 0 0 -2px -1px;
  }
  
  .overlay {
    position: fixed;
    top: 0;
    z-index: 2;
    display: none;
    overflow: auto;
    width: 100%;
    height: 100%;
    background: #333;
  }
  
  .project1 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    height: 200px;
    width: 100%;
    max-width: 300px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    z-index: 2;
  }
  
  .project1 img {
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
    height: 100%;
    transition: all .5s ease-in-out;
  }
  
  .project1:hover img {
    transform: scale(1.3);
  }
  
  .blackframe {
    top: 100%;
    position: relative;
    height: 200px;
    width: 100%;
    background-color: rgba(0, 0, 0, .3);
    max-width: 300px;
    transition: all .3s ease-in-out;
  }
  
  .project1:hover .blackframe {
    transform: translateY(-100%);
  }
  
  .project1:hover .projecttext {
    transform: translatex(-100%);
  }
  
  .col-padding {}
  
  .col-centered {
    float: none;
    margin: 15px auto;
  }
  
  .projecttext {
    position: relative;
    top: 100%;
    width: 100%;
    max-width: 300px;
    height: 50px;
    background-color: #2c3e50;
    line-height: 50px;
    text-align: center;
    margin-left: 100%;
    margin-top: -250px;
    transition: all .3s ease-in-out;
    color: white;
  }
  
  h2 {
    padding-top: 40px;
    font-size: 24spx;
    font-family: 'Exo 2', sans-serif;
    font-weight: 600;
    color: white;
    padding-bottom: 20px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  }
  
  .projecttextmobile {
    position: relative;
    top: 75%;
    width: 100%;
    max-width: 300px;
    height: 50px;
    background-color: #2c3e50;
    line-height: 50px;
    text-align: center;
    color: white;
  }
  
  @media screen and (min-width: 768px) {
    .projecttextmobile {
      visibility: hidden;
    }
  }
  
  #myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #2c3e50;
    color: white;
    cursor: pointer;
    height: 40px;
    width: 40px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  }
  
  #myBtn img {
    position: absolute;
    height: 100%;
    width: 100%;
    padding: 15px;
  }
  
  #myBtn:hover {
    background-color: #34495e;
  }
  
  @media only screen and (max-width: 600px) {
  
    #myBtn {
      height: 50px;
      width: 50px;
    }
  }
  
  
  
  .text p {
    float: left;
    text-align: left;
    color: white;
    max-width: 450px;
      margin-right: auto;
    margin-left: auto;
  }
  
  .foto {
    height: 400px;
    width: 300px;
    background-color:white;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  }
  
  h3 {
    margin-top: -0px;
    float: left;
    font-size: 24px;
    font-family: 'Exo 2', sans-serif;
    font-weight: 600;
    color: white;
    padding-bottom: 10px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
     margin: 0 auto;
  
  
  }
  
  
  .h3text{
    width: 100%;
    height: 50px;
     margin: 0 auto;
  
  
  }
  #overdaniel {
    padding-top: 20px;
  }
  
  .typedtext{
    margin-top: -0px;
    float: left;
    font-size: 24px;
    font-family: 'Exo 2', sans-serif;
    font-weight: 600;
    color: white;
    padding-bottom: 10px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
     margin: 0 auto;
  
  
  }
  
  @media(min-width:767px) {
    .navbar {}
    .top-nav-collapse {
      padding: 0;
    }
  }
  
  @media(max-width:767px) {
    ul li:hover a:before {
      display: none;
    }
    ul li:hover a:after {
      display: none;
    }
    ul li a {
      text-align: right;
    }
    h3 {
  float: none;
    }
  
    .text p {
      max-width: none;
      padding-left:  50px;
      padding-right: 50px;
  
    }
  
    .foto {
      margin-bottom: 20px;
      margin-top: 20px;
    }
  
      .title {
  top: 50%;
      font-size: 20px;
      min-width: 500px;
    }
  
  }
  
  .typed-cursor {
    opacity: 1;
  
    -webkit-animation: blink 1.0s infinite;
    -moz-animation: blink 1.0s infinite;
    -ms-animation: blink 1.0s infinite;
    -o-animation: blink 1.0s infinite;
    animation: blink 1.s infinite;
  }
  
  @-keyframes blink {
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
  }
  
  @-webkit-keyframes blink{
    0% { opacity:1; }          
    50% { opacity:0; }
    100% { opacity:1; }
  }
  
  @-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
  }
  
  @-ms-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
  }
  
  @-o-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
  }
  
  .photoshop {
  height: 100px;
    width: 100px;
  
  }
  </code></pre>