From 24fd82f555d0e3e591acceb0322bc514b87e95fb Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 20 Mar 2012 14:15:34 -0700 Subject: Presets - Animation update --- js/panels/presets/default-animation-presets.js | 79 ++++++++++++++++++++------ 1 file changed, 62 insertions(+), 17 deletions(-) (limited to 'js/panels/presets/default-animation-presets.js') diff --git a/js/panels/presets/default-animation-presets.js b/js/panels/presets/default-animation-presets.js index 10a3e906..2e656e86 100644 --- a/js/panels/presets/default-animation-presets.js +++ b/js/panels/presets/default-animation-presets.js @@ -18,23 +18,23 @@ exports.animationPresets = { "-webkit-animation": "border-morph 2s infinite" } }, - { - "isKeyFrameRule": true, - "keys" : [{ - "keyText": "0%", - "styles": { "border-radius": "0" } - }, { - "keyText": "50%", - "styles": { - "border-radius": "100%" - } - }, { - "keyText": "100%", - "styles": { - "border-radius": "0%" - } + { + "isKeyFrameRule": true, + "keys" : [{ + "keyText": "0%", + "styles": { "border-radius": "0" } + }, { + "keyText": "50%", + "styles": { + "border-radius": "100%" + } + }, { + "keyText": "100%", + "styles": { + "border-radius": "0%" + } + }] }] - }] }] }, { "text": "3D Animations", @@ -50,7 +50,7 @@ exports.animationPresets = { "-webkit-animation-iteration-count": "infinite", "-webkit-animation-direction": "normal", "-webkit-animation-timing-function": "ease-out", - "-webkit-transform-origin": "200% 50%", + "-webkit-transform-origin": "100% 50%", "-webkit-transform-style": "preserve-3d", "-webkit-transform": "perspective(1000)", "-webkit-animation-delay": "0s" @@ -89,6 +89,51 @@ exports.animationPresets = { } }] }] + }, + { + "text": "Rotate with Fade In", + "selectorBase" : "rotate-with-fade-in", + "rules" : [{ + "selectorSuffix" : "", + "styles" : { + "-webkit-animation-name": "rotate-with-fade-in", + "-webkit-animation-duration": "5s", + "-webkit-animation-iteration-count": "infinite", + "-webkit-animation-direction": "normal", + "-webkit-animation-timing-function": "ease-out", + "-webkit-transform-origin": "100% 50%", + "-webkit-transform-style": "preserve-3d", + "-webkit-transform": "perspective(1000)", + "-webkit-animation-delay": "0s" + } + },{ + "isKeyFrameRule": true, + "keys" : [{ + "keyText": "0%", + "styles": { + "opacity": "0", + "-webkit-transform": "perspective(1000) rotateY(-90deg)" + } + }, { + "keyText": "15%", + "styles": { + "opacity": "1", + "-webkit-transform": "perspective(1000) rotateY(0deg)" + } + }, { + "keyText": "85%", + "styles": { + "opacity": "1", + "-webkit-transform": "perspective(1000) rotateY(0deg)" + } + }, { + "keyText": "100%", + "styles": { + "opacity": "0", + "-webkit-transform": "perspective(1000) rotateY(95deg)" + } + }] + }] }] }] }; \ No newline at end of file -- cgit v1.2.3 From 72b0468221d599f64d563214573273607e38c993 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 23 Mar 2012 12:00:07 -0700 Subject: Presets Panel - Add slide/fade out animation --- js/panels/presets/default-animation-presets.js | 48 ++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) (limited to 'js/panels/presets/default-animation-presets.js') diff --git a/js/panels/presets/default-animation-presets.js b/js/panels/presets/default-animation-presets.js index 2e656e86..0730c2ef 100644 --- a/js/panels/presets/default-animation-presets.js +++ b/js/panels/presets/default-animation-presets.js @@ -36,6 +36,54 @@ exports.animationPresets = { }] }] }] + }, { + "text": "3D Animations", + "children": [ + { + "text": "Slide Out with Fade", + "selectorBase": "slide-fade-out", + "rules" : [{ + "selectorSuffix" : "", + "styles" : { + "-webkit-animation-name": "slide-fade-out", + "-webkit-animation-duration": "5s", + "-webkit-animation-iteration-count": "infinite", + "-webkit-animation-direction": "normal", + "-webkit-animation-timing-function": "ease", + "-webkit-transform-style": "preserve-3d", + "-webkit-transform": "perspective(1000)", + "-webkit-animation-delay": "0s" + } + },{ + "isKeyFrameRule": true, + "keys" : [{ + "keyText": "0%", + "styles": { + "opacity": "0", + "-webkit-transform": "translate3d(0, 0, 0)" + } + }, { + "keyText": "10%", + "styles": { + "opacity": "1", + "-webkit-transform": "translate3d(0, 0, 0)" + } + }, { + "keyText": "86%", + "styles": { + "opacity": "1", + "-webkit-transform": "translate3d(0, 0, 0)" + + } + }, { + "keyText": "100%", + "styles": { + "opacity": "0", + "-webkit-transform": "translate3d(540px, 0, 0)" + } + }] + }] + }] }, { "text": "3D Animations", "children": [ -- cgit v1.2.3 From 14bf5e88417fbbc1bfd3823a278cd759ff8a0897 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 23 Mar 2012 13:15:43 -0700 Subject: Presets - fixed preset group name ("2D") --- js/panels/presets/default-animation-presets.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/presets/default-animation-presets.js') diff --git a/js/panels/presets/default-animation-presets.js b/js/panels/presets/default-animation-presets.js index 0730c2ef..64f91ea6 100644 --- a/js/panels/presets/default-animation-presets.js +++ b/js/panels/presets/default-animation-presets.js @@ -37,7 +37,7 @@ exports.animationPresets = { }] }] }, { - "text": "3D Animations", + "text": "2D Animations", "children": [ { "text": "Slide Out with Fade", -- cgit v1.2.3