Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

wip - add delay, skew and more... #6

Merged
merged 1 commit into from
Nov 28, 2022
Merged

wip - add delay, skew and more... #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ <h1>Wow!Team Demos</h1>
<li>
<a href="./motion/">Motion Playground</a>
</li>
<li>
<a href="./motion/customMotion">Custom Motion Playground</a>
</li>
<li>
<a href="./video-crop/">Video Crop</a>
</li>
Expand Down
2 changes: 1 addition & 1 deletion motion/customMotion/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<div class="perspectiveWrapper">
<label>
Perspective:
<input type="text" class="perspectiveValue" onchange="setPerspective(this.value);">
<input type="text" class="perspectiveInput" onchange="setPerspective(this.value);">
</label><br>
<!-- <label>
<input type="checkbox" class="useWrapper">
Expand Down
49 changes: 32 additions & 17 deletions motion/customMotion/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@ const animationsContainer = document.querySelector('.animationsContainer');
const liveWrapper = document.querySelector('.liveWrapper');
const generatedKeyframes = document.querySelector('#generatedKeyframes');

const perspectiveValue = document.querySelector('.perspectiveValue');
const perspectiveInput = document.querySelector('.perspectiveInput');

let data = JSON.parse(localStorage.getItem('animationsData')) || {
animations: [],
perspective: ''
};

perspectiveValue.value = data.perspective;
perspectiveInput.value = data.perspective;
let usePerspective = false;

const selectProperyElement = (animationIx, keyframeIx, propertyIx, selectedProperty) => {
Expand All @@ -27,6 +27,8 @@ const selectProperyElement = (animationIx, keyframeIx, propertyIx, selectedPrope
"scaleX",
"scaleY",
"scaleZ",
"skewX",
"skewY"
];

return `
Expand Down Expand Up @@ -69,8 +71,8 @@ const selectEasingElement = (animationIx, selectedEase) => {

function clearData() {
data.animations.splice(0, data.animations.length);
data.perspective = '';
perspectiveValue.value = '';
data.perspective = '800px';
perspectiveInput.value = '800px';
localStorage.clear();
addAnimation();
}
Expand Down Expand Up @@ -111,9 +113,10 @@ function addAnimation() {
const animationIx = data.animations.length;
const thisData = {
name: `Animation${animationIx}`,
duration: 0,
duration: 3,
delay: 0,
timingFunction: 'linear',
iterations: 1,
keyframes: [{
key: '0',
properties: [{ propertyName: undefined, value: '' }]
Expand Down Expand Up @@ -174,7 +177,7 @@ function renderForm() {
${selectProperyElement(animationIx, keyframeIx, propertyIx, propertyName)}
<input
type="text"
class="keyframeValue"
class="keyframeInput"
value="${value}"
onchange="setPropertyValue(${animationIx}, ${keyframeIx}, ${propertyIx}, this);"
/>
Expand Down Expand Up @@ -202,7 +205,7 @@ function renderForm() {
Duration:
<input
type="number"
class="durationValue"
class="durationInput"
value="${animation.duration}"
onchange="setDuration(${animationIx}, this.value);"
/> (seconds)
Expand All @@ -211,7 +214,7 @@ function renderForm() {
Delay:
<input
type="number"
class="delayValue"
class="delayInput"
value="${animation.delay}"
onchange="setDelay(${animationIx}, this.value);"
/> (seconds)
Expand All @@ -220,6 +223,15 @@ function renderForm() {
Timing function:
${selectEasingElement(animationIx, animation.timingFunction)}
</div>
<div class="animationDataline">
Iterations:
<input
type="number"
class="iterationInput"
value="${animation.iterations}"
onchange="setIterations(${animationIx}, this.value);"
/> (set to 0 for looping)
</div>
<div class="keyframesWrapper">
${keyframesHTML}
<button type="button" onclick="addKeyframe(${animationIx});" class="txtBtn">Add keyframe</button>
Expand All @@ -238,11 +250,7 @@ function renderForm() {
.propertyWrapper option[value="scaleZ"][selected]
`).length > 0;

if (usePerspective) {
document.querySelector('.perspectiveWrapper').classList.add('show');
} else {
document.querySelector('.perspectiveWrapper').classList.remove('show');
}
perspectiveInput.disabled = !usePerspective;
}

function setPerspective(v) {
Expand All @@ -267,6 +275,11 @@ function setDelay(animationIx, v) {
localStorage.setItem('animationsData', JSON.stringify(data));
}

function setIterations(animationIx, v) {
data.animations[animationIx].iterations = v;
localStorage.setItem('animationsData', JSON.stringify(data));
}

function setTimingFunction(animationIx, e) {
data.animations[animationIx].timingFunction = e.options[e.selectedIndex].value;
localStorage.setItem('animationsData', JSON.stringify(data));
Expand Down Expand Up @@ -323,9 +336,11 @@ function runAnimation() {
const wrapper = document.createElement('div');
wrapper.classList.add(divs ? 'liveAnimationWrapper' : 'liveAnimationComponent');

const thisAnimation = `${animation.name} ${animation.duration}s ${animation.delay}s ${animation.timingFunction} both paused`;
const thisAnimation = `${animation.name} ${animation.duration}s ${animation.delay}s ${animation.iterations === '0' ? 'infinite' : animation.iterations} ${animation.timingFunction} both paused`;
wrapper.style.animation = thisAnimation;
wrapper.dataset.animation = thisAnimation;
console.log(animation);
console.log(thisAnimation);

if (divs) {
wrapper.appendChild(divs);
Expand All @@ -345,7 +360,7 @@ function runAnimation() {
liveWrapper.appendChild(divs);

if (usePerspective) {
liveWrapper.style.perspective = document.querySelector('.perspectiveValue').value;
liveWrapper.style.perspective = document.querySelector('.perspectiveInput').value;
}

setTimeout(() => {
Expand All @@ -360,15 +375,15 @@ function runAnimation() {
function editAnimation() {
liveWrapper.classList.remove('show');
setTimeout(() => {
liveWrapper.querySelector(':scope > .liveAnimationWrapper').remove();
liveWrapper.querySelector(':scope > .liveAnimationWrapper')?.remove();
liveWrapper.querySelector(':scope > .liveAnimationComponent')?.remove();
liveWrapper.style.perspective = null;
}, 500);
}

function rerunAnimation() {

document.querySelectorAll('[data-animation]').forEach(e => {
console.log(e.dataset.animation);
e.style.animation = null;
})

Expand Down
24 changes: 18 additions & 6 deletions motion/customMotion/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ body {
font-family: inherit;
border: none;
background: none;
color: #777;
color: #787;
transition: color 0.3s;
}
.txtBtn:hover {
Expand Down Expand Up @@ -71,14 +71,10 @@ input[type=file] {
}

.perspectiveWrapper {
display: none;
padding: 1em 0.25em;
border-bottom: 1px solid #777;
margin-bottom: 1em;
}
.perspectiveWrapper.show {
display: revert;
}

.animationName {
display: inline-block;
Expand All @@ -93,6 +89,13 @@ input[type=file] {
padding-inline-start: 2em;
margin-bottom: 0.5em;
}
.animationDataline input, .animationDataline select {
background: none;
color: #ccf;
width: 100px;
border: none;
border-bottom: 1px solid;
}

.animationWrapper::after {
content: " }";
Expand Down Expand Up @@ -161,5 +164,14 @@ input[type=file] {
.liveAnimationComponent {
width: 420px;
height: 320px;
background-color: #fff;
border: 1px solid #fff;
background-image: url("https://picsum.photos/420/320");
}
.liveAnimationComponent::after {
content: "TEXT";
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-size: 120px;
}/*# sourceMappingURL=style.css.map */
2 changes: 1 addition & 1 deletion motion/customMotion/style.css.map
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

27 changes: 20 additions & 7 deletions motion/customMotion/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ body {
font-family: inherit;
border: none;
background: none;
color: #777;
color: #787;
transition: color 0.3s;

&:hover {
Expand Down Expand Up @@ -75,14 +75,9 @@ input[type="file"] {
}

.perspectiveWrapper {
display: none;
padding: 1em 0.25em;
border-bottom: 1px solid #777;
margin-bottom: 1em;

&.show {
display: revert;
}
}

.animationName {
Expand All @@ -97,6 +92,14 @@ input[type="file"] {
.animationDataline {
padding-inline-start: 2em;
margin-bottom: 0.5em;

input, select {
background: none;
color: #ccf;
width: 100px;
border: none;
border-bottom: 1px solid;
}
}

.animationWrapper {
Expand Down Expand Up @@ -168,5 +171,15 @@ input[type="file"] {

.liveAnimationComponent {
width: 420px; height: 320px;
background-color: #fff;
border: 1px solid #fff;
background-image: url('https://picsum.photos/420/320');

&::after {
content: 'TEXT';
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-size: 120px;
}
}