Lancement de l'animation d'un fichier SVG chargé au scroll

Bonjour,

Je cherche à charger une animation svg au scroll.

Concernant le chargement de l'image, j'ai trouvé la solution via lazysizes.
Lorsque j'arrive au niveau de l'image, l'image png se remplace bien par le svg.
Par contre il ne s'anime pas. J'ai une erreur javascript me disant :
"Uncaught TypeError: Cannot read property 'getTotalLength' of null"

Or si le svg est placé directement dans le html, l'animation se passe correctement.
Le javascript aurait-il du mal à accéder au svg, vu que je le charge via "data-src"?

Voici le code hml et javascript main.js:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
	<script
	  src="https://code.jquery.com/jquery-3.2.1.js"
	  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
	  crossorigin="anonymous">
	</script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 
	<div>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In scelerisque justo ut vulputate dignissim. Aenean pulvinar, dui nec ullamcorper egestas, sem felis dignissim ipsum, et mollis diam dolor eget eros. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent semper varius mauris nec scelerisque. Nullam aliquam interdum molestie. Quisque leo lectus, rutrum id metus sed, semper euismod erat. Proin eu velit eget nunc gravida faucibus. Donec id venenatis arcu, quis sagittis tortor. Nunc id est nisl. Nunc pellentesque cursus rutrum. Ut feugiat mi ut justo porta convallis. Donec suscipit sagittis leo venenatis luctus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In scelerisque justo ut vulputate dignissim. Aenean pulvinar, dui nec ullamcorper egestas, sem felis dignissim ipsum, et mollis diam dolor eget eros. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent semper varius mauris nec scelerisque. Nullam aliquam interdum molestie. Quisque leo lectus, rutrum id metus sed, semper euismod erat. Proin eu velit eget nunc gravida faucibus. Donec id venenatis arcu, quis sagittis tortor. Nunc id est nisl. Nunc pellentesque cursus rutrum. Ut feugiat mi ut justo porta convallis. Donec suscipit sagittis leo venenatis luctus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In scelerisque justo ut vulputate dignissim. Aenean pulvinar, dui nec ullamcorper egestas, sem felis dignissim ipsum, et mollis diam dolor eget eros. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent semper varius mauris nec scelerisque. Nullam aliquam interdum molestie. Quisque leo lectus, rutrum id metus sed, semper euismod erat. Proin eu velit eget nunc gravida faucibus. Donec id venenatis arcu, quis sagittis tortor. Nunc id est nisl. Nunc pellentesque cursus rutrum. Ut feugiat mi ut justo porta convallis. Donec suscipit sagittis leo venenatis luctus.</p>
 
 
	</div>
 
	<div>
		<iframe src="svg-statique.png" data-src="test.svg" class="lazyload" data-expand="-300" frameborder="0" allowfullscreen></iframe>
	</div>
 
	<script src="lazysizes.js"></script>
	<script src="main.js"></script>
 
</body>
</html>

Et le code javascript:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
$(document).ready(function(){
	var tl = new TimelineMax();
 
	function onComplete(){
 
		$('.fenetre').addClass('cls-11');
		tl.from($('.cls-11'),1.5,{
			opacity:0,
		})
		var length = document.querySelector('path:last-child').getTotalLength(); /*-->C'est ici que ça coince*/
		tl.set($(".cls-2"), {className: '+=cls-21'});
		tl.set('path:last-child',{
		  strokeDasharray: length
		});
		tl.from('path:last-child', 2,{
		  strokeDashoffset: length
		})
	};
 
	tl.from('.fenetre',1,{
		transformOrigin:"center",
		scale:0,
		opacity:0,
		ease:Power1.easeOut,
		onComplete: onComplete,
	});
 
});

Merci