Home/ Documentation/ Pinegrow Interactions

Pinegrow Interactions

Pinegrow Interactions is a powerful visual editor for designing web interactions and animations.

Pinegrow Interactions is an add-on for Pinegrow Web Editor, extending its HTML and CSS editing features with interaction composer and fully-featured animation timeline editor.

Pinegrow Interactions is available in Pinegrow Web Editor 5.9 and higher.

Quick introduction

Read Introduction to Pinegrow Interactions to get an overview of what interactions are and how they are used.

Interactions actions

Check out the guides for interactions actions to learn how to use them.

You can open these guides directly in Pinegrow Web Editor with “Open URL” feature and explore examples of interactions.

Interactions

Use the Interactions action to add one or more interactions to the selected element.

Scroll Scene

Use Scroll Scene action to animate the element as it scrolls in and out of view.

Hide at Start

Add Hide at start to elements that need to be hidden when page loads so that you can reveal them with interactions.

Show at Start

Place Show at start on elements that need to be displayed when page loads so that you can hide them with interactions.

Smooth Scroll

Use the Smooth Scroll action to smooth the scroll wheel scrolling. That makes the Scroll scene animations appear more natural.

Apply to Many

Use this action to copy all interactions actions from this element to other elements on the page.

Topics

Check out detailed guides with embedded examples.

Interactions Panel

Use the Interactions panel to add interactions, scroll scenes and other interactions actions to the selected element.

Timeline Editor

Use the timeline editor to create powerful custom animations.

Animation properties

Overview of animating various element properties with the Timeline editor.

Selecting target elements

Use the Element selector control to select one or more elements on the page.

API

Pinegrow Interactions comes with a simple API that lets you trigger animations from your code.

License

Pinegrow Interactions come with a friendly license that lets you freely use interactions in your projects. Includes FAQ.

Tutorials

Learn about creating rich web interactions with our step-by-step tutorials.

Examples

Above listed guides come with a bunch of embedded examples that you can explore directly in Pinegrow Web Editor.

Here are some additional standalone examples:



Last updated on July 31, 2020 at 4:02 am


Print this article