New: Scroll Strength Interaction, Play Video Action and Get URL Param Action

We just released 1 new interaction, 2 new actions and a few bug fixes in WP Interactions v1.2. Learn more about the new things in this update article.

New Scroll Strength Interaction

We’ve added a new interaction called Scroll Strength, you can find it in the list of Page Interactions. Scroll strength allows you to add animations that get triggered when the user scrolls the page up or down, and then gradually calms down.

It’s a bit hard to explain in words, but for me it’s kind of like when you rev an engine and it gives out a very loud sound, then gradually fades out. The harder you rev it, the louder the sound is at the start.

It’s easier to illustrate with a video:

In this example, the scroll strength triggers a scale up (a bigger scale up if the scroll is faster), then gradually scales back down after a bit.

New Play/Pause Video Action

The new Play/Pause Video action allows you to start playing a video at any given time, or pause a currently playing video, or toggle it to play/pause.

Sounds simple enough, but it allows you to create amazing entrance effects with videos using the native cover block. Time this action with the page scroll interaction, or run it when an element enters the viewport, and you can create Apple-like product entrances!

In this example, this cover block’s video background starts playing when it enters into the view, then stops after it reaches the 5 second mark.

New Get Parameter URL Action

Also new is the ability to get a Parameter from the current URL. This is a data-type action, which means you can use the parameters as inputs in your other actions.

A URL parameter looks like this, let’s say you are currently visiting the url: https://mysite.com/?param=value

The parameter here is the param and its value is value. This can be passed on to other actions in order to display it in titles, pre-filled form data, or you can parse and transform it using the JavaScript action.

In this example, the interaction grabs the URL parameter named “first”, and uses the value to fill up the text input field.

Other Updates

Aside from these new things, we’ve also added some fixes:

  • The Rotate 3d action now uses linear as the default easing
  • Move & Rotate 3d actions now accept zero values
  • Interactions with optional targets will no longer show a warning that you don’t have a trigger set
  • If a corrupted interaction fails to load, other interactions will still continue to load

That’s it for v1.2!


Posted

in

by

Tags:

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *