Scope animations

src/animations/Transition.js

@@ -5,21 +5,23 @@ import { animDuration, animDurationLong } from '../utils/store'
 /*
 ** Transition In
 */
-export const animateIn = () => {
+export const animateIn = scope => {
     // Panel itself
     const transition = anime({
-        targets: '#transition',
+        targets: scope,
         height: ['100%', '100%'],
+        scale: [1.1, 1],
         opacity: [0, 1],
-        duration: 200,
+        duration: 400,
         delay: 0,
         easing: 'easeInOutQuart'
     })
     // Globe icon
     const globe = anime({
-        targets: '#transition svg',
+        targets: scope.querySelector('svg'),
         opacity: [0, 1],
-        duration: 200,
+        translateY: [32, 0],
+        duration: 400,
         delay: 0,
         easing: 'easeInOutQuart'
     })
@@ -30,10 +32,10 @@ export const animateIn = () => {
 /*
 ** Transition Out
 */
-export const animateOut = callback => {
+export const animateOut = (scope, callback) => {
     // Panel itself
     const transition = anime({
-        targets: '#transition',
+        targets: scope,
         height: ['100%', 0],
         duration: animDurationLong,
         delay: 800,
@@ -43,7 +45,7 @@ export const animateOut = callback => {
 
     // Title
     const title = anime({
-        targets: '#transition .title-location',
+        targets: scope.querySelector('.title-location'),
         opacity: 0,
         duration: 600,
         delay: 1400,
@@ -52,7 +54,7 @@ export const animateOut = callback => {
 
     // Globe icon
     const globe = anime({
-        targets: '#transition svg',
+        targets: scope.querySelector('svg'),
         opacity: 0,
         duration: 600,
         delay: 1400,