JSFiddle - React, Tailwind, and code Playground
by aurelien
HTML
<div id="section1">
<p>Header</p>
</div>
<div id="section2">
<p>SVG OUTILS</p>
<svg version="1.1" id="SvgOutils" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1024 275" enable-background="new 0 0 1024 275" xml:space="preserve" style="" class="chart">
<g>
<g>
<path fill="none" stroke="#66223A" stroke-width="2" stroke-miterlimit="10" width="67.8" height="121.6" d="M752.8 149.6 L820.5999999999999 149.6 L820.5999999999999 271.2 L752.8 271.2 Z" class="fffohqCR_0 chart"></path>
<g>
<g>
<path fill="none" stroke="#66223A" stroke-width="2" stroke-miterlimit="10" d="M656.5,39.4L619,29.3L646.4,1.9Z" class="fffohqCR_1 chart"></path>
</g>
<path fill="none" stroke="#66223A" stroke-width="2" stroke-miterlimit="10" d="M650.4,16.7c8.7-3.9,18.7-3.9,27.4,0" class="fffohqCR_2 chart"></path>
<path fill="none" stroke="#66223A" stroke-width="2" stroke-miterlimit="10" d="M633.8,60.7c-3.9-8.7-3.9-18.7,0-27.4" class="fffohqCR_3 chart"></path>
<path fill="none" stroke="#66223A" stroke-width="2" stroke-miterlimit="10" d="M677.8,77.3c-8.7,3.9-18.7,3.9-27.4,0" class="fffohqCR_4 chart"></path>
<path fill="none" stroke="#66223A" stroke-width="2" stroke-miterlimit="10" d="M694.4,33.3c3.9,8.7,3.9,18.7,0,27.4" class="fffohqCR_5 chart"></path>
<path fill="none" stroke="#66223A" stroke-width="2" stroke-miterlimit="10" d="M657.4,32.1c4.3-1.9,9.2-1.9,13.5,0" class="fffohqCR_6 chart"></path>
<path fill="none" stroke="#66223A" stroke-width="2" stroke-miterlimit="10" d="M649.2,53.8c-1.9-4.3-1.9-9.2,0-13.5" class="fffohqCR_7 chart"></path>
<path fill="none" stroke="#66223A" stroke-width="2" stroke-miterlimit="10" d="M670.9,61.9c-4.3,1.9-9.2,1.9-13.5,0" class="fffohqCR_8 chart"></path>
<path fill="none" stroke="#66223A" stroke-width="2" stroke-miterlimit="10" d="M679.1,40.2c1.9,4.3,1.9,9.2,0,13.5" class="fffohqCR_9 chart"></path>
</g>
<g>
<g>
<path fill="none" stroke="#66223A"...CSS
/* JUST FOR TEST */
#section1 {
height: 800px;
}
/* */
/* animation classes */
.mymove-animation {
animation:Anim_draw 3000ms ease-in-out 0ms forwards;}
/* animation classes end */
/* Chrome, Safari, Opera */
@-webkit-keyframes
Anim_draw{100%{stroke-dashoffset:0;}}
/* Other browsers */
@keyframes Anim_draw{100%{stroke-dashoffset:0;}}JavaScript
$( function () {
var charts = $( ".chart" );
/* FUNCTIONS */
// Return boolean when an element is partially visible on screen
function isPartialVisible ( element ) {
var
viewPortHeight = $( window ).height(), // Viewport Height
scrollTop = $( window ).scrollTop(), // Scroll Top
currElementPosY = $( element ).offset().top,
elementHeight = $( element ).height();
return ( ( currElementPosY + elementHeight + elementHeight ) > scrollTop && currElementPosY < ( viewPortHeight + scrollTop ) );
}
// Return boolean when an element is wholly visible on screen
function isWholeVisible( element ) {
var
viewPortHeight = $( window ).height(), // Viewport Height
scrollTop = $( window ).scrollTop(), // Scroll Top
currElementPosY = $( element ).offset().top,
elementHeight = $( element ).height();
return ( currElementPosY > scrollTop && currElementPosY + elementHeight < ( viewPortHeight + scrollTop ) );
}
// Animate chart only when you see it
function animateChartWhenVisible ( chart ) {
for ( var i = 0, count = chart.length; i < count; i++ ) {
if ( isWholeVisible( chart[ i ] ) ) {
$( chart[ i ] ).addClass("mymove-animation");
}
}
}
/* FUNCTIONS END */
// On scroll
$( window ).scroll( function () {
animateChartWhenVisible( charts );
} );
/* On load */
animateChartWhenVisible( charts );
} );