Search the Community
Showing results for tags 'framerjs'.
Found 1 result
-
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.
