diff --git a/src/animations/index.js b/src/animations/index.js index c31598c..4e9c1c8 100644 --- a/src/animations/index.js +++ b/src/animations/index.js @@ -89,7 +89,7 @@ export const animateIn = () => { const titleWorld = ScrollOut({ once: true, targets: '#title-world', - onShown (el, ctx) { + onShown (el) { anime({ targets: el.querySelectorAll('span'), translateY: ['100%', 0], diff --git a/src/molecules/Photo.svelte b/src/molecules/Photo.svelte index 0561684..a34091a 100644 --- a/src/molecules/Photo.svelte +++ b/src/molecules/Photo.svelte @@ -27,23 +27,6 @@ */ onMount(() => { animateIn(scope) - - // Parallax on photo when the image has been loaded - // const parallaxNumber = basicScroll.default.create({ - // elem: photoElement.querySelector('.photo__number'), - // direct: photoElement, - // from: 'top-bottom', - // to: 'bottom-top', - // props: { - // '--translate': { - // from: '-75%', - // to: '-25%' - // } - // } - // }) - // parallaxNumber.start() - // parallaxNumber.calculate() - // parallaxNumber.update() }) @@ -69,8 +52,8 @@ {imgAlt} diff --git a/src/organisms/Carousel.svelte b/src/organisms/Carousel.svelte index bf920a6..c34940a 100644 --- a/src/organisms/Carousel.svelte +++ b/src/organisms/Carousel.svelte @@ -125,17 +125,6 @@ // Send current photo to event for init sendCurrentPhoto({ init: true }) }) - - - /* - ** TODO: REVEAL ANIMATION ON CAROUSEL - ** Fix the CSS priority? Cancel the transition delay and duration? - data-aos="{ - (photo === prevPhoto) ? 'carousel-prev' : - (photo === currentPhoto) ? 'carousel-active' : - (photo === nextPhoto) ? 'carousel-next' : '' - } - */ diff --git a/src/style/_animations.scss b/src/style/_animations.scss index 1abc404..9cc4139 100644 --- a/src/style/_animations.scss +++ b/src/style/_animations.scss @@ -31,158 +31,6 @@ } } -// Translate each letter from a direction -// [data-aos="letters-translate-top"], -// [data-aos="letters-translate-bottom"] { -// white-space: nowrap; - -// span { -// display: inline-block; -// transition: transform 1s $ease-quart; -// will-change: transform; - - -// @for $i from 1 to 8 { -// &:nth-child(#{$i}) { -// transition-delay: $i * 40ms; -// } -// } -// } - -// &.aos-animate { -// span { -// transform: translate(0, 0); -// } -// } -// } -// [data-aos="letters-translate-top"] { -// span { -// transform: translate(0, -100%); -// } -// } -// [data-aos="letters-translate-bottom"] { -// span { -// transform: translate(0, 100%); -// } -// } - -// // Carousel prev/active/next photos -// [data-aos="carousel-prev"] { -// transform: translate(-16%, -4%) rotate(-3deg) scale(0.8); -// opacity: 0; -// transition-duration: 1.6s; -// transition-delay: 0.45s; - -// &.aos-animate { -// transform: translate(-9%, -1%) rotate(-1deg) scale(0.9); -// opacity: 1; -// } -// } -// [data-aos="carousel-active"] { -// transform: scale(0.8); -// opacity: 0; -// transition-delay: 0.4s; - -// &.aos-animate { -// transform: scale(1); -// opacity: 1; -// } -// } -// [data-aos="carousel-next"] { -// transform: translate(16%, -4%) rotate(3deg) scale(0.8); -// opacity: 0; -// transition-duration: 1.6s; -// transition-delay: 0.5s; - -// &.aos-animate { -// transform: translate(9%, -1%) rotate(1deg) scale(0.9); -// opacity: 1; -// } -// } - - -// // Scale down and Fade in -// [data-aos="scale-down-fade-in"] { -// transform: scale(1.1); -// opacity: 0; -// transition: transform 2s $ease-quart, opacity 2s $ease-quart; -// will-change: transform, opacity; - -// &.aos-animate { -// transform: scale(1); -// opacity: 1; -// } -// } - - -// // Place title reveal -// [data-aos="place-title"] { -// .anim-fade { -// opacity: 0; -// transition: opacity 0.9s $ease-inout; -// transition-delay: 1.8s; -// will-change: opacity; -// } -// .anim-translate { -// transform: translateY(120%); -// transition: transform 0.9s $ease-quart; -// transition-delay: 1.8s; -// will-change: transform; -// } -// .place__title_of { -// transition-delay: 2.0s; -// } -// .place__title_name { -// transition-delay: 2.1s; -// } -// .button-control { -// transition-delay: 2.2s; -// transition-duration: 0.6s; -// } - -// &.aos-animate { -// .anim-fade { -// opacity: 1; -// } -// .anim-translate { -// transform: translateY(0); -// } -// } -// } - -// // Location reveal -// [data-aos="location"] { -// img { -// opacity: 0; -// transform: scale(1.15); -// transition: opacity 0.6s $ease-quart, transform 0.6s $ease-quart; -// will-change: opacity, transform; -// } - -// h3, p { -// transform: translateY(150%); -// transition: transform 0.6s $ease-quart; -// will-change: transform; -// } -// h3 { -// transition: all 0.6s $ease-quart; -// transition-delay: 0.1s; -// } -// p { -// transition-delay: 0.2s; -// } - -// &.aos-animate { -// img { -// opacity: 1; -// transform: scale(1); -// } -// h3, p { -// transform: translateY(0); -// } -// } -// } - /* ==========================================================================