Skip to content

Instantly share code, notes, and snippets.

@xeladotbe
Created May 24, 2020 16:57
Show Gist options
  • Save xeladotbe/0f41c69266ca56a8676545d9d48247d6 to your computer and use it in GitHub Desktop.
Save xeladotbe/0f41c69266ca56a8676545d9d48247d6 to your computer and use it in GitHub Desktop.
zoomOut
@keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
to {
opacity: 0;
}
}
@xeladotbe
Copy link
Author

xeladotbe commented May 24, 2020

{
    "type": "APL",
    "version": "1.1.0",
    "commands": {
        "zoomOut": {
            "parameters": [
                "duration",
                "delay"
            ],
            "commands": [
                {
                    "type": "AnimateItem",
                    "duration": "${duration * 0.5}",
                    "delay": "${delay || 0}",
                    "value": [
                        {
                            "property": "transform",
                            "to": [
                                {
                                    "scaleX": 0.3,
                                    "scaleY": 0.3
                                }
                            ]
                        },
                        {
                            "property": "opacity",
                            "from": 1,
                            "to": 0
                        }
                    ]
                },
                {
                    "type": "AnimateItem",
                    "duration": "${duration * 0.5}",
                    "value": [
                        {
                            "property": "opacity",
                            "from": 0,
                            "to": 0
                        }
                    ]
                }
            ]
        }
    }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment