Effects

Effect is simply used as a child component of its effect target.

Blind
click
Clip
click
Drop
click
Explode
click
Fold
doubleclick
Puff
doubleclick
Slide
doubleclick
Scale
doubleclick
Bounce
click
Pulsate
click
Shake
click
Size
click

Source

<h:panelGrid columns="4">

    <p:panel header="Blind">
        <h:outputText value="click" />
        <p:effect type="blind" event="click">
            <f:param name="direction" value="'horizontal'" />
        </p:effect>
    </p:panel>

    <p:panel header="Clip">
        <h:outputText value="click" />
        <p:effect type="clip" event="click" />
    </p:panel>

    <p:panel header="Drop">
        <h:outputText value="click" />
        <p:effect type="drop" event="click" />
    </p:panel>

    <p:panel header="Explode">
        <h:outputText value="click" />
        <p:effect type="explode" event="click" />
    </p:panel>

    <p:panel header="Fold">
        <h:outputText value="doubleclick" />
        <p:effect type="fold" event="dblclick" />
    </p:panel>

    <p:panel header="Puff">
        <h:outputText value="doubleclick" />
        <p:effect type="puff" event="dblclick" />
    </p:panel>

    <p:panel header="Slide">
        <h:outputText value="doubleclick" />
        <p:effect type="slide" event="dblclick" />
    </p:panel>

    <p:panel header="Scale">
        <h:outputText value="doubleclick" />
        <p:effect type="scale" event="dblclick">
            <f:param name="percent" value="90" />
        </p:effect>
    </p:panel>

    <p:panel header="Bounce">
        <h:outputText value="click" />
        <p:effect type="bounce" event="click" />
    </p:panel>

    <p:panel header="Pulsate">
        <h:outputText value="click" />
        <p:effect type="pulsate" event="click" />
    </p:panel>

    <p:panel header="Shake">
        <h:outputText value="click" />
        <p:effect type="shake" event="click" />
    </p:panel>

    <p:panel 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>