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