GSAP can't detect SVG created in Framer.js?

[venn 24 Likes (Newbie)]

Hi folks,

 

I am creating my prototype in Framer.js and using GSAP to animate the SVG in it.

 

However the SVG inserted aren't detectable. Hence GSAP can't animate it? 

But I check the DOM, they are there. Weird?

 

Framer.js

spinner = new Layer({
	width: 207,
	height: 207,
	backgroundColor: 'transparent'
});

spinner.html = 	'<svg id="dots" xmlns="http://www.w3.org/2000/svg" width="207" height="207" viewBox="0 0 207 207">' + 
'<path id="top" d="M103,1A12,12,0,1,1,91,13,12,12,0,0,1,103,1Z" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="3" fill-rule="evenodd"/>' +
'<path id="right" d="M193,91a12,12,0,1,1-12,12A12,12,0,0,1,193,91Z" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="3" fill-rule="evenodd"/>' +
'<path id="bottom" d="M103,181a12,12,0,1,1-12,12A12,12,0,0,1,103,181Z" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="3" fill-rule="evenodd"/>' +
'<path id="left" d="M13,91A12,12,0,1,1,1,103,12,12,0,0,1,13,91Z" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="3" fill-rule="evenodd"/>' +
'</svg>';

GSAP

function getSpinnerTimeline(){
	var tl = new TimelineMax(); 

	tl.to('#dots', 1, {rotation: 90})
	  .to('#top', 1, {y: 10, repeat: 1, yoyo: true}, 0)
	  .to('#bottom', 1, {y: -10, repeat: 1, yoyo: true}, 0)
	  .to('#left', 1, {x: 10, repeat: 1, yoyo: true}, 0)
	  .to('#right', 1, {x: -10, repeat: 1, yoyo: true}, 0);

	 return tl;
}

var mtl = new TimelineMax();

mtl.add(getSpinnerTimeline());

mtl.timeScale(2.5);
mtl.play();

If I insert my SVG into HTML directly, it works like a charm. 

If I insert my SVG using jQuery, it works like a charm.

 

But when I combine Framer.js + GSAP it doesn't work.

Here I attach a screenshot of the generated DOM.

 

The SVG with the id(s) are there.

 

[venn 24 Likes (Newbie)]

I created a PEN to demonstrate this problem.

 

See the Pen wMgXEX by vennsoh (@vennsoh) on CodePen

 

It seems that GSAP runs the code before the DOM is created or something?

[OSUblake 18,474 Likes (Superhero)]

I don't know anything about Framer.js, but it looks like it's creating your DOM elements async. You need to go find out if there is an event for when your layer is added to the page, and then use that callback to run any GSAP code. I simulate it here by waiting 1 second...

See the Pen XXpBKd?editors=001 by osublake (@osublake) on CodePen

[venn 24 Likes (Newbie)]

Alright. Solved it.

 

See the Pen MKJqrO by vennsoh (@vennsoh) on CodePen

 

The Framer document has specifically mentioned this.

 

To reliably get a reference to a DOM element, use layer.querySelector or layer.querySelectorAll.

http://framerjs.com/docs/#layer.html