javascript - Animating multiple svg objects using snap.js -
I am trying to create an SVG animation but I am running into issues that make all the elements live together.
Now every SVG element is animate individually, but I would like to capture all of the # 3 rectangles to capture the data-path-hover of my parents and animate together when I am # I'll hover over the grid.
& lt; Section id = "grid" class = "grid cleanfix" & gt; & Lt; Span class = "top" data-path-hover = "M280.877,0H39.123C17.516,0,0,17.516,0,39.123v39.123H39.123H241.755H 320V23.123C 320,17.516,302.484, 0,280.877, 0z "& gt; & Lt; Svg view box = "0 0 320 80" preserveAspectRatio = "none" & gt; & Lt; Path D = "M280,0C299.5,0,56.245,0,39.123,0S0,0,0,0v78.245 H 13.123 H241 755H320V0C320,0,260.5,0,280,0z" /> & Lt; / Svg & gt; & Lt; / Span & gt; & Lt; / Section & gt; (Function () {function init () {var speed = 330, easing = mina.backout; [] .slice.call (document.querySelectorAll ('span')) .for eca (function (l) {var s = snap (El.querySelector ('svg')), path = s.select ('path'), pathConfig = {to: path.attr ('d'), for: el.getAttribute ('data-path-hover' ); El.addEventListener ('mouseenter', function () {path.animate ({'path': pathConfig.to}, speed, easy);}); el.addEventListener ('mouseleave', function () {path} .animate ({'path': path config), speed, easy);});})}}} init ();}) ();
This is my current code, any help would be greatly appreciated!
Comments
Post a Comment