WIP Animations all over site
- Run a transition In for each page - Involve a "loader" panel on page change - TODO: tweak the animations and finish the concept
This commit is contained in:
@@ -1,10 +1,19 @@
|
||||
/* ==========================================================================
|
||||
PARALLAX EFFECTS
|
||||
PAGE TRANSITION
|
||||
========================================================================== */
|
||||
// Parallax title: Translate X
|
||||
.title-parallax {
|
||||
transform: translateX(var(--translateX));
|
||||
will-change: transform;
|
||||
.transition {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1000;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: $color-primary;
|
||||
will-change: height, transform, padding-top, padding-bottom;
|
||||
}
|
||||
|
||||
|
||||
@@ -15,124 +24,164 @@
|
||||
.anim-mask {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 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 1000ms $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: 450ms;
|
||||
// Translate each letter from a direction
|
||||
// [data-aos="letters-translate-top"],
|
||||
// [data-aos="letters-translate-bottom"] {
|
||||
// white-space: nowrap;
|
||||
|
||||
&.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: 400ms;
|
||||
|
||||
&.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: 500ms;
|
||||
|
||||
&.aos-animate {
|
||||
transform: translate(9%, -1%) rotate(1deg) scale(0.9);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
// span {
|
||||
// display: inline-block;
|
||||
// transition: transform 1s $ease-quart;
|
||||
// will-change: transform;
|
||||
|
||||
|
||||
// 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;
|
||||
// @for $i from 1 to 8 {
|
||||
// &:nth-child(#{$i}) {
|
||||
// transition-delay: $i * 40ms;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
&.aos-animate {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
// &.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;
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// 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;
|
||||
}
|
||||
// // 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;
|
||||
|
||||
h3, p {
|
||||
transform: translateY(150%);
|
||||
transition: transform 0.6s $ease-quart;
|
||||
will-change: transform;
|
||||
}
|
||||
h3 {
|
||||
transition: all 0.6s $ease-quart;
|
||||
transition-delay: 100ms;
|
||||
}
|
||||
p {
|
||||
transition-delay: 200ms;
|
||||
}
|
||||
// &.aos-animate {
|
||||
// transform: scale(1);
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
|
||||
&.aos-animate {
|
||||
img {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
h3, p {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// // 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);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user