I m trying to translate a div with css transform, and to apply to the movement a transition with css transition.
Is it possible to specify a "start" position to the element? I need to translate the element before the animation.
.mediaViewItem:nth-child(3) {
transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
transform: translate3d(-200%, 0, 0); translate3d(-100%, 0, 0);
}
in the code above I need the start to be translate3d(-200%, 0, 0) without animation, and then move from -200% to -100% with the transition.
Any idea?
That is the initial position you set for the element, add a class using javascript
that it restores the element transforn to the normal position when you need to do the animation. Eg. add via js a class like:
.animated {
transform: translate3d(0, 0, 0); translate3d(0, 0, 0);
}
Related
I want to animate the width of a svg rect.
Initially, rect width should be 0, on button click the width should grow in 5 seconds to 100% of the width.
I create this codesandbox.
I basically create this class:
.grow {
animation: growAnimation 5s linear 1;
}
#keyframes growAnimation {
from {
transform: scale(0%, 100%);
}
to {
transform: scale(100%, 100%);
}
}
I assign this class only when user clicks on button but it doesn't work: rect width is 0 and on click is 100%, there is no growing during 5 seconds.
Why?
Is there a better way to to this? In the future I have to do also a press and hold animation:
on button click the animation start
on button hold the animation continue
if user releases the button before the growing animation ends, then there is the inverse animation (from 100% to 0%).
you should pass parameters to scale property as number not as percentage:
#keyframes growAnimation {
from {
transform: scale(0, 1);
}
to {
transform: scale(1, 1);
}
}
See this Working Example
I'm trying to change the background image when the item is clicked. I want a cover photo - when clicked and opened the image changes to a background photo.
.el:nth-child(1) {
transform: translate3d(0%, 0, 0);
transform-origin: 50% 50%;
}
.cont.s--el-active .el:nth-child(1):not(.s--active) {
transform: scale(0.5) translate3d(0%, 0, 0);
opacity: 0;
transition: transform 0.95s, opacity 0.95s;
}
.el:nth-child(1) .el__inner {
transition-delay: 0s;
}
.el:nth-child(1) .el__bg {
transform: translate3d(0%, 0, 0);
}
.el:nth-child(1) .el__bg:before {
transition-delay: 0s;
background-image:
url("https://cdn.shopify.com/s/files/1/2084/8209/files/IMG_8289.JPG?
13764159910008904703");
}
I want to add a second image as this currently displays only one image as when closed and opened.
Here is what I'm trying to replicate from CodePen
I should mention I have converted the SCSS to CSS
You can rely on the active class set there:
.el:nth-child(1).s--active .el__bg:before {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/onepgscr-3.jpg")!important;
}
Or use :after so you are able to do some transitions instead of replacing first image directly.
I have a div element that I'd like to slide out on scroll. I've applied the slideOutLeft animation and included the data-wow-offset parameter and the animation itself works, but unfortunately when I load the page initially, the animated element is hidden. The element should start off visible and then slide out left and become hidden. Not sure why this isn't working.
#-webkit-keyframes slideOutLeft {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(-200%, 0, 0);
transform: translate3d(-200%, 0, 0);
}
}
I've found a workaround via a Github convo about the same issue
I just added:
.wow {
visibility: visible !important;
}
to my css file and the element is no longer hidden on page load.
I have an element that i would like off screen to begin with, but then on click of a link, that element gets animated in (using animate.css). But, i'm not sure what css method to use to hide that element off screen so it can be animated in.
The js i'm using is:
$('.services-wrapper').on('click','.services-panel__cta',function(e){
e.preventDefault();
$('.services-panel__secondary').addClass('animated bounceInright');
})
And i have tried doing:
position: absolute;
left: 100%
and
left: -9999px
But i'm not sure that even makes sense to try tbh.
Any help really gratefully received!
With animate.css, you don't need to specify the position beforehand. You can hide it with display: none; and then add an additional class that adds display: block;.
JS Fiddle
CSS
.services-panel__secondary {
display: none;
}
.show {
display: block;
}
JS
$('.services-wrapper').on('click', '.services-panel__cta', function() {
$('.services-panel__secondary').addClass('show animated bounceInRight');
})
Or just use show() instead of adding the class:
JS Fiddle
$('.services-wrapper').on('click', '.services-panel__cta', function() {
$('.services-panel__secondary').show().addClass('animated bounceInRight');
});
And Lastly
If you can edit the html directly, you can add the animate.css classes directly and just show() the element:
JS Fiddle
Add classes in html and hide with display: block;
<div class="services-panel__secondary animated bounceInRight">
Bounce this in
</div>
JQuery- Simply show it and it will bounce in.
$('.services-wrapper').on('click', '.services-panel__cta', function() {
$('.services-panel__secondary').show();
})
IMPORTANT:
With animate.css, notice that "right" should have an uppercase "R" like bounceInRight
animate.css actually takes care of this for you with it's animations. Check out the source of bounceInRight (which you are using). As you can see, it moves the x-value around using transform: trasnslate3d(...). As mentioned by
#dwreck08 (+1), you only need to worry about hide/show.
#keyframes bounceInRight {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
from {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0);
}
75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0);
}
to {
-webkit-transform: none;
transform: none;
}
}
A solution which allows animating in and out
This example code comes from Animate.css's own documentation. I have expanded on it to include adding and removing a show class, which will maintain state once the animation is complete.
const animateCSS = (element, animation, prefix = 'animate__') => {
// Create a Promise and return it
new Promise((resolve, reject) => {
const animationName = `${prefix}${animation}`;
const node = document.querySelector(element);
// Add class to display element when animating in
if (animation.indexOf('In') >= 0)
node.classList.add('show');
node.classList.add(`${prefix}animated`, animationName);
// When the animation ends, we clean the classes and resolve the Promise
function handleAnimationEnd(event) {
event.stopPropagation();
// Remove class to display element when animating out
if (animation.indexOf('Out') >= 0)
node.classList.remove('show');
node.classList.remove(`${prefix}animated`, animationName);
resolve('Animation ended');
}
node.addEventListener('animationend', handleAnimationEnd, { once: true });
});
}
Set initial styles to display: none and create a show class with display: block. Then call the method we created with the following:
animateCSS('.services-panel__secondary', 'bounceInright');
http://henrybuiltfurniture.com/new/furniture.php?p=wave-stool
I have a series of large images that I need to transition between smoothly (not necessarily with jquery - maybe I could use css3 somehow?) and I can't seem to do so with jQuery.
Here's the code that moves the document, effectively moving the image:
$('body').animate({scrollLeft: $("#limiter"+(viewing+1)).css("left")}, image_change_speed, 'easeOutCirc', function() {
//irrelevant code here
}
Any help is appreciated.
try adding this to your CSS style sheet:
.limiter * {
transition:all 1s ease-in-out;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
Basically, we're adding hardware acceleration and then smoothing effect with transition (you can adjust it at will, of course)
You should not use straight up jQuery for more demanding animations, as you mentioned. I would scrap jQuery alltogether or get a css3 animation plugin for it. Using vanilla javascript, this is a really simplified example of how to animate the images:
Say you have two images:
<img src="http://henrybuiltfurniture.com/new/images/6_5.jpg" class='bigimg img-1'>
<img src="http://henrybuiltfurniture.com/new/images/6_4.jpg" class='bigimg img-2'>
And some styles to put them at the right place:
.bigimg {
position: absolute;
width: 1920px;
height: 1080px;
transition: transform 2s;
}
.img-1 {
left: 0;
}
.img-2 {
left: 1920px;
}
Then you could easily animate by just changing the bigimg's transform:
var bigImages = document.querySelectorAll('.bigimg');
for(var i = 0; i < bigImages.length; i++) {
var image = bigImages[i];
image.style.transform = 'translateX(-1920px)';
}
Example on JSFiddle
Paul irish has a great article going through why it is better to animate transform rather than position: absolute with left and top attributes if you would like some further reading.