Skip to content

Commit c034a53

Browse files
carloskelly13carloskelly13
authored
Merge pull request #5110 from google/feature/animation-effect-chooser
Animations: Effect Chooser Component
2 parents c00fcf5 + 17e7e2a commit c034a53

5 files changed

Lines changed: 361 additions & 2 deletions

File tree

‎assets/src/edit-story/app/font/fontProvider.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ import useLoadFonts from './effects/useLoadFonts';
3434
import useLoadFontFiles from './actions/useLoadFontFiles';
3535
import { curatedFontNames } from './curatedFonts';
3636

37-
const GOOGLE_MENU_FONT_URL = 'https://fonts.googleapis.com/css';
37+
export const GOOGLE_MENU_FONT_URL = 'https://fonts.googleapis.com/css';
3838

3939
function FontProvider({ children }) {
4040
const [fonts, setFonts] = useState([]);

‎assets/src/edit-story/app/font/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,5 @@
1414
* limitations under the License.
1515
*/
1616

17-
export { default as FontProvider } from './fontProvider';
17+
export { default as FontProvider, GOOGLE_MENU_FONT_URL } from './fontProvider';
1818
export { default as useFont } from './useFont';

‎assets/src/edit-story/components/panels/animation/effectChooser.js‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
/*
2+
* Copyright 2020 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* https://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
/**
18+
* WordPress dependencies
19+
*/
20+
import { __ } from '@wordpress/i18n';
21+
/**
22+
* External dependencies
23+
*/
24+
import React, { useEffect } from 'react';
25+
import styled from 'styled-components';
26+
27+
/**
28+
* Internal dependencies
29+
*/
30+
import loadStylesheet from '../../../utils/loadStylesheet';
31+
import { GOOGLE_MENU_FONT_URL } from '../../../app/font';
32+
import {
33+
GRID_ITEM_HEIGHT,
34+
PANEL_WIDTH,
35+
DropAnimation,
36+
FadeInAnimation,
37+
FlyInLeftAnimation,
38+
FlyInRightAnimation,
39+
FlyInTopAnimation,
40+
FlyInBottomAnimation,
41+
PulseAnimation,
42+
RotateInLeftAnimation,
43+
RotateInRightAnimation,
44+
} from './effectChooserElements';
45+
46+
const Container = styled.div`
47+
background: black;
48+
width: ${PANEL_WIDTH}px;
49+
`;
50+
51+
const GridItem = styled.button`
52+
border: none;
53+
background: #333;
54+
border-radius: 4px;
55+
height: ${GRID_ITEM_HEIGHT}px;
56+
position: relative;
57+
overflow: hidden;
58+
`;
59+
60+
const Grid = styled.div`
61+
display: grid;
62+
justify-content: center;
63+
gap: 15px 3px;
64+
grid-template-columns: repeat(4, 58px);
65+
padding: 15px;
66+
position: relative;
67+
`;
68+
69+
const GridItemFullRow = styled(GridItem)`
70+
grid-column-start: span 4;
71+
`;
72+
73+
const GridItemHalfRow = styled(GridItem)`
74+
grid-column-start: span 2;
75+
`;
76+
77+
const ContentWrapper = styled.span`
78+
display: flex;
79+
height: 100%;
80+
width: 100%;
81+
align-items: center;
82+
justify-content: center;
83+
font-family: 'Teko', sans-serif;
84+
font-size: 20px;
85+
color: white;
86+
text-transform: uppercase;
87+
`;
88+
89+
export default function EffectChooser() {
90+
useEffect(() => {
91+
loadStylesheet(`${GOOGLE_MENU_FONT_URL}?family=Teko`).catch(function () {});
92+
});
93+
94+
return (
95+
<Container>
96+
<Grid>
97+
<GridItemFullRow>
98+
<DropAnimation>
99+
<ContentWrapper>{__('Drop', 'web-stories')}</ContentWrapper>
100+
</DropAnimation>
101+
</GridItemFullRow>
102+
<GridItemFullRow>
103+
<FadeInAnimation>
104+
<ContentWrapper>{__('Fade in', 'web-stories')}</ContentWrapper>
105+
</FadeInAnimation>
106+
</GridItemFullRow>
107+
<GridItem>
108+
<ContentWrapper>
109+
<FlyInLeftAnimation>
110+
{__('Fly in', 'web-stories')}
111+
</FlyInLeftAnimation>
112+
</ContentWrapper>
113+
</GridItem>
114+
<GridItem>
115+
<ContentWrapper>
116+
<FlyInTopAnimation>{__('Fly in', 'web-stories')}</FlyInTopAnimation>
117+
</ContentWrapper>
118+
</GridItem>
119+
<GridItem>
120+
<ContentWrapper>
121+
<FlyInBottomAnimation>
122+
{__('Fly in', 'web-stories')}
123+
</FlyInBottomAnimation>
124+
</ContentWrapper>
125+
</GridItem>
126+
<GridItem>
127+
<ContentWrapper>
128+
<FlyInRightAnimation>
129+
{__('Fly in', 'web-stories')}
130+
</FlyInRightAnimation>
131+
</ContentWrapper>
132+
</GridItem>
133+
<GridItemFullRow>
134+
<ContentWrapper>
135+
<PulseAnimation>{__('Pulse', 'web-stories')}</PulseAnimation>
136+
</ContentWrapper>
137+
</GridItemFullRow>
138+
<GridItemHalfRow>
139+
<ContentWrapper>
140+
<RotateInLeftAnimation>
141+
{__('Rotate', 'web-stories')}
142+
</RotateInLeftAnimation>
143+
</ContentWrapper>
144+
</GridItemHalfRow>
145+
<GridItemHalfRow>
146+
<RotateInRightAnimation>
147+
<ContentWrapper>{__('Rotate', 'web-stories')}</ContentWrapper>
148+
</RotateInRightAnimation>
149+
</GridItemHalfRow>
150+
</Grid>
151+
</Container>
152+
);
153+
}

‎assets/src/edit-story/components/panels/animation/effectChooserElements.js‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
/*
2+
* Copyright 2020 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* https://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
/**
17+
* External dependencies
18+
*/
19+
import styled, { keyframes } from 'styled-components';
20+
21+
export const GRID_ITEM_HEIGHT = 64;
22+
export const PANEL_WIDTH = 276;
23+
24+
const dropKeyframes = keyframes`
25+
0% {
26+
transform: translateY(-100%);
27+
animation-timing-function: cubic-bezier(.75,.05,.86,.08);
28+
}
29+
15% {
30+
transform: translateY(0%);
31+
animation-timing-function: cubic-bezier(.22,.61,.35,1);
32+
}
33+
26% {
34+
transform: translateY(-62%);
35+
animation-timing-function: cubic-bezier(.75,.05,.86,.08);
36+
}
37+
37% {
38+
transform: translateY(-0%);
39+
animation-timing-function: cubic-bezier(.22,.61,.35,1);
40+
}
41+
41.5% {
42+
transform: translateY(-30%);
43+
animation-timing-function: cubic-bezier(.75,.05,.86,.08);
44+
}
45+
50%, 100% {
46+
transform: translateY(0%);
47+
animation-timing-function: cubic-bezier(.22,.61,.35,1);
48+
}
49+
`;
50+
51+
export const DropAnimation = styled.div`
52+
display: inline-block;
53+
animation: ${dropKeyframes} 3.2s linear infinite;
54+
`;
55+
56+
const fadeInKeyframes = keyframes`
57+
0% {
58+
opacity: 0;
59+
}
60+
50%, 100% {
61+
opacity: 1;
62+
}
63+
`;
64+
65+
export const FadeInAnimation = styled.div`
66+
display: inline-block;
67+
animation: ${fadeInKeyframes} 2.5s linear infinite;
68+
`;
69+
70+
const flyInLeftKeyframes = keyframes`
71+
0% {
72+
transform: translateX(-100%);
73+
}
74+
50%, 100% {
75+
transform: translateX(0%);
76+
}
77+
`;
78+
79+
export const FlyInLeftAnimation = styled.div`
80+
display: inline-block;
81+
animation: ${flyInLeftKeyframes} 2s linear infinite;
82+
`;
83+
84+
const flyInRightKeyframes = keyframes`
85+
0% {
86+
transform: translateX(100%);
87+
}
88+
50%, 100% {
89+
transform: translateX(0%);
90+
}
91+
`;
92+
93+
export const FlyInRightAnimation = styled.div`
94+
display: inline-block;
95+
animation: ${flyInRightKeyframes} 2s linear infinite;
96+
`;
97+
98+
const flyInTopKeyframes = keyframes`
99+
0% {
100+
transform: translateY(-100%);
101+
}
102+
50%, 100% {
103+
transform: translateY(0%);
104+
}
105+
`;
106+
107+
export const FlyInTopAnimation = styled.div`
108+
display: inline-block;
109+
animation: ${flyInTopKeyframes} 2s linear infinite;
110+
`;
111+
112+
const flyInBottomKeyframes = keyframes`
113+
0% {
114+
transform: translateY(100%);
115+
}
116+
50%, 100% {
117+
transform: translateY(0%);
118+
}
119+
`;
120+
121+
export const FlyInBottomAnimation = styled.div`
122+
display: inline-block;
123+
animation: ${flyInBottomKeyframes} 2s linear infinite;
124+
`;
125+
126+
const pulseKeyframes = keyframes`
127+
0% {
128+
transform: scale(1);
129+
}
130+
12.5% {
131+
transform: scale(0.75);
132+
}
133+
37.5% {
134+
transform: scale(1.25);
135+
}
136+
50%, 100% {
137+
transform: scale(1);
138+
}
139+
`;
140+
141+
export const PulseAnimation = styled.div`
142+
display: inline-block;
143+
animation: ${pulseKeyframes} 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
144+
`;
145+
146+
const rotateInLeftKeyframes = keyframes`
147+
0% {
148+
transform: translateX(-100%) rotate(360deg);
149+
}
150+
50%, 100% {
151+
transform: translateX(0%);
152+
}
153+
`;
154+
155+
export const RotateInLeftAnimation = styled.div`
156+
display: inline-block;
157+
animation: ${rotateInLeftKeyframes} 2s linear infinite;
158+
`;
159+
160+
const rotateInRightKeyframes = keyframes`
161+
0% {
162+
transform: translateX(100%) rotate(-360deg);
163+
}
164+
50%, 100% {
165+
transform: translateX(0%);
166+
}
167+
`;
168+
169+
export const RotateInRightAnimation = styled.div`
170+
display: inline-block;
171+
animation: ${rotateInRightKeyframes} 2s linear infinite;
172+
`;

‎assets/src/edit-story/components/panels/animation/stories/effectChooser.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/*
2+
* Copyright 2020 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* https://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
/**
17+
* External dependencies
18+
*/
19+
import React from 'react';
20+
import { action } from '@storybook/addon-actions';
21+
22+
/**
23+
* Internal dependencies
24+
*/
25+
import EffectChooser from '../effectChooser';
26+
27+
export default {
28+
title: 'Animations/Effect Chooser',
29+
component: EffectChooser,
30+
};
31+
32+
export const _default = () => {
33+
return <EffectChooser onAnimationSelected={action('onAnimationSelected')} />;
34+
};

0 commit comments

Comments
 (0)