Apply animation effect on button click - JSF - jsf

Question

I found these animations for jsf components : http://www.animatejsf.org/
I tried applying this to a <h:form> from a commandlink click as shown
<h:form id="leftMenu">
Slide
</h:form>
<p:commandLink>
<p:outputLabel> click here
<aj:animate target="leftMenu" type="slideInLeft"/>
</p:outputLabel>
</p:commandLink>
But the animation is not visible on click of the command link. Instead it is animating on web page loading initially only. I wanted to apply this animation on click of either a <p:commandButton> or <p:commandLink>.
Does anyone know how can I achieve this? Any help is appreciated.

Answer 1

Have you already tried:
<p:effect type="clip" event="click" />
Here an example:
<h3 style="margin-top:0">Catalog</h3>
<h:panelGrid columns="4" cellpadding="5">
<p:panel id="blind" header="Blind">
<h:outputText value="click" />
<p:effect type="blind" event="click">
<f:param name="direction" value="'horizontal'" />
</p:effect>
</p:panel>
<p:panel id="clip" header="Clip">
<h:outputText value="click" />
<p:effect type="clip" event="click" />
</p:panel>
<p:panel id="drop" header="Drop">
<h:outputText value="click" />
<p:effect type="drop" event="click" />
</p:panel>
<p:panel id="explode" header="Explode">
<h:outputText value="click" />
<p:effect type="explode" event="click" />
</p:panel>
<p:panel id="fold" header="Fold">
<h:outputText value="doubleclick" />
<p:effect type="fold" event="dblclick" />
</p:panel>
<p:panel id="puff" header="Puff">
<h:outputText value="doubleclick" />
<p:effect type="puff" event="dblclick" />
</p:panel>
<p:panel id="slide" header="Slide">
<h:outputText value="doubleclick" />
<p:effect type="slide" event="dblclick" />
</p:panel>
<p:panel id="scale" header="Scale">
<h:outputText value="doubleclick" />
<p:effect type="scale" event="dblclick">
<f:param name="percent" value="90" />
</p:effect>
</p:panel>
<p:panel id="bounce" header="Bounce">
<h:outputText value="click" />
<p:effect type="bounce" event="click" />
</p:panel>
<p:panel id="pulsate" header="Pulsate">
<h:outputText value="click" />
<p:effect type="pulsate" event="click" />
</p:panel>
<p:panel id="shake" header="Shake">
<h:outputText value="click" />
<p:effect type="shake" event="click" />
</p:panel>
<p:panel id="size" header="Size">
<h:outputText value="click" />
<p:effect type="size" event="click">
<f:param name="to" value="{width: 200,height: 60}" />
</p:effect>
</p:panel>
</h:panelGrid>
<h3>Target</h3>
<p:commandButton type="button" value="Show" style="display:block" icon="ui-icon-image">
<p:effect type="puff" event="click" for="img">
<f:param name="mode" value="'show'" />
</p:effect>
</p:commandButton>
<p:graphicImage id="img" name="demo/images/nature/nature1.jpg" style="display:none"/>
<h:form>
<h3>On Load</h3>
<p:messages id="messages" closable="true">
<p:effect type="pulsate" event="load" delay="500" />
</p:messages>
<p:panel id="panel" header="Message Effects" toggleable="true">
<h:panelGrid columns="2" cellpadding="5">
<p:outputLabel for="text" value="Type:" />
<p:inputText id="text" value="#{effectView.text}" required="true" />
<h:outputText />
<p:commandButton id="submit" value="Echo" actionListener="#{effectView.echo}" update="messages"/>
</h:panelGrid>
</p:panel>
</h:form
>
package org.primefaces.showcase.view.misc;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.context.FacesContext;
#ManagedBean
public class EffectView {
private String text;
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public void echo() {
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("You said:'" + text + "'"));
}
}
http://www.primefaces.org/showcase/ui/misc/effect.xhtml
That's worked fine for me with a commandLink.