Skip to content

Instantly share code, notes, and snippets.

View ibare's full-sized avatar
😃
I'm happy!!

Kim Mintae ibare

😃
I'm happy!!
  • WoowaBros
  • seoul, korea
View GitHub Profile
@ibare
ibare / main-view.js
Created November 28, 2017 06:26
Woowahan table plugin sample
import Woowahan from 'woowahan';
import template from './main.handlebars';
export const Main = Woowahan.View.create('Main', {
template,
initialize() {
this.setModel({
myList: [
{ all: '부각용', wait: '7', ad: '10', deal: '8' },
START_POSITION = 60
ADJUIST = 5
boxMaker = (y) -> new Layer
name: 'box'
opacity: 0
x: Align.center
y: y
backgroundColor: Utils.randomColor()
width: Screen.width - 10
@ibare
ibare / App.tsx
Created December 29, 2018 13:37
FramerX ToggleButton Study#1.2
import { Data, animate, Override, Animatable } from "framer"
let isOriginalSize = true
const data = Data({
scale: Animatable(1)
})
export const ToggleButton: Override = () => {
return {
@ibare
ibare / KeepGrowing.tsx
Last active January 1, 2019 04:16
FramerX KeepGrowing interaction
import { Data, animate, Override, Animatable } from "framer"
const STABLE_COLOR = '#FFF'
const GROWING_COLOR = '#F00'
let isGrowing = false
const data = Data({
backgroundColor: Animatable(STABLE_COLOR),
likeScale: Animatable(1)
import { Data, animate, Override, Animatable } from "framer"
const data = Data({
plusOpacity: 1,
minusOpacity: 0.3,
page: 0
})
export const PlusButtonStatus: Override = () => {
return {
@ibare
ibare / BlinkingCircle.tsx
Created April 26, 2019 08:56
깜빡이는 원
import * as React from "react"
import { Frame, useCycle } from "framer"
// Open Preview (CMD + P)
// API Reference: https://www.framer.com/api
export function BlinkingCircle() {
const [animate, cycle] = useCycle(
{ backgroundColor: "#ff2020" },
{ backgroundColor: "#ffbc20" }
@ibare
ibare / request-async-task-status.tsx
Created June 4, 2019 08:46
비동기 작업 요청 상태
const OrderList: React.FC<IProps> = props => {
const [request, completeRequest] = React.useState(false);
const [requestId, upddateRequestId] = React.useState(0);
if (request && checkCompleteTask(props.asyncTasks, requestId)) {
completeRequest(false);
}
React.useEffect(() => {
const {
function random(max) {
return Math.floor(Math.random()*max);
}
const startButton = document.querySelector('#start');
const boxes = [
document.querySelector('#b1'),
document.querySelector('#b2'),
document.querySelector('#b3')
];
import * as React from "react"
import { Frame, useCycle, useMotionValue, useTransform } from "framer"
// Open Preview (CMD + P)
// API Reference: https://www.framer.com/api
export function MotionAndTransform() {
const yPosition = useMotionValue(200)
const xPosition = useMotionValue(0)
const doubleXPosition = useTransform(xPosition, v => v * 2)
Promise.resolve()
.then(() => {
return 'OK'
})
.then(a => `${a} ${Date.now()}`)
.then(b => new Promise((resolve) => {
setTimeout(() => resolve(`${b} + delay`), 1000);
}))
.then(out => console.log(out))
.catch(e => console.error(e));