Dynamic Motion

Using special Interaction Layers feature, you can add now dynamic motions to your elements.

What is dynamic motion? It’s animation that use dynamic values instead of static. Example: it sets position of one element based on another element. Or it animates values of one element based on an attribute from another element. Or use random data. Or do math operations before animation.

To use this option, you need to enable Interaction Layers and Animation action.

This animation effect differs from other Animation features of Greenshift because it allows the use of dynamic placeholders and Math operations.

The interface has two areas: options and parameters. You can animate any option. Some predefined options are also available. To enable them, click the three-dot icon in options or parameters.

However, the most significant benefit of this feature is that you can use keyframes and dynamic values. To enable this option, click on [] in value, and you will enable the Keyframed values for the field. Now, click on the field, and you can add keyframes and math operations.

You also have a cog icon near each field. Click on them to find available Dynamic placeholders. Click on any placeholder to put it in the field. They will transform into real data after the script executes interactions.

There are few important special options in Motion feature that you should know.

It uses Browser CSS animations

This makes it more faster and whole library takes small size. But you need to keep in mind that your existed CSS transform values will affect animations.

For example, you want to make custom sliding panel. So, you put element and set it’s translateX as -100% to hide it. And on animation, you set it to be 0%. But keep attention on CSS transition property on block.

See, that you have Easing (it adds automatically in GS if you change transform values). If you have it on block, it will overwrite easing and duration inside your Motion properties. So, to make the proper transition, you have two choices.

1. You continue to set easing on block level and will not use easing in animation properties. If so, in values of motion you can use x = 0 for sliding transition. But duration and easing in Motion parameters will be ignored
2. You need to remove easing in block, and in animation, you need to use keyframes in Motion values, in this case, it will be [-100%, 0%]

String or Numeric values, units

By default, all value fields are string values so you can use any values with units, for example “100%” or “30vw”. Even colors will be interpolated. But if you use just “100”, Greenshift will automatically converts it to numeric values

If you use math operations, you may need to attach units in end.

Easing Customizer

If you put easing parameter, you can customize easing. Also you can enable Spring easing option.

Custom parameters for each motion option

The same as in Motion One library, you can set own parameters for each separate motion option. For this, in parameters, type name of option, then, in value field, you can add parameters pairs

Motion Scroll

Motion scroll is feature that was made special for Interpolated animations based on scroll position of element in window.

It’s the same as our parallax feature in Animation addon but can be used in Dynamic Motion.

You need to enable Motion Scroll trigger and Animation parameter you must set two keyframes: start and end point.

Please, note that Motion scroll will ignore Duration option because it will be based on scroll position.

You can use also several keyframes and offset parameter. This will affect how scroll interpolation will work.

For example, if you set keyframes [0,0.1,1] then animation will slow down to second point and speed up to third point. Think about whole animation as 100% distance and keyframes will put points on this distance. You can also change range of container for distance calculations. By default distance will be calculated from top point of trigger element that touches end of scroll container (browser window by default) and end of element when it hits start of window. You can change this values and see in interface where is points for calculations.

Stagger

Stagger effect allows to animate objects one by one with some delay.

To enable this option, in delay parameter, click on layers icon

Then, you can change stagger parameters.

If you didn’t set custom selector where to apply animations, Greenshift will try to find direct child elements of block and animate them with stagger effect.

Please, note that if you animate opacity, don’t forget to set initial value. In Greenshift we have also preset class “hide_onfront”, select it in Class selector. This allows to set initial zero opacity on front, while keeping it 100% in editor. You can also use Filter option in class system to apply styles only on frontend

Frontend Only Initial styles

When you use class system, you can apply styles only for frontend. You can do this by enabling the next option in a local class