I am producing an iPad app using phonegap, and in that connection I've taken a liking to jquery.transit which easily helps me with css3 animations.
However, I encountered an obstacle. I am making an online list that will add new users as they log in. There is no problem adding DOM elements while scrolling the page, however, when adding the css3 animation to "unfold" the element, the animation only works when not scrolling. As a result elements with height: 0; will not produce the desired height:56px; when running the animation on it.
--- EDIT ---
It appears this problem is related to scrolling in other divs than the one running the animations. If I scroll the div containing the friendList (which is fixed with overflow auto) it works fine while scrolling. It's only a problem when scrolling the actual page and iOS native scrolling kicks in.
--- EDIT ---
The code looks as follow:
<ul class="friendList">
<li class="friendElement">
<div class="friendWrapper">
(content here)
</div>
</li>
</ul>
where
.friendWrapper.entering{
height:0;
}
and on friend login:
var $friendTemplate = (... appropriate template goes here ...);
function friendLogsOn(){
var $newFriend = $friendTemplate.clone(),
$friendList = $(".friendList"),
nmbElements = $friendList.children().length,
rand = Math.floor(Math.random()*nmbElements);
$newFriend.find(".friendWrapper").addClass("entering");
$newFriend.insertAfter($friendList.children().eq(rand));
$newFriend.find(".friendWrapper").transition({ height: '56px' },function(){
$(this).removeClass("entering");
});
}
I haven't been able to make jquery.transition activate animations while the user is scrolling, does anyone have a similar experience?
It is not possible to animate while doing regular page scrolling, since iOS renders the whole page when scrolling starts.
This is done to improve performance. Other smartphones and tables also do the same thing.
You could use a plugin like iScroll4 to achieve the result. iScroll doesn't do regular scrolling, but listens to mouse/touch events, and then moves elements to simulate scrolling.
http://cubiq.org/iscroll-4
If you want to test if animation is halted on scroll i've made a simple jsfiddle you can try out. (on iPad, iPhone, android devices etc.)
http://jsfiddle.net/3ntKM/4/embedded/result/
<style>
#square {
width: 200px;
height: 200px;
margin: auto;
background: red;
-webkit-animation: rotate 4s infinite linear;
}
#-webkit-keyframes rotate {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
</style>
<div id="square"></div>
Related
chromium lighthouse tells me :
performance 89 (orange)
Cumulative Layout Shift 0.388 (red alert !)
Avoid large layout shifts
html :
<html>
...
<body class="loading">
...some static elements
</body>
...
</html>
css :
body.loading * { display : none; }
js when DOM is loaded :
document.addEventListener('DOMContentLoaded', (e) => {
//do many dynamic stuff with the DOM depending on user data (& register events listeners)
})
& finally when everything is in place in the dom, through window.onload (or if that event comes too soon, a callback once everything is in place) :
document.body.classList.remove('loading')
If I remove the loading class from the html lighthouse says great perf 100.
I thought before seeing this lighthouse analysis that my layout was shifting from a simple loading (css) animation to a completely ready page with no visible changes of the dom for the user during the load so i assume now that i am wrong, doing something wrong & missing something.
How should i do that instead for optimal loading while not risking having elements that are not ready ever being displayed ?
It turns out that now Lighthouse doesn't flag for CLS anymore although I didn't make any changes there (on the opposite I've added some code in HTML, CSS and JS that should have made the page slower).
So answer is (at least until being proven otherwise):
Hiding elements while the page is loading & JavaScript is not ready doesn't have negative impact on performance.
Here is minimal code to have a ultra-light spinner while the page is not ready yet:
const MyOnLoad = function() {
setTimeout(function(){ // only for the sake of displaying here the spinner 2 and half second obv
document.body.classList.remove('loading')
}
,2500)
}
window.onload = MyOnLoad
.loading {
margin: 34vmin auto;
border: 0;
border-radius: 50%;
border-top: 0.89vmin solid red;
width: 21vmin;
height: 21vmin;
animation: spinner 2s linear infinite;
}
#keyframes spinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading * {display: none;}
<html>
<body class="loading">
<main>show only when page is ready</main>
</body>
</html>
I'm trying to get this layout working the way I want for WordPress blog. I can't figure out why Lazyload is causing the entire masonry to overlap and load in the same spot instead of a grid. When I remove the Lazyload, the layout functions as a masonry grid, along with the overlay hover.
The second issue is that this code:
.fade {
animation-name: fade;
animation-duration: 2s;
}
#keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
}
I can't figure out why I can't remove the unused bracket at the bottom. When I remove it, the entire masonry does not work, it becomes a complete broken mess.
Can anyone enlighten these two problems? Thank you!
Additionally, if you resize the window or flip your mobile device to the side and back, the masonry grid displays fine.
Update: So I found out WordPress 5.5, releasing in August, is including LazyLoad! Will reimplement LazyLoad again by that time.
For your lazyload and mansory problem, it might be a possible solution for you to "fake" or "simulate" the resize of the window. The grid works fine after resize, so it can be a way to trigger that event to make your code work.
You can use pure javascript, in wordpress you can use the shorter jQuery version:
Using pure Javascript:
var simulateResize = new Event('resize');
window.dispatchEvent(simulateResize );
Using jQuery:
$(window).trigger('resize');
Make sure you put the code at the bottom of the page, especially you have to put it after the code where the grid elements and contents have been generated.
For your CSS problem, the correct way to use the #keyframes rule is:
#keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
So your code is correct and the last } is unnecessary. If removing it causes your code to crash, there might be some #media rule around your .fade code, like:
#media only screen and (max-width: 600px) {}
which causes the problem if it opens up but do not close.
I have a view where I need to implement a sticky menu inside of the Ionic framework.
Looking for an Angular not jQuery solution I found ngSticky. Great library works perfect, the problem however is that it won't work inside of the Ionic directive <ion-content>.
I asked a previous question about it here, and then figured out what was going on:
Because the parent container that ion-content creates has the following style on it:
<div class="scroll" style="transform: translate3d(0px, 0px, 0px) scale(1);">
It's a fix for an iPad scrolling bug as described here.
So I can't remove that style and removing it would involve making changes to the core ionic.bundle.js file anyways.
The only thing I can think of now at the moment, is to write some code to detect when the sticky header hits the top, then remove that block of HTML out of ion-content and replace it above the ion-content container.
Is there any other way around this?
Here is a Plunker http://plnkr.co/edit/DiVfOzjJevSFOtVitYty?p=preview
There is a jQuery hack in place that removes the style tag so you can see how it should work.
I wanted to create something similar.
I had an image on top and a button below. As I'm scrolling down the page I wanted the button to stay on top.
(sticky menu === sticky button === all the same)
Code below isn't working reliably and is full of hacks so I'm hesitant to share it... In fact I've actually removed it from the codebase, posting here for illustrational purposes only:
// INITIALISATION SETUP
var $button = $(".button-middle-wrapper");
var buttonOffset;
var _measureOffset = function() {
buttonOffset = $button.offset().top;
};
setTimeout(_measureOffset, 500); // HACK: during initialisation image is not loaded - therefore image offset is not correct - wait for image to load?
$(window).resize(_measureOffset);
// METHOD AVAILABLE ON THE SCOPE
$scope.fixButtonToTop = function() {
var scrollPosition = $ionicScrollDelegate.getScrollPosition().top;
if (scrollPosition > buttonOffset - 30) {
$button.css({"top": scrollPosition + 30}); // normally it is enough to set position to "fixed" - in Ionic case we do not scroll browser window - we do tranlations and setting positions - so we manually calculate position
} else {
$button.css({"top": ""});
}
};
And then in the view: <ion-content on-scroll="fixButtonToTop">
Not only the code is terrible but I've also committed one of the common mistakes described here: https://www.toptal.com/ionic/most-common-ionic-development-mistakes
Common Mistake #8: Binding Events to onscroll, and Forgetting About requestAnimationFrame
I know its not a good solution, but I'd simply go for applying CSS rule with !important to override the current style
.pane {
transform: none !important;
-webkit-transform: none; /* Safari and Chrome */
-moz-transform: none; /* Firefox */
-ms-transform: none; /* IE 9 */
-o-transform: none; /* Opera */
}
Plunkr Here
I've been following directions from Justin Aguilar's Site to add some CSS Animations to my website. It's well put together and seems fairly straightforward. However I've been having a major problem triggering entrance animations.
Being fairly new to this I understand this question can be completely inane, but I've been toying with it for the last few days with no success.
To create an entrance the element's visibility is initially set to 'hidden'. Then javascript is supposed to trigger the animation by adding the .pullUp class which causes the element to become visible and animate.It seems pretty simple, but all of my elements begin animating as soon as the page loads or they remain invisible.
I could really use some help. Here is a Link to the code on JFiddle.
<img src="img/apple.png" id="apple" class="pullUp" />
<script= "text/css">
.pullUp{
animation-name: pullUp;
-webkit-animation-name: pullUp;
animation-duration: 1.1s;
-webkit-animation-duration: 1.1s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
visibility: visible !important;
}
</script>
<script>
$(window).scroll(function() {
$('#apple').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+150) {
$(this).addClass(".pullUp");
}
});
</script>
Basically I just need my image to become visible and animate when the image is scrolled to.
It's possible that my site's Bootstrap Frameworks could be the source of the problem, but I don't see why it would. Also please know that I use External Style Sheets and just included all of the code here for convenience. Any insight or help is much appreciated!
I forked your JSFiddle
You were missing }); at the end of your code block. That's why jQuery wasn't working.
Your image had the pullUp class already added, so the animation was starting right away.
I noticed in your CSS where you have floats you did not specify a position (i.e position:relative or position:absolute). That's crucial for this type of thing (edit: apparently not, as show by the answer below).
After adding in position:relative to those elements it seems to work, however you might need to modify the animation as the effect seems quite minimal.
For some reason, my page displays the loading indicator on Chrome, when applying a class to a section with css transition. The class adds a bottom value that makes the section slide up. And I think this loading is causing the address bar to be 'active', and won't slide up again. And thus covering my navigation bar. I'm using iPhone 4, iOS5.
I've tried to pin-point what might be causing this, because it's not there on desktop Chrome, or on Safari on the iphone. And it only happens while the class is being applied, and the animation is activated, and also after.
The page has a google map, and I'm collecting data from an XML document using $.ajax. This is however not causing the problem, cause I've tried disabling everything in the js-file, except the click handler that applies the class.
Here's the CSS:
#main_bottom {
position: absolute;
bottom: -297px;
width: 300%;
height: 384px;
background-color: #ececec;
-webkit-transition-property: bottom, left;
-webkit-transition-duration: 0.2s;
}
#main_bottom.active {
bottom: 36px;
}
I'm using this to apply the class:
$(document).on('click', '#main_bottom > section:not(#gps) > a', function (e){
e.preventDefault();
$($main_bottom).toggleClass('active');
});
HTML:
<a href="/">Choose nearest shop
<div class="bigarrow"></div>
</a>
What could be causing this? It seems to be related to the animation somehow, not sure why. Could it be the absolute positioning, along with the css transition? If I'm allowed to link to the current live site, I'd be happy to do that :)
I found it was because of the <a href="/">. Even though e.preventDefault(); was set, this still caused Chrome to do 'something' with the href.