Effects

Control opacity, transitions, shadows, filters and more with the settings inside Advanced -> Effects.

Animate on Scroll

Oxygen allows you to configure animations that are triggered on scroll using the Animate on Scroll library.

Each element can have its own animation settings defined. Any settings defined at the element level will override the default global animation settings, but only for that element. To enable animations on an element, select it and go to Advanced -> Effects -> Animate on Scroll in the Properties Pane, then check the "Enable Animation" box. Once that is selected, you'll be able to define animation settings for that specific element.

• Animation Type - Determines the type of animation that will be used, such as flip, slide, or fade.
• Animation Duration - Determines the number of milliseconds over which the animation takes place.
• Anchor Placement - Defines which position of the element, in relation to the viewport, should trigger the animation.
• Animation Easing - Defines the speed curve of the animation. Ease-in-out, for example, will cause the animation to be slower at the beginning and end and faster in the middle.
• Animation Trigger Offset - Defines offset of animation trigger point (in relation to viewport scroll position) in px. A positive value can be used to ensure the entire element is in the viewport before the animation is triggered, whereas a negative value can be used to trigger the animation before the element enters the viewport.
• Animation Delay - Determines the length of time between the animation being triggered and the animation beginning.
• Anchor - Allows you to trigger the animation based on another element's position. Insert the element's ID in this field to trigger the animation when the target element's position reaches the designated Anchor Placement location.
• Animate Only Once - By default, an element leaving the viewport re-sets the animation and causes it to be re-triggered when the element re-enters the viewport. You can disable this behavior by choosing "Yes."

Opacity

Controls the transparency of the element. Specify a value between 0 and 1. A setting of 0 makes the element completely transparent. A setting of 1 makes the element completely opaque.

Mix Blend Mode

Determines how an element's content should blend with the content of the element's parent and the element's background.

Further reading and examples of blend mode effects: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode.

Transition

Create gradual transitions between the values of CSS properties. When a CSS property value changes, instead of changing instantly, it will gradually transition to the new value.

Transition Duration

Time, in seconds, for the transition to take place.

Timing Function

The acceleration curve of the transition.

Further reading: https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function

CSS Property

Defaults to all. Otherwise, specify the name of the CSS property that will be transitioned.

Delay

How much time, in seconds, should pass before the transition is applied.

Box Shadow

Inset

Display the shadow inside the element, instead of outside the element.

Color

Set the color of the shadow.

Horizontal Offset

How far the shadow is moved horizontally.

Vertical Offset

How far the shadow is moved vertically.

Blur

How much blur to apply to the shadow.

Spread

How much to enlarge the shadow from its initial size, which is the size of the element.

Further reading: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

Text Shadow

Color

Set the color of the shadow.

Horizontal Offset

Set the horizontal distance of the text shadow from the original text.

Vertical Offset

Set the vertical distance of the text shadow from the original text.

Blur

How much blur to apply to the shadow.

Further reading: https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow

Filter

• blur - Blurs the element by the given number of pixels.
• brightness - Adjusts the brightness of the element using a percentage value.
• contrast - Sharpens or dulls the contrast of varying colors within the element.
• grayscale - Adjusts the grayscale of the element. Highest value is black and white.
• hue-rotate - Changes the hue of the colors in the element. Values from 0 to 360°.
• invert - Inverts the colors of the element. 0% for original, 100% for full inversion.
• saturate - Adjusts the color saturation of the element.
• sepia - Adjusts the sepia tones of the element.

Further Reading: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Transform

• skew - Tilts the element horizontally (Skew x) or vertically (Skew Y).
• translate - Moves the element on the X, Y, or Z axis.
• rotate - Rotates the element by the degrees specified.
• rotateX - Rotates the element on the X axis by the degrees specified.
• rotateY - Rotates the element on the Y axis by the degrees specified.
• perspective - Affects 3D transforms of descendant elements, allowing them to have a consistent depth perspective.
• rotate3d - Allows you to specify a point in 3D space to rotate the element around.
• scale - Scales the element according to its original size. For example, 2 is 2 times the original size of the element, whereas 0.5 is half the original size of the element.

Further Reading: https://developer.mozilla.org/en-US/docs/Web/CSS/transform