diff --git a/demo/index.html b/demo/index.html index 25e0d01..a6c28cb 100644 --- a/demo/index.html +++ b/demo/index.html @@ -322,7 +322,7 @@

Interactive Animations

Animations can interact with other DOM content by changing a group’s ID attribute to include "toggle-" followed by an ID of an element on the page that should be toggled when that group is clicked. Once clicked, a class of "layersnap-toggle-hide" will be added to the associated element, and a class of "layersnap-toggle-active" will be added to the SVG group. By default, all toggles will receive the hide class, so if you'd like to activate a group from the start, add "toggleactive" to that group's ID.

-
+
+ + + + + ONE + + + + + + TWO + + + + + + THREE + + + + + + FOUR + + + + + + FIVE + + + + + + SIX + + + + + +
+ + + 1 + + + You clicked the number 1! + + + +
+
+ + + 2 + + + You clicked the number 2! + + +
+
+ + + 3 + + + You clicked the number 3! + + +
+
+ + + 4 + + + You clicked the number 4! + + +
+
+ + + 5 + + + You clicked the number 5! + + +
+
+ + + 6 + + + You clicked the number 6! + + +
+
+
+

Building Animations in Adobe Illustrator

diff --git a/dist/layersnap.js b/dist/layersnap.js index 808e1df..c4ec913 100644 --- a/dist/layersnap.js +++ b/dist/layersnap.js @@ -164,6 +164,11 @@ $toggle.removeClass( toggleClass ); $toggle.siblings().filter( "." + toggleTriggerElementClass ).addClass( toggleClass ); + // trigger layersnap on a toggle'd element that has a layersnap class + if( $toggle.is( ".layersnap" ) ){ + $toggle.layersnap(); + } + // activate svg group $el.attr( "class", activeGroupClass ); $el.siblings().attr( "class", "" ); diff --git a/src/layersnap.js b/src/layersnap.js index bb5a0c8..b487b07 100644 --- a/src/layersnap.js +++ b/src/layersnap.js @@ -165,6 +165,11 @@ SVG Build Animations $toggle.removeClass( toggleClass ); $toggle.siblings().filter( "." + toggleTriggerElementClass ).addClass( toggleClass ); + // trigger layersnap on a toggle'd element that has a layersnap class + if( $toggle.is( ".layersnap" ) ){ + $toggle.layersnap(); + } + // activate svg group $el.attr( "class", activeGroupClass ); $el.siblings().attr( "class", "" );