Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
venn

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

Recommended Posts

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.

 

post-31825-0-17987000-1451888746_thumb.jpg

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×