How to add sliding page transition in a Single Page App? - javascript

I am using Sammy.JS for my routes and I can hide and show my pages with its callback, but the transition isn't good. What I wanted is to show the pages from right to left or when going back, it would be left to right.
var app = Sammy('body', function() {
this.get('#/start', function() {
$('.app_page').hide();
$('#start').show();
});
this.get('#/end', function() {
$('.app_page').hide();
$('#end').show();
});
});
Is there any frameworks or Plugins for this?

I assume that you are looking for something like the android transition between pages, in that case you must know that web is not totally ready for that and although it's possible, but you must consider many problems that happen when animation pages, such as the positioning(you must set the positioning as fixed and that might cause a lot of problem) or the performance of the animation for long and heavy pages.
there is not a mature javascript library that I've encountered and everybody just use their own code cause for different webpages, different css stylings are needed.
the best way to have a nice animation is to keep is simple and light, like a fading effect with a little bit of transform and scaling.
and if you really want to do the animation, it's better that you do it yourself, definitely use css animation(not jquery) and remove the animation after it's done(for performance).
and write a javascript function to check if animation is supported if not do it the old fashion way.
if you need more information let me know.
I did try the page transition in my own javascript framework and it works fine but only after I failed the first 100 time.

I recommended to you to use jquery animation to achieve your goal.
First, you can study css transition(for the page right to left effect.)
Second, you can use jquery animation with .show(), Example
You can combine these tricks to satisfied what you want.

Related

React App CSS Transitions Are Very Slow

I have a simple blog that i'm developing using create-react-app (using react-scripts#next to get CSS Modules support).
Repo
Demo
The problem i'm having is the CSS hover transitions are very laggy and slow. I previously implemented this interface using Node EJS templates and everything was snappy and fast.
I'm thinking the problem maybe has to do with the PostSummary component receiving new props and re-rendering constantly, but all the props appear to be static once they're loaded.
I checked the Chrome performance tab and it said the majority of the cycles were being used by paint time (and not load time).
Very confused, anything I can test to resolve the issue?
When you have animations that you know will fire, it's good practice to use the will-change rule, to help the browser be more efficient.
Adding the following rule improves performance in Chrome substantially:
will-change: transform, box-shadow, z-index;
Also, check out this article. It provides AWESOME tricks to help improve the performance and animations on your website.
https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108
One thing I see is that on hover you're changing the z-index. That has a possibility of slowing things down, so just be mindful when using any of the positioning rules. The transform: translate rules are much more performant than top, left, right, bottom, z-index. Not sure if you can get around using z-index or not with your design, but it's good to keep it in mind anyways.
Animating large images will cause performance issues. The first image in your example is: width: 5264px; height: 3393px;. Optimize the images for web and they should load quicker and animate smoothly.
Consider animating text and pure HTML elements, but try to avoid animating large images.
When you resize an image by transitioning it has to render the image multiple times during the transition and is very "expensive".

SVG animation scrolling on single page website

How can I achieve SVG animation scrolling in a single page website. I would like to make something like these websites https://onedesigncompany.com/approach and http://www.happyapps.io/. I like the first one more because the scrollup and scrolldown controls the animation.
I don't have any of my SVG code yet . trying to figure out how to get this pipeline workflow animation on scroll. I am using simple bootstrap starter template.
Need your suggestions
Thanks
Try http://greensock.com/svg-tips
Greenstock is spezialized in animations, used for banners etc. Definityl a good resource for animations in general.
However animations are not easy and require a lot of work to get them right! Agreed to close this because the topic is way to large for an answer, it's more a study :D

How is this In-browser lightweight animation done?

I see a number of sites have auto-loading animation as soon as you scroll down to the particular part of the site with the animation - apple.com has it, most recently I found it on http://www.bugherd.com/features
I see a number of PNGs loaded in the web inspector but I can't determine how its being done.
it’s Matt (co-founder & designer # BugHerd) here :)
Really glad to hear you like the animations we put together on the features page. In order to achieve the effect we used the transit.js library: http://ricostacruz.com/jquery.transit/
It uses the same syntax as jQuery animations and uses the animation queue as well. I put together the animation by loading up all the images needed and then transitioning, hiding and showing as required.
Happy to answer any other questions you might have about how to implement this on your own site.
Cheers!
Also as an aside the animations on the Apple site are fairly complex, but there’s a pretty detailed run down of the techniques used to achieve their effects. It’s well beyond what we’re doing on BugHerd though :)
https://docs.google.com/document/pub?id=1GWTMLjqQsQS45FWwqNG9ztQTdGF48hQYpjQHR_d1WsI
I'm not sure what you're talking about, but if you are referring to the animations Apple had when presenting the iPad, it's easy to do.
What you do is bind an event listener to the page/container scroll event. Then, check if your element is in view range, by comparing its top offset to the scroll height. If it's in view, call a function to animate the element. This can be done either by a single image sprite animating the background-offset, or an actual image sequence or even a canvas - your call.

Is this flash effect possible with jquery?

I see a flash website with some eyecathing buttons with flash effect which I want to have with jQuery if possible here is the link of website -> http://www.goodthinking.com.ph/ .. any tips or sample if can this possible done using jquery code.. . thanks in advance.. .
Yes you could build something close, but with less browser support. The puzzle pieces could be stored as background images on <div/> elements, then the divs could be positioned to "fit" as puzzle pieces, yet still be move-able by animating their position properties with a custom jQuery $.animate({}). The noise could be played on :hover with an <audio/> element in browsers that support it, and the flip effect could be achieved using a 3D transform, typically done by adding and removing CSS classes that define webkit animation keyframes.
You should seriously consider, however whether a whizz-bang effect actually helps people find the content on the website, or gets in the way. If you do want the effect and can design it in such a way that it degrades in browsers that don't support the effect, or all of the effects, then you have a cross-browser solution that is not the same everywhere, but doesn't penalize all users either by requiring they have a browser plugin.
Is it possible? Probably yes.
Would I recommend doing it with jQuery or javascript? No.

Jquery animate problem

I have the weirdest of problems.
I have a jQuery function that animates the result bars of a poll.
function displayResults() {
$(".q_answers1 div").each(function(){
var percentage = $(this).next().text();
$(this).css({width: "0%"}).animate({
width: percentage}, 'slow');
});
}
As you can see it is a simple animation that elongates a couple of divs. It works OK until I embed it on my main page. The problem seems to be that there is too much OTHER content that breaks the beauty of the smooth animation. I was thinking of me being lame in implementing the JavaScript, CSS etc. but after a couple of tests and reverse engineering I found out that THE MORE CONTENT (images, text, video) I HAVE ON THE PAGE, THE WORSE THE QUALITY OF THE ANIMATION IS. I can only guess what the reason is... I really like my animation :)! Appreciate the help!
This demo shows how it should look like. I get it to work like this when the page has less content on it. By bad quality I mean not smooth flow of the bars. The worst case is when the bars appear in their final width in an instant.Tested it on Mozilla and Chrome and IE7 - no difference.
Edit: It seems that without the actual examples your hands are tied so here is something to work on. Just look for the red border, pick one answer and click the button. The language is Bulgarian if you are wondering.
A desirable behavior here
I can live with that here
Starting to look weird here
I don't get this here
If all of them look the same to you then my computer is to blame and I don't have to worry about this particular problem anymore, which already took 2 much effort. Use Mozilla if possible.
Edit 2: I found this SO answer that answers some of my questions about the animate() function and how it works, but the problem remains unsolved, at least for my computer.
How much content are we talking here?
If the page is large enough, the browser engine may simply not have enough power to re-render the contents quickly enough to provide a smooth display.
The way jQuery does it's animation is that it periodically updates inline CSS attributes. If the elements you're changing style's of are floated or have other complex interactions with the other elements on the page then the animation wont be smooth.
In short, put less stuff on your page. You might also attempt some sort of iFrame solution or switch to using flash to display the results.
This is just a limitation of the system, unfortunately.

Categories