SVG Icon Timing

[ronin]

Hi,

I was just wondering if there was a way to make the svg icons start animating on page load for the ones on our home page. Currently you have to scroll down before they start, so the design loses impact on load.

Thanks

[Swift Ideas – Ed]

Hi @ronin

In the icon box options, there is the “Animate SVG Icon” option – turn that off?

– Ed

[ronin]

Thanks Ed, but is it not possible to have the icon animate as soon as the page loads? I love the animation, it’s why we chose the SVG icons.

[Rui Guerreiro – SUPPORT]

I just forward to Ed so he can reply.

-Rui

[ronin]

Hi, I was wondering if Ed was able to let me know of a possible solution to this?

[Rui Guerreiro – SUPPORT]

I just forward it to Ed.

-Rui

[Swift Ideas – Ed]

Hi @ronin,

Please can you try adding this to the Custom JS box:

jQuery(document).ready(function() {
	SPB.svgIconAnimate = {
		init: function () {
			jQuery('.sf-svg-icon-animate').each(function() {
				var thisSVG = jQuery(this),
					svg_id = thisSVG.attr('id'),
					file_url = thisSVG.data('svg-src'),
					anim_type = thisSVG.data('anim-type');
					//path_timing = thisSVG.data('path-timing'),
					//anim_timing = thisSVG.data('anim-timing');

				if ( thisSVG.hasClass('animation-disabled') ) {
					new Vivus(svg_id, {
							duration: 1,
							file: file_url,
							type: anim_type,
							start: autostart,
							selfDestroy: true,
							onReady: function(svg) {
								svg.finish();
							}
						});
				} else {
					new Vivus(svg_id, {
						duration: 200,
						file: file_url,
						type: anim_type,
						start: autostart,
						pathTimingFunction: Vivus.EASE_IN,
						animTimingFunction: Vivus.EASE_OUT,
					});
					setTimeout(function() {
						thisSVG.css('opacity', 1);
					}, 50);
				}
			});
		}
	};
});

– Ed

[ronin]

Thanks Ed, I tried that but it seems to have stopped our menu from working (the drop down doesn’t work). I’ve already got the custom js:
jQuery(document).ready(function() {
jQuery(document).on(‘click’, ‘.menu-div a’, function() {
jQuery(this).parents(‘.mega-sub-menu’).hide(400);
});
});

Does your above code need to go inside there somehow?

[Swift Ideas – Ed]

Will do some testing on this and get back to you asap.

Thanks,

– Ed

[ronin]

Wonderful, thanks so much.

[Swift Ideas – Ed]

Please try this:

jQuery(document).ready(function() {
	SPB.svgIconAnimate = {
		init: function () {
			jQuery('.sf-svg-icon-animate').each(function() {
				var thisSVG = jQuery(this),
					svg_id = thisSVG.attr('id'),
					file_url = thisSVG.data('svg-src'),
					anim_type = thisSVG.data('anim-type');
					//path_timing = thisSVG.data('path-timing'),
					//anim_timing = thisSVG.data('anim-timing');

				if ( thisSVG.hasClass('animation-disabled') ) {
					new Vivus(svg_id, {
							duration: 1,
							file: file_url,
							type: anim_type,
							start: 'autostart',
							selfDestroy: true,
							onReady: function(svg) {
								svg.finish();
							}
						});
				} else {
					new Vivus(svg_id, {
						duration: 200,
						file: file_url,
						type: anim_type,
						start: 'autostart',
						pathTimingFunction: Vivus.EASE_IN,
						animTimingFunction: Vivus.EASE_OUT,
					});
					setTimeout(function() {
						thisSVG.css('opacity', 1);
					}, 50);
				}
			});
		}
	};
});

Tested that locally and it worked.

Thanks,

– Ed

[ronin]

Thanks Ed, appreciate it. I’m still getting the same error though (they don’t automatically animate and the menu stops working).

[Swift Ideas – Ed]

What error are you getting? As long as you add the code above independently from the other code (add a few lines between) should be no issue.

– Ed

[ronin]

Hi Ed,

I’m getting this error, don’t know if it’s related:

Uncaught ReferenceError: SPB is not defined
at HTMLDocument.<anonymous> ((index):1293)
at i (jquery.js?ver=1.12.4:2)
at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
at Function.ready (jquery.js?ver=1.12.4:2)
at HTMLDocument.K (jquery.js?ver=1.12.4:2)

However the error I meant is just that the svg icons still don’t animate on load, and it stops the drop down menu from working. I have cleared the website’s cache as well as multiple browsers cache and it’s still looking the same.

[Swift Ideas – Ed]

Hi @ronin

Looks like your SF plugin version is behind – can you check that?

– Ed