Last active
June 12, 2017 20:22
-
-
Save T4rk1n/0f9e48a7430b3f4a36c32b9cbf1b5935 to your computer and use it in GitHub Desktop.
VanillaJS (ES7) animations.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const getOffset = (elem) => { | |
| const off = elem.getBoundingClientRect() | |
| return { | |
| left: off.left + window.scrollX, | |
| top: off.top + window.scrollY | |
| } | |
| } | |
| const getFontSize = (elem) => parseFloat(window.getComputedStyle(elem, null).getPropertyValue('font-size')) | |
| const defaultFadeInOptions = { | |
| display:'block', division:60, callback: () => null | |
| } | |
| const fadeIn = (elem, options=defaultFadeInOptions) => { | |
| const { display, division, callback } = {...defaultFadeInOptions, ...options } | |
| elem.style.opacity = 0 | |
| elem.style.display = display | |
| const increment = 1 / division | |
| const fade = () => { | |
| let value = parseFloat(elem.style.opacity) + increment | |
| if (value <= 1) { | |
| elem.style.opacity = value | |
| requestAnimationFrame(fade) | |
| } else { | |
| callback() | |
| } | |
| } | |
| fade() | |
| } | |
| const defaultFadeOutOptions = { | |
| division: 60, callback: () => null | |
| } | |
| export const fadeOut = (elem, options=defaultFadeOutOptions) => { | |
| const { division, callback } = {...defaultFadeOutOptions, ...options} | |
| elem.style.opacity = 1 | |
| const increment = 1 / division | |
| const fade = () => { | |
| if ((elem.style.opacity -= increment) <= 0) { | |
| elem.style.display = 'none' | |
| callback() | |
| } else { | |
| requestAnimationFrame(fade) | |
| } | |
| } | |
| fade() | |
| } | |
| const defaultMoveOptions = { | |
| callback: () => null, height: 100, width: 100, division: 100 | |
| } | |
| const moveOut = (elem, options=defaultMoveOptions) => { | |
| const { callback, height, width, division } = {...defaultMoveOptions, ...options} | |
| const moveHeight = height / division | |
| const moveWidth = width / division | |
| const offsets = getOffset(elem) | |
| const destinationX = offsets.left + width | |
| const destinationY = offsets.top + height | |
| elem.style.position = 'absolute' | |
| const move = () => { | |
| let endX = false, endY = false | |
| const { left, top } = getOffset(elem) | |
| if (left < destinationX) | |
| elem.style.left = left + moveWidth + 'px' | |
| else | |
| endX = true | |
| if (top < destinationY) | |
| elem.style.top = top + moveHeight + 'px' | |
| else | |
| endY = true | |
| if (!endX || !endY) | |
| requestAnimationFrame(move) | |
| else | |
| callback() | |
| } | |
| move() | |
| } | |
| const defaultDeflateOptions = { | |
| callback: () => null, division: 100 | |
| } | |
| const deflate = (elem, options=defaultDeflateOptions) => { | |
| const { division, callback } = {...defaultDeflateOptions, ...options} | |
| const decrementX = Math.ceil(elem.offsetWidth / division) | |
| const decrementY = Math.ceil(elem.offsetHeight / division) | |
| const decrementFont = Math.ceil(getFontSize(elem) / division) | |
| elem.style.height = elem.offsetHeight + 'px' | |
| const defl = () => { | |
| let endX = false, endY = false | |
| if (elem.offsetWidth > 0) { | |
| elem.style.width = (elem.offsetWidth - decrementX) + 'px' | |
| } else { | |
| endX = true | |
| } | |
| if (elem.offsetHeight > 0) { | |
| elem.style.height = (elem.offsetHeight - decrementY) + 'px' | |
| } else { | |
| endY = true | |
| } | |
| elem.style.fontSize = (getFontSize(elem) - decrementFont) + 'px' | |
| if (!endX || !endY) { | |
| requestAnimationFrame(defl) | |
| } else { | |
| callback() | |
| } | |
| } | |
| defl() | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment