What’s new in Interactions 2.0? | Pinegrow Web Editor
Home/ Documentation/ Pinegrow Interactions/ What’s new in Interactions 2.0?

What’s new in Interactions 2.0?

See all the cool features in the latest Pinegrow Interactions update.

This update has not yet been released.

This guide describes only the changes in the latest release of Interactions. If you are not familiar with Pinegrow Interactions please take a look at the Interactions overview first.

Overview

Pinegrow Interactions 2.0 let you visually create complex web interactions like sliders, tooltips, complex scroll animations, same-page navigation with soft scroll and history states and more – all without coding and without dependancies on any other JavaScript library.

Here is an example of a custom slider, created 100% with Interactions 2.0, without any custom code. Notice these details:

  • Horizontal infinite slider, the first slide is cloned and added to the end.
  • Slider automatically moves every 5 seconds, but only if user is not active over the slider.
  • Pagination items are dynamically created for every slide and animate to show the current slide. They are also used as navigation.
  • Navigation buttons can be used to move the slider.
  • Pinegrow Interactions can be integrated into any project, be it based on plain HTML, Bootstrap, Tailwind CSS or anything else.

Slide 1

Slide 2

Slide 3

Here is another example, custom tooltips using:

  • Cloning a tooltip template to display a tooltip.
  • Dynamically positioning the new element in relation to the target.
  • Using variables to use a attribute value as the content of the tooltip.
  • Having different animations depending on the position.
  • Using automatic position or controlling it with a data attribute on the tooltip target.
${data-my-tooltip}

I have a very cool tooltip.

And I have a different tooltip.

The position of my tooltip is…

There are no breaking changes. That means that all your existing interactions will work without any changes. The only feature that was dropped is animating class changes (see migration notes at the bottom).

Pinegrow can now generate a JavaScript file that adds the interactions to target elements. This is a convenient way to add interactions to existing projects or to create reusable libraries.

And the cherry on top of the Interactions 2.0 cake: file size of Interactions JavaScript library that needs to be included in the page was reduced from X to Y, or from X to Y when gzipped.

GSAP3 and ScrollTrigger

GreenSock GSAP library that powers Pinegrow Interactions was upgraded to the latest GSAP version 3.5.

ScrollMagic was replaced with GreenSock’s ScrollTrigger. As a result, Scroll Scene action is now much more powerful.

Interactions action

Improvements of the Interactions action:

Named interactions

Individual interactions can now be named and these names are then used to reference the animation, instead of using indexes like 1, 2 and so on.

Stop other animations -> Animations to stop can use names instead of listing animation indexes you can now list interaction names.

Using “-” to play animations in reverse

In addition when playing the animation from another animation or Scroll Scene the animation name and index can be prefixed with the minus sign to play them in reverse.

New events

Two new events were added:

Timer will play the animation every N seconds. This can be combined with the trigger condition to play the animation only if the target element has or doesn’t have a certain class.

Example of use is auto-playing sliders, but only if there is no user interaction on the slider.

No event is used to just define the animation and play it later, from transforms or Scroll scene pagination.

Recreate on play

Checking this option will recreate the animation every time it is played. This is useful if target elements of the animation change dynamically, for example if they are dynamically added or removed from the page. Recreating the animation also evaluates all its targets at the time the animation is played.

Scroll Scene

Scroll Scene action has become much more powerful. One reason is switch from ScrollMagic to GreenSock’s ScrollTrigger and the other reason is that we added a lot of extra functionality that let you create custom sliders, pagination and more.

Horizontal scrolls

Horizontal scrolls are now fully supported. Scroll direction can be auto-detected.

Defining the start and end of the scroll scene

For compatibility reasons we left Start on Start, Center and Leave settings intact.

But the new Scroll Scene lets gives you full control over selecting the scrolled element and defining when the scene starts and ends.

To do that select the Describe option. This will reveal a group of fields that lets you define scroll scene with a human-understandable sentences.

For example:

Start the scene when Scene’s element Top reaches the Center of the div.scroller, plus / minus 100px.

End the scene when the Bottom of the element section.last reaches scroller’s Top, plus / minus 25%.

Whole scroll area

A convenience setting for running the animation through the whole scroll area was also added.

This is the same as saying: Start the scene when the Top of the element reaches the Top of the scroller (viewport by default) and end when the bottom of the element reaches the bottom of the scroller.

Smoothing

Smoothing animates the scroll movement. This makes the animations run much smoother.

Advanced pinning

Pinned elements are fixed in place during the duration of the scroll scene. Additional settings let you fine-tune the pin and solve any issues with conflicting CSS code:

Pin element selects the element that will be pinned. By default, that is the scene element itself.

Pin type lets you choose between the position:fixed and translate modes, in case of issues with the pin. Automatic selection is on by default.

Append to Body re-parents the pinned element to the Body element. Use this in case of issues with the default settings.

Pin spacing tells the library how to create space after the pinned element. Choices are auto, padding, margin, none.

Snapping

Snapping moves the scroll into selected positions after the user stops scrolling. We have a bunch of predefined values like Start, End and so on.

But the most useful setting is to snap the scroll to positions of selected children elements. This is great for sliders.

The snapping animation can be fully customized with duration, delay and ease.

Pagination

Pagination is used to indicate current Scroll scene element, for example the current slide.

To use it you need to select the elements that represent the scene elements and elements that represent pagination items (bullets, or links 1, 2, 3 and so on).

Next, you specify one or more animations that are played when the item becomes current and ceases to be current.

Pagination items can also scroll to their element, see Scroll To feature below.

Replay independent animations

Replay each time setting on independent scroll animations will cause the animation to be replayed every time the scroll scene becomes visible.

Normally, the animation is played just once, unless it has the Reverse in opposite direction checked and it has reversed previously.

Timeline editor

The set of properties that can be animated has been expanded:

Position -> Relative position

Dynamic position lets you dynamically position transform elements on the top, bottom, left, right or center of the target element. The size of the element can also be adjusted to the size of the target element.

Top
Bottom
Left
Right
Center

Elements are repositions on window resize and scroll events.

Example of use are tooltips or a tile that slides under the active menu item.

Current position is set in the data-pgia-position attribute and can be used for styling the element in different positions (see tooltips above for example).

DOM -> Create elements

The group of Create properties creates new HTML elements by cloning an existing element or creating them from a HTML template.

Click the dot to create more.

The content of the new element can be dynamically substituted with the value of attributes of the target element.

One or more elements can be created with one transform. The creation of multiple elements is animated. The count can be evaluated based on the element selector, to create as many new elements as there are existing elements on the page (for example, to dynamically create a pagination item for every scroll scene slide).

New elements can be dynamically positioned in relation to the target element.

Animation can be played on the new element when it is created. Cloning the element from existing element with interactions will also clone the interactions.

DOM -> Remove elements

Remove element removes the element from the page.

DOM -> Push history state

Push state pushes a history state to the page history stack. This is useful for implementing in-page navigation.

Classes -> Add and remove classes

In Pinegrow Interactions 1.0 adding or removing a class also animated the style changes between the two states. This feature was dropped from GSAP 3 due to performance reasons and is therefore also removed from Pinegrow Interactions.

Classes are still added and removed, but the style changes are not animated.

Transform -> Translate %

Translate X% and translate Y% are added to Transform properties. They move the element over the X and Y axis based on the percentage width / height of the container element.

The main benefit is that Translate % can be combined with the regular Translate properties, for example to center the element with %X=50 and %Y=50 and then use X,Y and Z with pixel values to offset the element from the center position.

Click me and I’ll move half my weight to the left, minus 20px.

Scroll to

The group of Scroll to properties lets you animate the scroll to an element, to a fixed position or to the next, previous (and so on) elements.

The Scroll to transform needs to be added to the element that is scrolled. To scroll the window add it to the Body or Html element.

Scroll to can be:

  • an element selector, #about-us
  • a fixed pixel number, 200
  • a fixed percent value based on the viewport size, 50%
  • relative pixel or percent value, +=100%
  • max to scroll to the end
  • first, last, next, prev for scrolling between the elements
  • item or item<number> for scrolling to the referenced element, item0, item1
  • ${target.href} (and similar, see Variables below) for scrolling to the element referenced in the link

In this example we have navigation links that scroll to their respective sections. The Scroll to is set to ${target.href}, so that we only need one Interaction action that we then apply to all navigation links.

Section 1
Section 2
Section 3
Section 4

Child element selector chooses the set of elements that are referenced with next, previous and similar scroll destinations.

Scroll offset offsets the scroll destination. Scroll scene’s Pagination Top covered area is used if set for the element.

Scroll direction, either vertical or horizontal.

Infinite scroll will simulate the infinite scroll by jumping to the start of the scroll when scrolled past the last element. Same when going backwards.

Note, for this to look good, you have to duplicate the first element and place it at the end of the slider, either directly in the HTML layout or using the DOM -> Clone transform.

Connection with Scroll Scene

If the slider element has a Scroll Scene action Scroll to transforms will use Scroll Scene’s settings for scroll direction, offset (top covered area) and infinite scroll.

Scroll transforms are very powerful in combination with Scroll Scenes. It is possible to implement fully-featured sliders, same page navigation with animated menus and much more.

Animating SVGs

Pinegrow Interactions can be used to animate SVGs as well. A group of useful SVG transform properties is now available:

Stroke dasharray and Stroke dashoffset are used to animate path drawing. Both properties also accept % values that are evaluated based on the total length of the path. For example, 100% refers to the complete length of the path. Setting both to 100% and then animating the Stroke dashoffset down to 0 creates the effect of a progressive path drawing:

Click here to see a cool animation!

Remaining SVG transform properties refer to stroke and fill color, opacity and size.

Interactions can be added to individual elements within a SVG image to bring SVG graphics to life:

Using CSS variables

Wouldn’t it be nice to be able to use CSS variables instead of hard-coding colors and other values?

You can! Just use ${---css-var} instead of the value. For example, to transform text color to Bootstrap primary color, set the property to ${---primary}.

Using attribute values

How about using attribute values?

Use ${this.<attribute>} to access transform element’s attribute, for example ${this.href}.

Use ${target.<attribute>} to use the attribute value of the interaction target, for example ${target.data-color}.

Using style properties

You can also use the computed style values, for example: ${this.style.color} or ${target.style.backgroundColor}.

JavaScript Variables

You are not limited to CSS variables, attributes and style. Access any JavaScript value with:

  • ${myVar} – global variable
  • ${location.href} – href property of the location object
  • ${target.innerHeight} or ${this.innerHeight} – property of a HTML Element
  • ${theme.colors.active} – object property

Random

Now it is easy to generate random values for transform properties:

  • random(0,100) will return a random value from 0 to 100
  • random(0,100)% will return a random value with the value %
  • random([1, 2, 3]) will return one element from the list

You can combine random statement with variables, for example random(${theme.size.min}, ${theme.size.max})

Example values

Double click in any transform property field to get a list of example values.

Custom ease functions

You can define and use custom ease functions by setting the properties of the CustomEases global object to ease functions that take the tween progress (from 0 to 1) as an argument and return a transformed value from 0 to 1.. The object needs to be defined before pgia.js is included.

Here is an example of there custom ease functions:

<script>
var CustomEases = {
    viceVersa: function(r) {
    	return 1 - r;
    },
    random: function(r) {
    	return Math.random();
    },
    meetTheGhost: function(r) {
    	return Math.round(r * 100) % 2 === 0 ? r : (1-r);
    }
}
</script>

Custom eases defined on the selected page are listed in the Ease field menu.

Note, references to custom eases that is not defined on the page (for example, if you copy-paste the interaction from another page) are ignored at the moment, but can break the animation in the future. Make sure that you are only using custom eases that are actually defined on the page.

Apply to Many

Apply to Many will now merge interactions if the targeted element already has interactions.

Show hidden elements during editing

In Interactions 1.0, showing the elements hidden with the Hide at Strat action was controlled through the Toggle Visual Helpers icon and menu in the top toolbar. Because of that, turning the visual helpers off (so that you can see the edited element better) also turned off showing the hidden elements. In most cases that was not what the user wants.

So we now moved the option to Show hidden elements into the Settings & Tools menu in the Interactions panel.

That means that you can now switch off the Visual helpers when editing an element that is using Hide at Start action.

Save code

In the bottom part of the Interactions panel, click on the Settings & tools icon and choose Generate script to scan the project and extract all interactions with Apply to Many action into a JavaScript file that can then be included into any project.

Migration notes

Interactions 2.0 are almost fully compatible with earlier version. That means that you can simply replace the Interaction resource file and your old interactions will work as before.

Classes

One difference is when adding or removing classes – style changes between the two states are no longer animated.

Auto opacity

In Interactions 1.x, Auto opacity had a bug where in some situations it didn’t correctly set the visibility to hidden when opacity reached 0. So if you implemented any workarounds or interactions that relied on the incorrect behavior you will have to update them now.

Changes to tutorials

Our tutorials are a good measure of backward compatibility. So far, only these changes had to be done:

WildMusic

Mouseover and mouseleave animations on the Wildmusic heading must use Opacity instead of Auto opacity because Auto opacity=0 sets the element’s visibility to hidden and thus disables pointer events. So, the mouseleave event no longer happens and the heading does not become visible again.



Last updated on October 11, 2020 at 12:25 am


Print this article