Need SVG animation to load on scroll

Report · Nov 21, 2018

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!

Report · Nov 22, 2018

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:

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>

Report · Nov 26, 2018

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...

Report · Nov 26, 2018

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.

Report · Nov 26, 2018

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.

Report · Nov 26, 2018

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?

Report · Nov 29, 2018

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>

Here is my full code:

<!DOCTYPE html>

<head>

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

<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]-->

</svg>

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>

Report · Nov 29, 2018

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:

</svg>

</div>

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:

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>

Report · Nov 29, 2018

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.

Adobe Community

Need SVG animation to load on scroll

1 Correct answer