QCObjects / qcobjects-demo-effects

Demo app for front-end high level effects programming using QCObjects Framework

qcobjects-demo-effects

Here are some examples of how to use high-level effects in QCObjects.

Check out this live demo here to see how to use the effects in a simple example.

Check out this project on GitHub here

FadeIn

function applyFadeIn (element) {
                    Fade.apply(element, 0, 1);
                }

FadeOut

function applyFadeOut (element) {
                    Fade.apply(element, 1, 0);
                }

Move

function applyMove (element) {
                    Move.apply(element, 0, 0, 100, 100);
                    setTimeout(() => {
                        Move.apply(element, 100, 100, 0, 0);
                    }, 1000);
                }

Resize

function applyResize (element) {
                    Resize.apply(element, 0, 1);
                }

# Radius

function applyRadius (element) {
                    let element2 = global.get("mainControllerInstance")
                    .component.shadowRoot.subelements(".panel").pop();

                    let element3 = global.get("mainControllerInstance")
                    .component.shadowRoot.subelements("button")
                    .map(e => Radius.apply(e, 0, 27));

                    Radius.apply(element2, 0, 27);
                }

WipeLeft

function applyWipeLeft (element) {
                    WipeLeft.apply(element, 0, 1);
                }

WipeRight

function applyWipeRight (element) {
                    WipeRight.apply(element, 0, 1);
                }

WipeUp

function applyWipeUp (element) {
                    WipeUp.apply(element, 0, 1);
                }

WipeDown

function applyWipeDown (element) {
                    WipeDown.apply(element, 0, 1);
                }

Rotate

function applyRotate (element) {
                    element.style.transformOrigin = "center center";
                    Rotate.apply(element, 0, 360);
                }

RotateX

function applyRotateX (element) {
                    element.style.transformOrigin = "center center";
                    RotateX.apply(element, 0, 360);
                }

RotateY

function applyRotateY (element) {
                    element.style.transformOrigin = "center center";
                    RotateY.apply(element, 0, 360);
                }

RotateZ

function applyRotateZ (element) {
                    element.style.transformOrigin = "center center";
                    RotateZ.apply(element, 0, 360);
                }

SlideInLeft

function applySlideInLeft (element) {
                    Move.apply(element, -element.clientWidth, 0, 0, 0);
                }

SlideInRight

function applySlideInRight (element) {
                    Move.apply(element, element.clientWidth, 0, 0, 0);
               }

FallFromTop

function applyFallFromTop (element) {
                    Move.apply(element, 0, -element.clientHeight, 0, 0);
                }

RiseFromBottom

function applyRiseFromBottom (element) {
                    Move.apply(element, 0, element.clientHeight, 0, 0);
                }