Highlighted

Need SVG animation to load on scroll

Contributor ,
Nov 21, 2018

Copy link to clipboard

Copied

Hey Everyone,

I have an animation I'm trying to get to load when scrolled to that portion of the page. I've dded some script and a class to my div using revealOnScroll. Would this be the correct script to use?

Here is a working link.

http://offers.premierinc.com/Scroll-Test_Scroll-Test.html

Thanks for any help!

Logic says remove the below function from your EVO js file, which is right at the start of the file, then use the well documented script for checking if a container comes into the viewport in your page and insert the function you removed from the EVO js file were it says -

INSERT THE ABOVE FUNCTION HERE

(see below)

See if that works.

Remove the below from EVO js file:

$(function(){

$("#doughnutChart").drawDoughnutChart([

{ title: "Tokyo",         value : 120,  color: "#003b49" },

{ title: "San Francisco", value:  9,   color: "#0091b3" },

{ title: "New York",      value:  6,   color: "#8dc7d8" },

{ title: "London",        value : 120,   color: "#7a979f" },

{ title: "Berlin",        value : 40,   color: "#ffc627" }

]);

});

Insert the above function into the script below (which should go in your page inplace of the other one you currently have) to check when a container comes into viewport:

<script>

function isInView(elem)

{

var docViewTop = $(window).scrollTop();

var docViewBottom = docViewTop + $(window).height() - 200;

var elemTop = $(elem).offset().top;

return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));

}

$(window).scroll(function(){

if (isInView($('#doughnutChart'))) {

INSERT THE ABOVE FUNCTION HERE

$(window).off('scroll');

}

})

</script>

Views

1.4K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Need SVG animation to load on scroll

Contributor ,
Nov 21, 2018

Copy link to clipboard

Copied

Hey Everyone,

I have an animation I'm trying to get to load when scrolled to that portion of the page. I've dded some script and a class to my div using revealOnScroll. Would this be the correct script to use?

Here is a working link.

http://offers.premierinc.com/Scroll-Test_Scroll-Test.html

Thanks for any help!

Logic says remove the below function from your EVO js file, which is right at the start of the file, then use the well documented script for checking if a container comes into the viewport in your page and insert the function you removed from the EVO js file were it says -

INSERT THE ABOVE FUNCTION HERE

(see below)

See if that works.

Remove the below from EVO js file:

$(function(){

$("#doughnutChart").drawDoughnutChart([

{ title: "Tokyo",         value : 120,  color: "#003b49" },

{ title: "San Francisco", value:  9,   color: "#0091b3" },

{ title: "New York",      value:  6,   color: "#8dc7d8" },

{ title: "London",        value : 120,   color: "#7a979f" },

{ title: "Berlin",        value : 40,   color: "#ffc627" }

]);

});

Insert the above function into the script below (which should go in your page inplace of the other one you currently have) to check when a container comes into viewport:

<script>

function isInView(elem)

{

var docViewTop = $(window).scrollTop();

var docViewBottom = docViewTop + $(window).height() - 200;

var elemTop = $(elem).offset().top;

return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));

}

$(window).scroll(function(){

if (isInView($('#doughnutChart'))) {

INSERT THE ABOVE FUNCTION HERE

$(window).off('scroll');

}

})

</script>

Views

1.4K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 21, 2018 0
LEGEND ,
Nov 22, 2018

Copy link to clipboard

Copied

Logic says remove the below function from your EVO js file, which is right at the start of the file, then use the well documented script for checking if a container comes into the viewport in your page and insert the function you removed from the EVO js file were it says -

INSERT THE ABOVE FUNCTION HERE

(see below)

See if that works.

Remove the below from EVO js file:

$(function(){

$("#doughnutChart").drawDoughnutChart([

{ title: "Tokyo",         value : 120,  color: "#003b49" },

{ title: "San Francisco", value:  9,   color: "#0091b3" },

{ title: "New York",      value:  6,   color: "#8dc7d8" },

{ title: "London",        value : 120,   color: "#7a979f" },

{ title: "Berlin",        value : 40,   color: "#ffc627" }

]);

});

Insert the above function into the script below (which should go in your page inplace of the other one you currently have) to check when a container comes into viewport:

<script>

function isInView(elem)

{

var docViewTop = $(window).scrollTop();

var docViewBottom = docViewTop + $(window).height() - 200;

var elemTop = $(elem).offset().top;

return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));

}

$(window).scroll(function(){

if (isInView($('#doughnutChart'))) {

INSERT THE ABOVE FUNCTION HERE

$(window).off('scroll');

}

})

</script>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2018 0
Contributor ,
Nov 26, 2018

Copy link to clipboard

Copied

osgood!!! Excellent!! That did the trick. Saving this to my code snippet library!

The animation is being placed as a code block on a landing page built in iON. I think you have heard me speak of this before. Before I ask them why this is happening would you have an idea of why the animation would be duplicating down the page?

Check it out...

click the red box "Actionable Business Intelligence Capabilities" and you will see the animation.

Physician Enterprise Collaborative | Premier

I'm also noticing that the text slightly moves when scaled. It has absolute positioning...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 26, 2018 0
LEGEND ,
Nov 26, 2018

Copy link to clipboard

Copied

kineticcreative123  wrote

osgood!!! Excellent!! That did the trick. Saving this to my code snippet library!

The animation is being placed as a code block on a landing page built in iON. I think you have heard me speak of this before. Before I ask them why this is happening would you have an idea of why the animation would be duplicating down the page?

I do know but Im not quite sure how to prevent that happening. The $(window).off('scroll'); in the script should only allow the window scroll function to fire once but it doesnt seem to be working and consequently every time the page is scrolled another animation gets added to the page.

Thats obviously NOT happening on your test page - the animation is only firing once:

http://offers.premierinc.com/Scroll-Test_Scroll-Test.html

So Im going to have a look and see why its not working on your actual page.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 26, 2018 0
LEGEND ,
Nov 26, 2018

Copy link to clipboard

Copied

Unfortuantely the real page where you want the animation to appear the code is a real mess and its impossible for me to sort out. This will work if the code is relatively clean, as shown on your test page - at the moment the code is a train-wreck and I think as a concequence that is why the window scroll is firing again and again. You have multiple <body><html> tag etc its not good.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 26, 2018 0
Contributor ,
Nov 26, 2018

Copy link to clipboard

Copied

OK. Ya... The finished pages on these things are a code train wreck. All generated by the builder. I tried a test page with a simple image and the animation and it works in the same builder.

It seems that the js for the animation is conflicting with the layerslider js on that page. If you look below farther down on the page there is a slider thats not rendering (below the quote section). If you try any other page on the site the layerslider works that doesn't have the circle animation.

How could I see what is conflicting or separate the two so they don't conflict?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 26, 2018 0
Contributor ,
Nov 29, 2018

Copy link to clipboard

Copied

Hi again,

Well long story short I ended up getting rid of a slider and the js that went with it to remove the conflict. So it's good now.

I have taken your js code you gave me to animate another svg and am trying to get this to animate on scroll as well and am having no luck. I gave an id to the animation and used that same id in the script you provided. I added a "checkmark" id to <circle. How would you reuse your js? Instead of a div it's using this:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">

  <circle id="checkmark" class="path circle" fill="none" stroke="#73AF55" stroke-width="6" stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1"/>

  <polyline class="path check" fill="none" stroke="#73AF55" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" points="100.2,40.2 51.5,88.8 29.8,67.5 "/>

</svg>

Here is my full code:

<!DOCTYPE html>

<html lang="en" >

<head>

  <meta charset="UTF-8">

  <title>Animated Check Mark & Cross</title>

 

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>

svg {

  width: 100px;

  display: block;

  margin: 40px auto 0;

}

.path {

  stroke-dasharray: 1000;

  stroke-dashoffset: 0;

}

.path.circle {

  -webkit-animation: dash 0.9s ease-in-out;

  animation: dash 0.9s ease-in-out;

}

.path.line {

  stroke-dashoffset: 1000;

  -webkit-animation: dash 0.9s 0.35s ease-in-out forwards;

  animation: dash 0.9s 0.35s ease-in-out forwards;

}

.path.check {

  stroke-dashoffset: -100;

  -webkit-animation: dash-check 0.9s 0.35s ease-in-out forwards;

  animation: dash-check 0.9s 0.35s ease-in-out forwards;

}

@-webkit-keyframes dash {

  0% {

    stroke-dashoffset: 1000;

  }

  100% {

    stroke-dashoffset: 0;

  }

}

@keyframes dash {

  0% {

    stroke-dashoffset: 1000;

  }

  100% {

    stroke-dashoffset: 0;

  }

}

@-webkit-keyframes dash-check {

  0% {

    stroke-dashoffset: -100;

  }

  100% {

    stroke-dashoffset: 900;

  }

}

@keyframes dash-check {

  0% {

    stroke-dashoffset: -100;

  }

  100% {

    stroke-dashoffset: 900;

  }

}</style>

 

</head>

<body>

 

<!--[if lte IE 9]>

  <style>

    .path {stroke-dasharray: 0 !important;}

  </style>

<![endif]-->

<div style="height:600px;width:100%;"></div>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">

  <circle id="checkmark" class="path circle" fill="none" stroke="#73AF55" stroke-width="6" stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1"/>

  <polyline class="path check" fill="none" stroke="#73AF55" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" points="100.2,40.2 51.5,88.8 29.8,67.5 "/>

</svg>

<p style="text-align: center;margin: 20px 0 60px;font-size:2em;color: #73AF55;">YES!</p>

<script>

function isInView(elem)

{

var docViewTop = $(window).scrollTop();

var docViewBottom = docViewTop + $(window).height() - 200;

var elemTop = $(elem).offset().top;

return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));

}

$(window).scroll(function(){

if (isInView($('#checkmark'))) {

$(window).off('scroll');

}

})

</script>

</body>

</html>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 29, 2018 0
LEGEND ,
Nov 29, 2018

Copy link to clipboard

Copied

Step 1:

Wrap your svg in a div with the class 'circle_check_animation' (see below in red) and alter the class names for the svg path as shown below in red:

<div class="circle_check_animation">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">

<circle id="checkmark" class="mycircle path" fill="none" stroke="#73AF55" stroke-width="6" stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1"/>

<polyline class="mycheck path" fill="none" stroke="#73AF55" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" points="100.2,40.2 51.5,88.8 29.8,67.5 "/>

</svg>

</div>

<!-- end circle_check_animation -->

Step 2:

Add a css selector to your css styles to give the 'circle_check_animation' <div> an opacity of 0 on page load:

.circle_check_animation {

opacity: 0;

}

Step 3:

Be sure to include the jquery library link as below and add the code in red below to the scroll script:

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>

<script>

function isInView(elem)

{

var docViewTop = $(window).scrollTop();

var docViewBottom = docViewTop + $(window).height() - 200;

var elemTop = $(elem).offset().top;

return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));

}

$(window).scroll(function(){

if (isInView($('.circle_check_animation'))) {

$('.circle_check_animation').css('opacity','1.00');

$('.mycircle').addClass('circle');

$('.mycheck').addClass('check');

$(window).off('scroll');

}

})

</script>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 29, 2018 0
Contributor ,
Nov 29, 2018

Copy link to clipboard

Copied

Nice! thank you so much! I will be sure to keep this for reuse. This is great. Say for instance if I wanted to use more than one anim farther down the page... Could I use the same class name with just the one script?

This is awesome.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 29, 2018 0