Scope animations

src/animations/Carousel.js

@@ -6,11 +6,11 @@ import { animDuration } from '../utils/store'
 /*
 ** Transition In
 */
-export const animateIn = () => {
+export const animateIn = scope => {
     // Card: Active
     const cardActive = ScrollOut({
         once: true,
-        targets: '.gallery__photo--active',
+        targets: scope.querySelector('.gallery__photo--active'),
         onShown (el) {
             anime({
                 targets: el,
@@ -25,7 +25,7 @@ export const animateIn = () => {
     // Card: Prev
     const cardPrev = ScrollOut({
         once: true,
-        targets: '.gallery__photo--prev',
+        targets: scope.querySelector('.gallery__photo--prev'),
         onShown (el) {
             anime({
                 targets: el,
@@ -41,7 +41,7 @@ export const animateIn = () => {
     // Card: Prev
     const cardNext = ScrollOut({
         once: true,
-        targets: '.gallery__photo--next',
+        targets: scope.querySelector('.gallery__photo--next'),
         onShown (el) {
             anime({
                 targets: el,

src/animations/Locations.js

@@ -6,10 +6,10 @@ import { animDuration } from '../utils/store'
 /*
 ** Transition In
 */
-export const animateIn = () => {
+export const animateIn = scope => {
     // Each location
     const locations = ScrollOut({
-        targets: '#locations_list .location',
+        targets: scope.querySelectorAll('.location'),
         onShown (el) {
             // Timeline
             const tl = anime.timeline({

src/animations/TitleSite.js

@@ -6,11 +6,11 @@ import { animDuration } from '../utils/store'
 /*
 ** Transition In
 */
-export const animateIn = callback => {
+export const animateIn = scope => {
     // On scroll animation
     const title = ScrollOut({
         once: true,
-        targets: '.title-location--inline',
+        targets: scope,
         onShown (el) {
             // Each letters
             anime({

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,