Use the Element selector control to select one or more elements on the page.
The selector control is used to select target elements in Interactions action, Scroll scene action, Timeline editor and Apply to many action.
Getting familiar with how elements can be targeted will let you create efficient and reusable interactions.
One or more elements on the page can be selected with the selector control.
The element selector works in three modes:
- Selecting a descendant of the current element
- Selecting any element on the page
- Using custom selector
The control generates a selector that targets the selected elements. The selector is similar to a CSS selector with some enhancements, described below.
Selecting a descendant of the current element
All descendants of the current element are listed in a structured dropdown.
To select a particular element click on it in the dropdown:
To select all elements with that tag name or classes, hover over the submenu indicator and select one of the selectors:
Targeting descendants generates the simplest selectors and keeps interaction modular.
For example, we can have an interaction that animates all
<p> elements within the main element, selected with the selector that targets
<p> descendants. Then, we can copy or apply this interaction to other elements and it will work there without changes.
If possible, setup interactions in such a way that the action is set on the element that contains all different subparts of the interaction.
For example, use
div.popup as the interaction target and then animate this element and its sub-elements with a custom animation.
Selecting any element on the page
Sometimes we need to select elements that are not part of the element where the interaction is defined.
For example, we want to animate the Open popup button that lies outside of the
Use Select on the page to open a element selector popup:
As long as this popup is open, you can click on any element on the page to select it as a target. Hold down CTRL (CMD on Mac) to select multiple elements.
Click on Done to use the selection.
Edit the custom selector
Use Edit selector to edit the selector directly.
The selector syntax is similar to CSS selectors, with a couple of powerful extensions.
Select the main element
this to select the main element. In most cases,
this is the same as not selecting any target at all.
Select descendants of the main element
By default, the selector targets elements within the main element.
For example, if we’re selecting the target for the Interactions action that is placed on the
div.popup, the selector will search for matching elements inside the
So, if the selector
.close will target only elements with the close class inside the
div.popup, not any
.close element on the page.
Select any element on the page
Prefix the selector with the
$ sign to target any element on the page.
$.close would target all .close elements on the page, not just those inside
Select the closest matching element
Prefix the selector with
^ to target the closest matching element, either the element itself or its first matching parent.
For example, when adding a close interaction to the close button inside the popup, use
^.popup to target the parent popup. We could use
$.popup, but that would target all .popups on the page, not just the one inside which the close button is pressed.
Note that this will also match the current element if it matches the selector. For example, doing
<div>will return this div.
The parent selector has another useful feature:
Select a descendant of the closest parent.
Let’s say you want to animate all
<p> elements inside the
.popup when the .close button is pressed. You can target them with
This keeps the interaction self-contained and reusable.
Pinegrow adds a group of selector extensions that allow creating powerful interactions, for example iterating through a group of elements.
Extensions have the syntax
->extension with optional parameter such as
->extension(parameter) and are appended to the base selector, for example
Get the first N elements
<base selector>->first to get the first element that matches the base selector. Add a number parameter to get the first N elements, for example
p.lead->first(2) returns the first two lead paragraphs.
Get the last N elements
Similarly, using the
->last(N) extension will return the last N elements that match the base selector.
Get the next element
<base selector>->next to get the next sibling element of the first element that matches the base selector.
For example, if the layout is:
p->next will return
p.second->next will return
p.third->next will return
Add the parameter
(<selector>) to take the group of elements that match the base selector, look for the first element that matches the
<selector> and return the next element.
For the layout:
p->next(.current) will return
So, what is the difference between using
Imagine a layout:
p.current->next will return the
p->next(.current) will return the
Getting the previous element
->previous to return the previous element. The syntax is the same as the