Working with angular and using animate.css to handle some animations that get applied to views as they enter and leave. I've come into a problem that has eluded my attempts to solve it thus far.
What I'm after: Getting various elements to slide in/out as if you're panning across
The problem: While the actual animations work just fine, the view change renders them with an offset so that they don't appear to be sliding. After a second the correct styles get applied, but I can't tell why. I've looked at the docs for ng-animate, tried deactivating modules, and isolating the problem in other ways but can't seem to figure it out.
Misc.:
I'm using animate.css to handle the transitions, but that doesn't seem to be the culprit as the transitions work 'normally'/as they should in some cases (on refresh, on direct URL load)
this appears to be a reflow, which happens sometimes on href nav but not on refresh. Tried tracking this down in the ng-animate docs but I can't make out why/how it only seems to happen on href nav from links and not on a refresh (something to do with template cacheing?)
doesn't seem to be browser-specific
haven't seen any questions anywhere on SO or elsewhere talking about this, so resources work as in addition to answers
I can include more code once someone has an idea of what area might be causing the problem. Don't want to include the entire project at first :)
Using:
everything 1.2.21
angular
ngAnimate
ngMocks
resource
sanitize
Here's what happens:
(note: the second command I give is a refresh, where the animation happens normally)
Some initial code:
I use this mixin to handle the .ng-enter and similar classes
#import "../bower_components/animate.css/animate.sass";
#mixin panInner($direction, $LeftOrRight) {
#extend .animated;
#extend .slide#{$direction}#{$LeftOrRight};
}
#mixin pan{
.ng-enter, .ng-enter-active {
#include panInner(In, Right);
}
.ng-leave, .ng-leave.ng-leave-active {
#include panInner(Out, Left);
}
.ng-enter-active, .ng-leave-active {
animation-duration: 2s;
}
}
#include pan;
This is for a project I've been really close-up to for a long while now, so it's always possible that I've missed something dumb, but I hope not.
It appears you are animating the pages in Position: relative rather than Position: absolute.
So what this means is that as the first section animates out, the second section still thinks it's there "above" it and is offset downwards accordingly until the first section has completed its animation and is removed from the DOM.
With Position: absolute the page element being animated in won't care about the previous sibling element being animated out. Just keep in mind that both should be inside of the same wrapper element with a relative or absolute position so that they don't jump up when switching to Position: absolute.
Related
I am a paid user of the Ninja Slider responsive image slider script (CSS/Javascript) and it always has worked pretty well. Unfortunately, though, Google now is warning that it is causing an unacceptably large CLS (Cumulative Layout Shift) placed in a responsive layout. I am optimistic that someone on Stackoverflow has tweaked this code — or similar code — and can help.
This slider loads quickly enough on my connection that it is difficult for me to even see this shift, but I agree that any shift could be troublesome and I would like to fix it accordingly. Essentially, I would like to modify the code so it quickly outlines a dynamic box the size of the image that will be loaded before loading the image so the following text doesn’t shift down should the user scroll past and start reading before the first image in the slider loads.
In Google’s default Optimize Cumulative Layout Shift advice, the company recommends adding the width and height of an image — like in the pre-responsive days — and adding height: auto to the img code in CSS like so:
img {
width: 100%; /* or max-width: 100%; */
height: auto;
}
This works for images displayed directly in the dynamic layout, but not for images within the slider code because the images are not presented as an img tag, but instead presented as links (a href tags) within list items in an unordered list.
I nevertheless tried dutifully adding height: auto in the applicable CSS file where I thought it could be relevant, within the #ninja_slider div and slider-inner classes. This didn’t break anything, but it didn’t solve the issue, either. Default CSS code is here.
As requested, I believe this this the relevant code, but I could be wrong, and viewing the full code might be useful:
#ninja-slider {
width:100%;
background:#191919;
padding: 30px 0;
margin:0 auto;
overflow:hidden;
box-sizing:border-box;
}
#ninja-slider .slider-inner {
max-width:600px;
margin:0 auto;/*center-aligned */
font-size:0px;
position:relative;
box-sizing:border-box;
}
This post on StackOverflow is the only relevant one I was able to dig up, and the answer suggests that adding display: none on “blocks” using CSS classes would resolve the issue.
Based on my understanding of how display:none works, I assumed this would just prevent the slider from appearing, but I nevertheless tried adding it to the ninja_slider div as well as the slider_inner classes and ul and li elements. It did not work. My code is similar to the default, but if a live implementation is helpful, it is here.
What am I overlooking? How can I alter the slider code to quickly display a box that will soon hold the image so that subsequently placed text will remain in place and not be pushed down when the image loads? Thank you.
Your CLS score is essentially telling you that the layout is shifting as its loading. The best advice one can give in a situation like this is
Hit F12 on the page in question to open Developer Tools
Navigate to the network Tab
Set the Network Speed Select value to 3G
Refresh the page with Developer Tools still open to see a slow motion load of the page which allows you to identify Which elements are "shifting" the layout and changing size as page loads.
You want to be able to define all your element sizing early on in the head of the page using a style tag in the of that page or within the stylesheet (if you must,I believe putting too much inside the stylesheet and depending on things like grid sizes to load defeat this purpose due to sheer size of the css files eventually negates any positive or it wont be seen quick enough as the User is still waiting for the CSS File to load).
Using the above method you can then try to apply CSS that will prevent the Size Shifts , and example of this is with image attribute heights.
This is a tricky topic because you have to also understand CSS casscading (the understanding of style application heirachy essentially) to prevent causing new responsive image issues because the width and height attribute will most like override the current image styling on your page.
What I would honestly suggest is a click function that initates or accesses the slider on click only because the waiting of the entire slider to load and then it shifting the container to a different size is what is causing the actual problem.
I am working on a site and integrated the bootstrap carousel. Everything is working well, except for a one thing that: When I click on next or previous icon, images will jump a little bit and I feel very annoying about it. I tried every solutions which I have searched and applied but it still didn't work.
Can anybody help me with this problem, the url as below:
https://test5.extensionesdepelobaratas.net/hair-blog/
You will see the first carousel which have number from 1 to 8.
Look forward to hearing solutions from everybody.
Thank you very much.
It looks like there are a handful of elements with the class .item which are not properly being transitioned when it comes to it's attributes and the active class ones which are being applied thereafter.
If you add the following CSS to your .carousel-inner .item elements, all of the values will be transitioned properly.
.carousel-inner .item { transition: all 0.5s ease !important; }
Tested this with the existing website and there is no more 'jumpiness' when it comes to the elements sliding in. Instead, they grow rather than jump to the size which the carousel is setting them as.
Finally trying to learn responsive design and needed a slideshow. I was able to easily get Owl Carousel up and running on one page and love it (right above footer on test page): http://cismiami.org/new.html
I'd like to tweak the slideshow to use for staff photos: http://cismiami.org/owlstaff.html
I found instructions for switching to arrows and getting them on the same line as the images, but cannot figure out how to get them to appear outside the image carousel instead of superimposed on them. I'm using a separate folder for the CSS files so I don't mess up the first sample, but here are my CSS files for the Staff page:
http://cismiami.org/js/owlstaff/assets/owl.carousel.css
http://cismiami.org/js/owlstaff/assets/owl.theme.default.css
Any help would be greatly appreciated.
I'm not a professional (just a hobbyist), but would like to think i know bit of this and that. It's difficult to test this myself since most of the assets are elsewhere and you're working on someone else's code, which itself is often messy to begin with. If you would've designed and coded it from the ground-up, you would know exactly how to do it. Learning so much in the process.
Anyways, in 'owl.theme.default.css' the arrows can be customized as you said. The quick and dirty method (and bad solution in this case) of getting the arrows outside of Carousel would be to add a negative positional value to left and right arrows. Since they are absolutely positioned, they can be moved around quite freely but are not exactly responsive on their own. This following method is breaking their intended purpose, staying on top of the pictures and thus with the flow.
Add negative value to left and right, say 40px:
.owl-prev { left: -40px; }
.owl-next { right: -40px; }
This will however break the responsiveness, since once you start scaling down the page, the arrows will disappear outside of the flow of the page. They are absolutely positioned after all, and reliant on their parent / container objects. Maybe there's a way they can shift back to these original positions once scaled down enough but it's difficult to say from these bare messy beginnings. So many things can go wrong. Maybe Media Query methods once it reaches certain pixel count, then changes to left:0; right:0;? I haven't used them myself, but will need to with my current project soon enough.
In my opinion, shifting the arrows outside of the nice responsive design is also against the look of the site. It'll break the cohesion. To me these arrows look absolutely fine on top of the pictures and hardly intrusive. Maybe adding some transparency / opacity to the arrows would make them less problematic to your eye, hover over them could resume their current visibility? That's about it for now.
NOTE: I could not replicate the issue in jsfiddle or jsbin, so unfortunately I will demonstrate the issue only via screenshots.
In my work project some JavaScript control is not rendering properly.
I found that it renders properly if I wrap the rendering logic in setTimeout(renderLogicFunction, 30);. Number 30 was found during experiments. If value is less than 10 it always renders incorrectly. If it is greater than 30 it is always correct. For 10-30 it is pretty random.
I started to debug the rendering logic side-by-side and found that one of the columns has wrong width
However in good rendering
Inner HTMLs for both of those controls are the same.
Let's see when the 16px came from
This refers to the inline style
Then I checked that the bad rendering page also has this inline style but for whatever reason it is not applied yet.
If I let debugger go, I can check that the CSS rule was already applied but it's too late as the column width was taken during calculations for rendering and its current width is not being taken into account anymore. The only way to fix it is to trigger control's refresh. But I think it is not elegant at all.
Do you have any ideas why that happens?
When you need a style to become inmune to overwrite, and make it able to overwrite previous rules of the very same style, you can add it !important
div { width:100%; }
div { width:50%; }
Will render your div elements at 50% width, while
div { width:100% !important!; }
div { width:50%; }
will render your div elements at 100%.
If you use this wisely on your CSS styles you'll probably be able to fix your problem.
I guess you are using some 3th party library which resizes columns.
Instead of setTimeout(renderLogicFunction, 30); it could probably be replaced with jQuery's document ready, https://learn.jquery.com/using-jquery-core/document-ready/
The new icloud.com site was recently released and there is a neat effect that I would like to try and imitate on a project I'm working on.
If you visit https://www.icloud.com/#calendar and login, you will see a loading gif for a brief moment and then the calendar app scale outwards to the edge of the screen.
Here's what I'm interested in learning:
What would you call this effect?
Can someone discuss the mechanics of how this might be implemented in AngularJS (or a similar framework), more specifically, the page structure, how the new content is being loaded, how the transition is being applied, etc
Examples, links, or other resources would be much appreciated
Not quite sure how to call this effect (enter the scene or scale maybe) but after a quick look it appears that the website is using a mix of absolute positioning, opacity and -webkit-transform.
If you inspect the page you will see that both opacity and -webkit-transform:scale() are incremented with some javascript function (appears to be done by the _calculateTransforms function of javascript-packed.js). At the beginning of the effect opacity starts at 0 and end at 1. webkit-transform starts with scale(0.9) and end at scale(1). Please note that the animated div is already present in the DOM but invisble when the effect start.
Finally I think ngAnimate could be a good candidate to mimic this effect (see here for more details)