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.
Related
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);
}
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 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');
hey guys i am new to javascriptand i tried creating a banner carousel animation , I.E, i have 3 banners and everytime , a slide comes in the text appears with a animation , the problem i am facing is the animations on my 3 slides ony work till the 3 slide scrolls after that , when again slide 1 slides in , the text on slide 1 is not animated and the animations just don't happen from here on .
I was inspired by banner animations from this website :
banner text animation inspiration .
now what i have tried is the following CSS animations :
#-webkit-keyframes bounceInDown {
0%, 60%, 75%, 90%, 100% {
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, 25px, 0);
}
75% {
transform: translate3d(0, -10px, 0);
}
90% {
transform: translate3d(0, 5px, 0);
}
100% {
transform: none;
}
}
.bounceInDown {
animation-name: bounceInDown;
}
#-webkit-keyframes bounceInRight {
0%, 60%, 75%, 90%, 100% {
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
transform: translate3d(-25px, 0, 0);
}
75% {
transform: translate3d(10px, 0, 0);
}
90% {
transform: translate3d(-5px, 0, 0);
}
100% {
transform: none;
}
}
.bounceInRight {
animation-name: bounceInRight;
}
see the fiddle and u'll understand better .
I am really fascinated by text animations on banners , i am new to Jquery and JS in general , what will i have to do to make the animations appear on the slide , every time a new slide comes in. I have created the CSS-3 animations myself but am stuck here .
Thank you.
Alexander.
If you have 3 items to show in a carousel method you can try this.
Make a "master" div that contain the other 3 divs.
Every div contain image background and text and use the javascript animation for text.
And slide the 3 divs like that:
//function that slide the divs
$(document).ready(function() {
var counter = 1;
$("#d1").show();
function change(){
//Change the 3 divs inside a master div
if(counter == 0){
$("#d3").hide();
$("#d1").show();
counter++;
}else if(counter == 1){
$("#d1").hide();
$("#d2").show();
$("#d3").hide();
counter++;
}else if(counter == 2){
$("#d1").hide();
$("#d2").hide();
$("#d3").show();
counter++;
}else{
counter = 1;
$("#d3").hide();
$("#d1").show();
}
}
//every 6 seconds
setInterval(change, 6000);
});
With the css set the d2 and d3 invisible so you can show and hide them with this javascript code.
Is that you are looking for?
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.