Thanks Chris & JumpStart, with your help I was able to get this CSS animation working, using JavaScriptSupport in combination with RequireJS.
Below is the code, for anyone else wishing to do the same. **The CSS** .open-section{ transition:0s; transform: rotate(90deg); } .close-section{ transition:0s; transform: rotate(-90deg); } .accordion.active .open-section { transition:1.0s; transform: rotate(0deg); } .accordion.active .close-section { transition:1.0s; transform: rotate(0deg); } The animation occurs simply by adding one of the latter two classes to its former counterpart. The first two display the button 90 degrees offset (hence the animation). **The Component's Java Code** public void afterRender(){ //Invoke client-side javascript to rotate the 'accordion' helm for this component/zone javaScriptSupport.require("activate-helm").with("userAccordion"); } **The RequireJS Script** define(["jquery"], function($){ return function(accordionId){ var element = document.getElementById(accordionId); element.classList.add("active"); } }) The page contains multiple zones, and the above animates the button within a zone that gets refreshed. The only glitch is that occasionally, especially with Firefox browser, the button jumps rather than rotates to it's final position. I suspect the browser may be prematurely acting on the 'active' version of the CSS class, before displaying the button in its initial 90 degree offset position. I'm not quite sure yet how to remedy this. I think having the RequireJS script wait a while would be a bit of a hack. Regards, Chris. --------------------------------------------------------------------- To unsubscribe, e-mail: users-unsubscr...@tapestry.apache.org For additional commands, e-mail: users-h...@tapestry.apache.org