flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Cleanup

Browse Source
This commit is contained in:
Félix Péault
2020-03-11 17:23:58 +01:00
parent 8c9000a7c9
commit 8aa2524e7f
4 changed files with 2 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/animations/index.js
View File

@@ -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],

19
src/molecules/Photo.svelte
View File

@@ -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()
})
</script>
@@ -69,8 +52,8 @@
<source media="(min-width: 300px)" data-srcset={getThumbnail(photo.image.private_hash, 400)}>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/+HRfwAJmQPS6gISLwAAAABJRU5ErkJggg=="
data-src="{getThumbnail(photo.image.private_hash, 900)}"
width={defaultWidth} height={defaultHeight}
alt={imgAlt}
width={defaultWidth} height={defaultHeight}
class="lazyload"
>

11
src/organisms/Carousel.svelte
View File

@@ -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' : ''
}
*/
</script>
<svelte:window on:keydown={keyboardNav} />

152
src/style/_animations.scss
View File

@@ -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);
// }
// }
// }
/* ==========================================================================