I have started building a website using ReactJS, I want to animate div elements into view when the view in scrolled to.
I have used CSS keyframes to add animations like so;
.animateMe {
animation: IntroWelcomeImageAnimation 3s 0.2s forwards cubic-bezier(0.2, 0.8, 0.2, 1);
}
#keyframes IntroLeftAnimation {
0% {
opacity: 0;
transform: translateX(-200px)
}
100% {
opacity: 1;
transform: translateY(0px)
}
}
#keyframes IntroRightAnimation {
0% {
opacity: 0;
transform: translateX(200px)
}
100% {
opacity: 1;
transform: translateY(0px)
}
}
#keyframes IntroWelcomeImageAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
JS File
import React from 'react'
import '../../layout/intro.css';
const IntroPage = () => {
return (
<section className="Intro-Page">
<div className="animateme">
</div>
</section>
)
}
export default IntroPage
However the problem is that the animations only occur when the page is loaded as that is when the elements are too. How can I have it that they transition into view on scroll without using JQuery ?
Look at this library https://www.react-reveal.com/
there are many animations that can be triggered on scroll
Related
I'm doing some CSS animations inside a modal dialog. Here's the pertinent SCSS:
#keyframes grow {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
#keyframes shrink {
from {
transform: scale(1.1);
}
to {
transform: scale(1);
}
}
$duration: 0.5s;
$animationFillMode: both;
&:not(.active):hover, &.active {
img {
animation: grow $duration $animationFillMode;
}
}
&:not(.active) {
img {
animation: shrink $duration $animationFillMode;
}
}
This works well but the problem is, when I open the modal, the animations kick in immediately. For example, because when the modal is first open I'm not hovering on one of the elements, the element instantly shrinks from big to small. I want the element to start in the small state when the modal is open.
Is is possible? TIA
Yes it is, use reverse tag.
Example: animation-direction: reverse;
I am new to React. I have a small app with a login button. When I click the login button and a error from the backend is triggered, a toast error message is rendered. I want to show a animation fade-in and fade out from bottom to top. Only the fade in animation for the toast message is currently working. But how can i trigger a fade out animation?
the errorMessage comes from the redux mapStateToProps function. The clearAuthErrorAction is an action, it will delete the error message from the redux state.
<AuthenticationAlert errorMessage={errorMessage}>
{setTimeout(() => clearAuthErrorAction(), 3000)}
</AuthenticationAlert>
.toast__container {
...
animation: slideInTop 0.5s linear;
}
#keyframes slideInTop {
0% {
transform: translateY(-1.5rem);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
#keyframes slideInBottom {
0% {
transform: translateY(1.5rem);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
The solution was simple. I adjusted the animation in CSS a little bit.
#keyframes slideInTop {
0% {
transform: translateY(-3rem);
opacity: 0;
}
50% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(-20rem);
opacity: 0;
}
}
I'm trying to use loader inside button along with text. I've modified example from vuetify documentation:
<span slot="loader">
<v-icon light class="custom-loader">cached</v-icon>
Loading...
</span>
codepen
On click event button text changes and loader appears. However button's content is not inline.
Please advise how to make button content composed inline and independent of text width?
DEMO: https://codepen.io/anon/pen/ejgEoO
I've added styles for the classes used by vuetify: .v-btn__loading and .v-btn--loader .v-btn__content: So your CSS becomes:
.v-btn__loading {
position: relative;
}
.v-btn--loader .v-btn__content {
display: none;
}
.custom-loader {
animation: loader 1s infinite;
}
#-moz-keyframes loader {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
#-webkit-keyframes loader {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
#-o-keyframes loader {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
#keyframes loader {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
I created a mixin to animate opacity and horizontal/vertical position. I've read through the documentation on SASS site. The mixin currently animates the opacity but fails to move elements -- translateX and translateY.
#mixin keyframes($animation-name, $axis, $start, $end) {
#keyframes #{$animation-name} {
0% {
opacity: 0;
transform: #{$axis}(#{$start});
}
50% {
opacity: 1;
}
100% {
opacity: 1;
transform: #{$axis}(#{$end});
}
}
}
#include keyframes(slideLeft, translateX, 0, 200px);
.slide-left {
animation: slideLeft 2s ease .1s forwards;
}
.redbox {
opacity: 0;
height: 100px;
width: 100px;
background: red;
}
<div class="redbox slide-left">
</div>
Here is a link to the JS fiddle that supports SCSS: enter link description here
I've been banging my head for a while trying to figure out what I'm doing wrong. Any help appreciated.
The problem is how Sass is compiling the code. You need to use a literal string for the definition of the transform value (the translate function). So you need to create the value of the property as a string and then use the unquote function to output the value:
#mixin keyframes($animation-name, $axis, $start, $end) {
#keyframes #{$animation-name} {
0% {
opacity: 0;
transform: unquote("#{$axis}(#{$start})");
}
50% {
opacity: 1;
}
100% {
opacity: 1;
transform: unquote("#{$axis}(#{$end})");
}
}
}
Demo here.
Hope it helps.
I have some arrows image which are linked to kind of "Back to previous page".
I want to animate those arrows with a slight translation when hover it.
My trouble is when hover ends, the arrow instantly goes back to his initial state without any "transition".
Do you know how to do that ?
Thanks.
Here's my code :
#keyframes movingArrow {
0% {
transform: translateX(0);
}
50% {
transform: translateX(-10%);
}
100% {
transform: translateX(0);
}
}
.moving-arrow:hover img {
animation: movingArrow 1s infinite;
}
I tried to show demo for you at codepen https://codepen.io/navdeepsingh/pen/oEwyqP Have a look
const movingArrow = document.querySelector('.moving-arrow');
movingArrow.addEventListener('mouseover', function() {
this.classList.remove('no-animation');
});
.moving-arrow {
border: 1px solid;
border-color: #000 transparent #000 #000;
border-radius: 50%;
width: 100px;
height: 100px;
}
#keyframes movingArrow {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
#keyframes movingArrowReset {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0);
}
}
/* This you need */
.moving-arrow {
animation: movingArrowReset 1s;
}
.moving-arrow:hover {
animation: movingArrow 1s infinite;
}
.no-animation {
-webkit-animation: none !important;
animation: none !important;
}
<div class="moving-arrow no-animation"></div>
Thanks for your help !
A friend helped me by pausing the animation when hover ends, it's not exactly what was targeted but this state is alright for me.
Using anime.js & this codepen
<body>
<h3 class="moving-arrow">← Back</h3>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
</body>
--
const movingArrow = document.querySelector('.moving-arrow');
let animation = anime({
targets: movingArrow,
translateX: '-1%',
direction: 'alternate',
duration: 500,
loop: true,
easing: 'easeInCubic',
autoplay: false
});
movingArrow.addEventListener('mouseover', () => {
console.log("mouseover")
animation.play()
})
movingArrow.addEventListener('mouseleave', () => {
console.log("onmouseleave", animation)
animation.pause()
})