effects

Usage

loading functionality comes with the core files when you import rwx from 'roseworx' so you dont need to do anything extra. Any element with the rwx-loading attribute and that follows the correct html structure will automatically have functionality implemented.
Add a rwx-loading attribute OR class to any element.

This is loading

Description

Sometimes browsers do not make it too obvious that an element is scrollable, or simply, users do not notice it is scrollable. Roseworx Mist is a semi-transparent layer ontop of current content which visually indicates that the element can be scrolled down or right.

When an element becomes scrollable (down or right) Roseworx will automatically add a misting effect. Roseworx will also make sure the misting fixes to the direction of the scroll and that it dissapears when there is no more scrollable content.

Usage

mist functionality comes with the core files when you import rwx from 'roseworx' so you dont need to do anything extra. Any element with the rwx-mist attribute and that follows the correct html structure will automatically have functionality implemented.
Add a rwx-mist attribute to any element.

This div has the [rwx-mist] attribute and has manual sizing limits just to demonstrate the Roseworx misting effect.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Description

Gives a nice sleak SVG animated border to an element, activated either by a hover or an active class on the same element.

Usage

import rwxAnimatedBorders from 'roseworx/js/effects/rwxAnimatedBorders';

Import the SCSS file and optionally customize using the below SCSS variables (make sure to declare them before the import);
```
@import "~roseworx/scss/effects/rwx-animated-border";
```
Add an rwx-animated-border attribute to any element.

Customize

SCSS Variable Value Type Description

$rwx-animated-border-from-color CSS color The start color of the border

$rwx-animated-border-to-color CSS color The end color of the border

$rwx-animated-border-size CSS Length The size of the border

This div has the [rwx-animated-border] attribute

Usage

import rwxSlide from 'roseworx/js/effects/rwxSlide';

Use the below methods;

slideUp

Void

(

Element: HTML Element
Duration (in seconds): Number
Callback: Function

)

Slides an element up to hide the contents inside. If callback is supplied, it will be ran after the animation has completed.

		const element = document.getElementById('slideUpExample');
        										rwxSlide.slideUp(element, 1, ()=>{console.log("done");});

slideUp Demo

Press the below button to observe the slideUp action.

slideDown

Void

(

Element: HTML Element
Duration (in seconds): Number
Callback: Function

)

Slides an element down to display the contents inside. If callback is supplied, it will be ran after the animation has completed. A class of .rwx-slide-expanded will be added to the element when it has expanded.

		const element = document.getElementById('slideDownExample');
        										rwxSlide.slideDown(element, 1, ()=>{console.log("done");});

slideDown Demo

Press the below button to observe the slideDown action.

slideToggle

Void

(

Element: HTML Element
Duration (in seconds): Number
Callback: Function

)

Slides an element down if its contents is currently hidden, or up if its contents is visible. If callback is supplied, it will be ran after each slide animation. A class of .rwx-slide-expanded will be added to the element when it has expanded and removed when unexpanded.

		const element = document.getElementById('slideToggleExample');
        										rwxSlide.slideToggle(element, 1, ()=>{console.log("done");});

slideToggle Demo

Press the below button to observe the slideToggle action.

Usage

import rwxFade from 'roseworx/js/effects/rwxFade';

Use the below methods;

fadeIn

Void

(

Element: HTML Element

)

Fade an element in. If fading an element in without fading it out first it must start with a z-index:-1; opacity: 0;

		const element = document.getElementById('fadeInExample');
        										rwxFade.fadeIn(element);

fadeIn Demo

Press the below button to observe the fadeIn action.

fadeOut

Void

(

Element: HTML Element

)

Fades an element out.

		const element = document.getElementById('fadeOutExample');
        										rwxFade.fadeOut(element);

fadeOut Demo

Press the below button to observe the fadeOut action.