Trigger animation when svg is in the viewport

Question

Trigger animation when svg is in the viewport

I have a page with a big header image and an svg animation below the fold. Here's the example:

 html, body { height: 100%; margin: 0 } .header-image { height: 100%; background-color: #ffcc00 } /*Line animations*/ .line { stroke-dasharray: 150; stroke-dashoffset: 150; animation: dash 2s cubic-bezier(0.23, 1, 0.32, 1);; -webkit-animation: dash 2s cubic-bezier(0.23, 1, 0.32, 1);; -webkit-animation-fill-mode: forwards; } #line01, #line02 { animation-delay:1s; -webkit-animation-delay:1s; } #line03, #line04 { animation-delay:1.2s; -webkit-animation-delay:1.2s; } #line05, #line06 { animation-delay:1.6s; -webkit-animation-delay:1.6s; } #line07, #line08 { animation-delay:1.9s; -webkit-animation-delay:1.9s; } #line09, #line10 { animation-delay:2.3s; -webkit-animation-delay:2.3s; } #line11, #line12, #line13, #line14, #line15, #line16, #line17, #line18{ animation-delay:3.1s; -webkit-animation-delay:3.1s; } #line19, #line20, #line21, #line22, #line23, #line24, #line25, #line26{ animation-delay:3.5s; -webkit-animation-delay:3.5s; } /*Keyframes*/ @keyframes dash { 0% {stroke-dashoffset: 150;} 100% {stroke-dashoffset: 0;} } @-webkit-keyframes dash { 0% {stroke-dashoffset: 150;} 100% {stroke-dashoffset: 0;} } 

 <div class="header-image">Please scroll down</div> <div class="svg-animation"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="guida" x="0px" y="0px" viewBox="0 0 480.669 305.346" enable-background="new 0 0 480.669 305.346" xml:space="preserve"> <rect id="ombra-carta01" x="52.2" y="31.8" transform="matrix(-0.9026 0.4305 -0.4305 -0.9026 331.4025 234.5817)" fill="#A2DEF1" width="174" height="246.1"/> <path id="ombra-occhiali" fill="#A2DEF1" d="M406.66 105.7 c-4.273-0.759-20.888-8.967-33.1-12.474c-12.225-3.512-30.973-5.673-34.362-5.288c-4.051 0.459-4.223 0.747-4.973 3.6 c-0.75 2.86-0.772 5.4 1.3 6.642c2.683 1.5 2.2 5 1.9 14.967c-2.108 4.115-3.231 8.417-3.774 11.1 c-1.042 5.2 3.5 8.4 6.4 3.745c2.822 4.8 8.4 8.9 19 11.889c18.588 5.2 27.35-5.681 30.177-9.188 c5.041-6.253 5.85-16.103 15.383-14.193c9.534 1.9 6.7 11.2 8.9 18.887c1.259 4.3 4.9 17.9 24.1 20.2 c10.921 1.3 17.632-0.292 22.104-3.697c0.914 5.5 6.3 4.3 7.35-0.96c0.546-2.726 1.171-7.168 0.795-11.811 c3.57-9.194 4.472-12.6 7.528-12.981c2.4-0.299 3.373-2.688 3.782-5.617c0.41-2.93 0.362-3.263-3.2-5.246 c-2.979-1.66-21.113-6.885-33.747-8.354C430.991 105.7 416.7 107.5 406.7 105.694z"/> <path id="fine-asta-dx" fill="#254659" d="M333.111 84.4 c23.972 4.3 106.6 28 118.9 33.554c12.3 5.5 10.6 21.7 9.3 28.158c-1.297 6.473-9.299 6.76-7.104-4.195 c2.193-10.955 2.428-17.082-5.075-19.285c-7.504-2.203-109.515-28.483-116.636-30.113C325.357 90.9 328.4 83.2 333.1 84.4 z"/> <path id="fine-asta-sx" fill="#254659" d="M469.952 111.8 c-23.768-5.291-109.196-15.194-122.675-14.834c-13.479 0.359-18.091 15.947-19.387 22.421s5.978 9.8 8.172-1.136 c2.194-10.955 4.337-16.699 12.11-15.843c7.773 0.9 112 15.9 119.2 17.127C474.609 120.8 474.8 112.5 470 111.8 z"/> <path id="montatura" d="M435.583 151.139c16.586 1.1 22.116-5.72 25.721-14.82 c4.24-10.709 5.044-14.575 8.313-14.983c2.399-0.299 3.372-2.688 3.782-5.617c0.409-2.93 0.362-3.263-3.201-5.246 c-2.979-1.66-21.113-6.885-33.747-8.354c-0.287-0.033-0.577-0.063-0.868-0.093v3.04c10.722 1.3 21.4 4.6 24 7 c5.566 5 0.8 22.641-5.935 30.514c-3.718 4.371-10.928 6.027-18.09 5.686V151.139z M400.826 100.8 c-4.274-0.759-20.888-8.967-33.101-12.475c-1.937-0.556-4.037-1.078-6.215-1.562v3.164c10.889 2.3 22.7 6.8 25.8 13.1 c4.493 9.401-9.373 27.347-19.625 29.896c-1.816 0.452-3.909 0.615-6.135 0.52v2.915c12.997 0.5 19.536-7.608 21.905-10.548 c5.042-6.253 5.85-16.103 15.384-14.193c9.533 1.9 6.7 11.2 8.9 18.887c1.258 4.3 4.9 17.9 24.1 20.2 c1.308 0.2 2.6 0.3 3.7 0.354v-2.87c-6.226-0.296-12.414-2.102-16.24-4.946c-8.479-6.302-14.364-28.202-6.597-35.148 c4.281-3.828 13.587-4.225 22.837-3.108v-3.04C424.432 100.9 410.6 102.6 400.8 100.828z M361.51 86.8 c-11.565-2.569-25.294-4.049-28.147-3.726c-4.051 0.459-4.223 0.747-4.973 3.608c-0.75 2.86-0.772 5.4 1.3 6.6 c2.86 1.6 2.1 5.5 1.9 17.028c-0.191 10.5 2.7 19.4 21.6 24.697c3.01 0.8 5.8 1.3 8.3 1.36v-2.915 c-9.958-0.431-22.591-6.071-25.262-14.423c-3.147-9.843-0.785-27.983 6.275-30.445c2.736-0.953 10.573-0.455 19 1.337V86.792z"/> <path id="riflesso-bottom" fill="#B0CAD9" d="M342.523 88.6 c6.276-2.188 39.4 3.3 44.7 14.452c4.493 9.401-9.373 27.347-19.625 29.896c-9.948 2.477-28.129-3.686-31.396-13.903 C333.102 109.2 335.5 91.1 342.5 88.619L342.523 88.619z M459.608 112.069c-4.949-4.436-37.619-12.161-46.861-3.896 c-7.768 6.946-1.882 28.8 6.6 35.148c8.228 6.1 27.4 7.4 34.33-0.739C460.369 134.7 465.2 117.1 459.6 112.069z"/> <path id="riflesso-top-sx" fill="#D1E2EB" d="M345.894 88.2 c10.529-0.32 36.7 5.1 41.4 14.913c3.151 6.594-2.729 17.39-10.059 24.13L345.894 88.158z"/> <path id="riflesso-top-dx" fill="#D1E2EB" d="M418.783 105.355l31.898 39.8 c1.146-0.716 2.158-1.559 2.992-2.539c6.695-7.873 11.501-25.523 5.935-30.514C455.452 108.3 431.7 102.3 418.8 105.355z"/> <path id="retro-aste" fill="#617F91" d="M452.192 108.6 c-8.324-1.297-18.175-2.673-28.473-4.008c-2.935 0.211-5.595 0.716-7.759 1.6l0 0l-0.059 0.024l-0.017 0.007l-0.041 0 l-0.059 0.024l-0.058 0.025h-0.001l-0.057 0.024l-0.058 0.024l-0.042 0.019l-0.016 0.007l-0.113 0.051l-0.026 0.013l-0.029 0 l-0.057 0.026l-0.056 0.026l-0.011 0.004l-0.045 0.022l-0.056 0.026l-0.051 0.024l-0.004 0.002l-0.055 0.026l-0.055 0 l-0.035 0.018l-0.02 0.011l-0.054 0.026l-0.054 0.028l-0.021 0.01l-0.033 0.019l-0.054 0.028l-0.013 0.007l-0.087 0 l-0.005 0.003l-0.053 0.029l-0.043 0.023l-0.009 0.006l-0.053 0.028l-0.052 0.029l-0.027 0.016l-0.023 0.014l-0.051 0 l-0.051 0.029l-0.051 0.03l-0.05 0.03l-0.051 0.03l0 0l-0.05 0.03l-0.05 0.031l-0.049 0.031l-0.049 0.031l-0.048 0.031l-0.022 0 l-0.026 0.018l-0.048 0.031l-0.048 0.032l-0.009 0.006l-0.039 0.026l-0.08 0.056l-0.009 0.006l-0.005 0.004l-0.009 0 l-0.084 0.06l-0.029 0.021l-0.017 0.012l-0.046 0.034l-0.046 0.033l-0.016 0.013l-0.029 0.021l-0.045 0.034l-0.044 0 l-0.005 0.003l-0.039 0.031l-0.045 0.035l-0.035 0.028l-0.008 0.006l-0.003 0.002l-0.084 0.069l-0.023 0.02l-0.019 0 l-0.085 0.071l-0.011 0.011l-0.113 0.099l-0.043 0.039l-0.014 0.013l-0.029 0.026l-0.026 0.024l-0.017 0.015l-0.039 0 l-0.002 0.002l-0.042 0.04l-0.012 0.011l-0.03 0.03l-0.024 0.023l-0.017 0.017l-0.037 0.037l-0.004 0.004l-0.041 0.041l-0.009 0 l-0.031 0.032l-0.021 0.021l-0.019 0.021l-0.034 0.035l-0.005 0.007l-0.04 0.042c-0.938 1.008-1.644 2.262-2.142 3.7 c19.726 5.1 36.2 9.4 39 10.253c7.503 2.2 7.3 8.3 5.1 19.285l-0.005 0.024c2.821-3.578 5.257-8.839 6.642-14.028 c-1.398-4.124-4.051-7.831-8.789-9.959c-0.717-0.322-1.673-0.705-2.843-1.144c5.22 0.8 9.6 1.4 12.8 1.9 c-0.122-2.879-0.866-5.261-2.421-6.654C458.445 111 455.8 109.8 452.2 108.647L452.192 108.647z M350.696 88.3 c8.174 2 17.8 4.5 27.8 7.258c2.633 1.3 4.9 2.8 6.6 4.476h0.001l0.044 0.045l0.006 0 c0.072 0.1 0.1 0.1 0.2 0.219l0.025 0.027l0.018 0.019l0.042 0.045l0.043 0.045l0.014 0.015l0.028 0.031l0.041 0 l0.042 0.046l0.002 0.002l0.039 0.043l0.04 0.046l0.032 0.036l0.009 0.01l0.04 0.046l0.04 0.046l0.021 0.024l0.019 0 l0.039 0.046l0.039 0.047l0.011 0.012l0.028 0.034l0.038 0.047l0.038 0.046l0 0l0.037 0.047l0.038 0.047l0.026 0.033l0.01 0 l0.037 0.047l0.035 0.047l0.037 0.047l0.035 0.047l0.036 0.047l0.006 0.01l0.028 0.038l0.034 0.047l0.033 0.044l0.002 0 l0.034 0.048l0.033 0.048l0.022 0.031l0.011 0.016l0.033 0.048l0.032 0.048l0.013 0.019l0.021 0.029l0.031 0.047l0.032 0 l0.004 0.006l0.027 0.042l0.03 0.048l0.026 0.041l0.005 0.007l0.03 0.049l0.029 0.048l0.019 0.028l0.012 0.021l0.029 0 l0.029 0.049l0.009 0.017l0.019 0.032l0.028 0.048l0.028 0.049l0.002 0.004l0.025 0.046l0.026 0.049l0.022 0.039l0.005 0 l0.026 0.05l0.04 0.075l0.013 0.022l0.05 0.099l0.007 0.014l0.018 0.036l0.048 0.099l0.024 0.053l0.009 0.017l0.016 0 l0.016 0.033l0.009 0.019l0.022 0.051l0.001 0.002l0.023 0.053l0.007 0.015l0.016 0.039l0.014 0.031l0.009 0.021l0.021 0 l0.001 0.005l0.022 0.053l0.005 0.013l0.017 0.041l0.041 0.108l0.021 0.054l0.004 0.011l0.016 0 c0.462 1.3 0.6 2.7 0.5 4.182c-20.156-2.878-36.996-5.244-39.944-5.569c-7.773-0.856-9.917 4.888-12.11 15.843l-0.021 0.1 c-1.242-4.382-1.474-10.187-0.757-15.526c2.882-3.294 6.772-5.718 11.993-5.857c0.785-0.021 1.816-0.007 3.1 0 c-5.132-1.308-9.462-2.407-12.614-3.198c1.222-2.61 2.826-4.521 4.797-5.208C343.999 88.1 347 88 350.7 88.319z"/> <path id="riflesso-aste-top-sx" fill="#8097A6" d="M345.893 88.158l12.551 15.6 c7.396 1 18 2.5 29.7 4.194c0.09-1.494-0.073-2.904-0.535-4.182l-0.016-0.044l-0.004-0.011l-0.021-0.054l-0.041-0.108 l-0.017-0.041l-0.005-0.013l-0.022-0.053l-0.001-0.005l-0.021-0.049l-0.009-0.021l-0.014-0.031l-0.016-0.039l-0.007-0.015 l-0.023-0.053l-0.001-0.002l-0.022-0.051l-0.009-0.019l-0.016-0.033l-0.016-0.036l-0.009-0.017l-0.024-0.053l-0.048-0.099 l-0.018-0.036l-0.007-0.014l-0.05-0.099l-0.013-0.022l-0.04-0.075l-0.026-0.05l-0.005-0.009l-0.022-0.039l-0.026-0.049l-0.025-0.046 l-0.002-0.004l-0.028-0.049l-0.028-0.048l-0.019-0.032l-0.009-0.017l-0.029-0.049l-0.029-0.048l-0.012-0.021l-0.019-0.028 l-0.029-0.048l-0.03-0.049l-0.005-0.007l-0.026-0.041l-0.03-0.048l-0.027-0.042l-0.004-0.006l-0.032-0.049l-0.031-0.047 l-0.021-0.029l-0.013-0.019l-0.032-0.048l-0.033-0.048l-0.011-0.016l-0.022-0.031l-0.033-0.048l-0.034-0.048l-0.002-0.003 l-0.033-0.044l-0.034-0.047l-0.028-0.038l-0.006-0.01l-0.036-0.047l-0.035-0.047l-0.037-0.047l-0.035-0.047l-0.037-0.047 l-0.01-0.013l-0.026-0.033l-0.038-0.047l-0.037-0.047l0 0l-0.038-0.046l-0.038-0.047l-0.028-0.034l-0.011-0.012l-0.039-0.047 l-0.039-0.046l-0.019-0.021l-0.021-0.024l-0.04-0.046l-0.04-0.046l-0.009-0.01l-0.032-0.036l-0.04-0.046l-0.039-0.043l-0.002-0.002 l-0.042-0.046l-0.041-0.046l-0.028-0.031l-0.014-0.015l-0.043-0.045l-0.042-0.045l-0.018-0.019l-0.025-0.027 c-0.07-0.073-0.142-0.146-0.214-0.219l-0.006-0.006l-0.044-0.045h-0.001c-1.659-1.653-3.926-3.147-6.559-4.476 c-10.013-2.731-19.623-5.251-27.797-7.258C348.887 88.2 347.3 88.1 345.9 88.158z"/> <path id="riflesso-aste-top-dx" fill="#8097A6" d="M452.192 108.6 c-8.324-1.297-18.175-2.673-28.473-4.008c-1.761 0.126-3.422 0.358-4.937 0.716l9.427 11.751c10.996 2.9 19 5 20.9 5.5 c7.503 2.2 7.3 8.3 5.1 19.285l-0.005 0.024c2.821-3.578 5.257-8.839 6.642-14.028c-1.398-4.124-4.051-7.831-8.789-9.959 c-0.717-0.322-1.673-0.705-2.843-1.144c5.22 0.8 9.6 1.4 12.8 1.898c-0.122-2.879-0.866-5.261-2.421-6.654 C458.445 111 455.8 109.8 452.2 108.647z"/> <rect id="carta01" x="46.3" y="26.9" transform="matrix(-0.9026 0.4305 -0.4305 -0.9026 318.206 227.8356)" fill="#FFFFFF" width="174" height="246.1"/> <line class="line" id="line26" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="182.6" y1="239.7" x2="224" y2="220"/> <line class="line" id="line25" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="179.3" y1="232.8" x2="238.6" y2="204.6"/> <line class="line" id="line24" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="176.1" y1="226" x2="235.3" y2="197.7"/> <line class="line" id="line23" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="172.8" y1="219.1" x2="232.1" y2="190.9"/> <line class="line" id="line22" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="169.5" y1="212.2" x2="228.8" y2="184"/> <line class="line" id="line21" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="166.2" y1="205.4" x2="225.6" y2="177.2"/> <line class="line" id="line20" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="163" y1="198.5" x2="222.3" y2="170.3"/> <line class="line" id="line19" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="159.7" y1="191.7" x2="219" y2="163.4"/> <line class="line" id="line18" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="113.7" y1="272.5" x2="142.6" y2="258.7"/> <line class="line" id="line17" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="110.4" y1="265.6" x2="168.8" y2="237.8"/> <line class="line" id="line16" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="107.1" y1="258.8" x2="165.5" y2="231"/> <line class="line" id="line15" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="103.9" y1="251.9" x2="162.3" y2="224.1"/> <line class="line" id="line14" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="100.6" y1="245" x2="159" y2="217.3"/> <line class="line" id="line13" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="97.3" y1="238.2" x2="155.7" y2="210.4"/> <line class="line" id="line12" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="94.1" y1="231.3" x2="152.4" y2="203.5"/> <line class="line" id="line11" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="90.8" y1="224.5" x2="149.2" y2="196.7"/> <line class="line" id="line10" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="62.5" y1="166.6" x2="118.3" y2="140.1"/> <line class="line" id="line09" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="59.3" y1="159.7" x2="187.5" y2="98.7"/> <line class="line" id="line08" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="56" y1="152.9" x2="184.2" y2="91.8"/> <line class="line" id="line07" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="52.7" y1="146" x2="181" y2="85"/> <line class="line" id="line06" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="49.5" y1="139.1" x2="177.7" y2="78.1"/> <line class="line" id="line05" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="46.2" y1="132.3" x2="174.4" y2="71.3"/> <line class="line" id="line04" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="42.9" y1="125.4" x2="171.2" y2="64.4"/> <line class="line" id="line03" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="39.7" y1="118.6" x2="167.9" y2="57.5"/> <line class="line" id="line02" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="36.4" y1="111.7" x2="164.6" y2="50.7"/> <line class="line" id="line01" fill="none" stroke="#CCCCCC" stroke-width="4.5" x1="54.4" y1="82.6" x2="130.7" y2="46.3"/> </svg> </div> 

http://jsfiddle.net/qx7p46f3/4/

By the time the user has scrolled down, the animation has already played because it starts as soon as the page is loaded. I want to trigger it when the svg is in the viewport instead, when the user scrolls to that specific part of the page. How can I do that?

I don't know much about js but I'd rather not use jquery cause it doesn't seem to be the most efficient solution in this case, correct me if I'm wrong.

Answer 1

If you don't know much about javascript, then you might want to consider jQuery since it will be a lot easier for you to accomplish the desired effect.

Using a plugin like jQuery.onScreen you could simply write:

$('svg').onScreen({
  container: window,
  direction: 'vertical',
  toggleClass: 'onScreen',
});

And in your css:

.onScreen .line {
  animation: dash 2s cubic-bezier(0.23, 1, 0.32, 1);;
  -webkit-animation: dash 2s cubic-bezier(0.23, 1, 0.32, 1);;
  -webkit-animation-fill-mode: forwards;
}

Edit: Without jQuery:

var wrapper = document.querySelector('.svg-animation');

window.onscroll = function (event) {
  if (wrapper.getBoundingClientRect().top < 0) {
    wrapper.className = "svg-animation onScreen";
    window.onscroll = null;
  }
}

Please note that this hasn't been tested in all browsers and I can't guarantee full support. Here's a working demo: http://codepen.io/btpoe/pen/caeb32b678521d82144ae1f953c3e332