Site URL: https://trumpet-tomato-5xjg.squarespace.com/
Hi, I'm working with Vivus animations (https://maxwellito.github.io/vivus-instant/). It was surprisingly easy to add the animations to my site, but the problem I'm having is that they are midway down my page and the animation starts as soon as the page loads. I'd like to add some code so that the animations will begin once I've scrolled down enough for them to be in the viewport.
If you're unfamiliar with Vivus, here's the process for using it: create a stroke-based svg, load it into the vivus tool (link above), adjust animation settings, download animation file, open animation file in Notepad++, copy code, paste into Squarespace code block. Pretty simple. For the sake of showing something, this is an example of the code for a very simple animation - a line. This is for an animation starting automatically (on page load).
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 44.56 74.56" style="" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#BE1E2D;stroke-width:9;stroke-miterlimit:10;}
</style>
<path class="st0 xhirPvUK_0" d="M9.09,7.4L35.84,64.37"></path>
<style data-made-with="vivus-instant">.xhirPvUK_0{stroke-dasharray:63 65;stroke-dashoffset:64;animation:xhirPvUK_draw 3000ms ease 0ms forwards;}@keyframes xhirPvUK_draw{100%{stroke-dashoffset:0;}}@keyframes xhirPvUK_fade{0%{stroke-opacity:1;}94.44444444444444%{stroke-opacity:1;}100%{stroke-opacity:0;}}</style></svg>
I feel like adding some code here would do the trick, but it's a little over my head. Also, for completeness, there is also an option to manually trigger the animation and here's what that code looks like for the same animation:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 44.56 74.56" style="" xml:space="preserve" class="">
<style type="text/css">
.st0{fill:none;stroke:#BE1E2D;stroke-width:9;stroke-miterlimit:10;}
</style>
<path class="st0 xhirPvUK_0" d="M9.09,7.4L35.84,64.37"></path>
<style data-made-with="vivus-instant">.xhirPvUK_0{stroke-dasharray:63 65;stroke-dashoffset:64;}.start .xhirPvUK_0{animation:xhirPvUK_draw 3000ms ease 0ms forwards;}@keyframes xhirPvUK_draw{100%{stroke-dashoffset:0;}}@keyframes xhirPvUK_fade{0%{stroke-opacity:1;}94.44444444444444%{stroke-opacity:1;}100%{stroke-opacity:0;}}</style></svg>
It adds a ".start" and some more code...
If anyone could give me some guidance on how this might be accomplished, it would be much appreciated.
