jQuery animation of large image moving choppy - javascript

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.

Related

Adding a secondary image to a nth child when clicked

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.

Wow JS hiding elements when page is loaded

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.

Initial state of element to be animated in

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');

Better/Faster scrolling in mobile safari?

I have a project with angularjs and bootstrap where I'm trying to replicate iOS's navigationController.
The problem is speed. It seems like one of the biggest issues is scrolling up/down when doing the transition between views. It just doesn't feel right.
My question is: how can I improve the speed of scrolling up/down and left/right in mobile safari iOS? I know it's doable (ionic is one good example, but we can't use them since they are mobile only).
This is my current code:
/* View animations */
.view-animate-container {
position: relative;
width: 100%;
}
.view-animate {
-webkit-backface-visibility: hidden;
}
.view-animate.ng-leave {
z-index: 1054;
}
.view-animate.ng-enter {
z-index: 1053;
}
.view-animate.ng-enter, .view-animate.ng-leave {
-webkit-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s;
transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s;
position: absolute;
width: 100%;
display: block;
}
.rtl .view-animate.ng-enter {
-webkit-transform: translate3d(100%, 0, 0);
-webkit-transition-delay: 0.1s;
opacity: 0;
}
.rtl .view-animate.ng-enter.ng-enter-active {
-webkit-transform: translate3d(0, 0, 0);
opacity: 1;
}
.rtl .view-animate.ng-leave.ng-leave-active {
-webkit-transform: translate3d(-100%, 0, 0);
opacity: 0;
}
.ltr .view-animate.ng-enter {
-webkit-transform: translate3d(-100%, 0, 0);
-webkit-transition-delay: 0.1s;
opacity: 0;
}
.ltr .view-animate.ng-enter.ng-enter-active {
-webkit-transform: translate3d(0, 0, 0);
opacity: 1;
}
.ltr .view-animate.ng-leave.ng-leave-active {
-webkit-transform: translate3d(100%, 0, 0);
opacity: 0;
}
/* End of View animations */
<div class='view-animate-container' ng-class='direction'>
<div id='mApp' ng-view class='view-animate' autoscroll='false'></div>
</div>
// Random scrollHeight fix. Moves the scroll position up during the transition.
function scrollToTop() {
var ua = $('html')[0].className;
var diff = document.body.scrollHeight;
var delay = ((ua.indexOf('ua-mobile') > -1 && ua.indexOf('ua-webkit') > -1) ? (320 + diff/17) : 50);
window.setTimeout(function() {
window.scrollTo(0, 0);
}, delay)
}
I would try two things:
On the overflowed div (that is the div that you have set the overflow property), setting the overflow property to 'scroll', rather then using 'auto'.
Then, use $scope.$evalAsync which will be executed right after the digest has been finished (but before the actual rendering).
If it still doesn't work, you can combine the $evalAsync and setTimeout (or $timeout) - setting the timeout inside the $evalAsync.

JQuery UI `Slide` Transition Issues With CSS `transform

When executing JQueryUI's slide transition on an element with a CSS transform the top half of the element is being hidden during the animation. Is there some way I can adjust my JQueryUI animation and/or CSS to prevent this from happening?
JSFiddle: I've created a JSFiddle with the appropriate code - http://jsfiddle.net/9dTkL/4/
To accomplish the vertical centering, I do the following:
<style>
#banner-welcome {
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
</style>
The top and transform within the CSS allow the banner to fall into the center.
To perform the animation, I execute the following:
$('#banner-welcome').toggle(
'slide',
function()
{
document.location.href = "#/" + destination;
}
);
When the animation starts the top half of the #welcome-banner disappears, and the bottom half animates. I've removed the transform from the CSS and everything works great -- except that my banner is no longer centered.
I am performing the vertical centering this way due to a combination of AngularJS and ng-views. I had previously used JavaScript to center the element, but adding the logic to the $(window).resize() event caused problems in other ng-views. I needed a way to isolate this to the specific ng-view.
Is there something I can adjust with my animation or CSS that would not cause the top half of the banner to disappear?
toggle is removed as of 1.9: http://api.jquery.com/toggle-event/
so please use animate or slideDown or slideUp method
also the transform property doesn't need prefixes
#banner-welcome {
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
have you tried adding transform-origin property
#banner-welcome {
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
width: 100%;
top: 50%;
transform-origin: 50% 50% 0;
transform: translateY(-50%);
}
im not seeing the top part disappear in latest Firefox 24

Categories