What's the best way of handling animations/transitions in Meteor, e.g having a fadeIn when a new item appears rather than it just appearing
As David Weldon mentioned, Meteor is going to be adding some support for UI hooks in 0.8.2 and they will probably make it out into supported APIs by 1.0.
The original thread is here: https://groups.google.com/forum/#!topic/meteor-core/1kUoG2mcaRw
Here are a few examples, including one I'm particularly happy with:
https://github.com/mizzao/meteor-animated-each, demo at http://animated-each.meteor.com/
https://github.com/percolatestudio/transition-helper
The first example causes items in a long scrollable container to fade in/out when added/deleted, and adjusts the scroll position so that other people who are scrolled to a different position in the container don't see a jump in their view.
Related
I've been looking for a library or a solution to implement Tumblr's scroll effect.
I previously worked with libraries like fullpage.js but the thing is Tumbler effect is a bit different.
To be more specified, when you scroll up/down sections cover each other, but in libraries like fullpage.js sections push each other to up and down.
I'll appreciate if you guys have any solution or library to implement this effect.
Update 2018:
There's an article about it here. Which makes use of fullPage.js. instead.
You are looking for pagePiling.js, the small brother of fullPage.js.
You can even use fullPage.js to do exactly the same as long as you use the parallax extension with the offset value set to 100, and then place all your content in the background element. So it will move at the same time that the background.
The advantage of using fullPage.js is that you'll have plenty of more options, methods and callbacks than when using pagePiling.js, which hasn't been updated in a long time.
So I have this issue with something like old deprecated <marquee>. Here's fiddle: https://jsfiddle.net/qbqz0kay/1/
It's one (and simpliest) of hundreds of attempts. I can't resolve main issues:
how to remove the gap between end and (new) beginning of the list (it should be like one infinitely scrolling sentence). I've tried with removing first li elements and adding them to the end but it affected overall dimensions of the list and in consequence - the animation was disrupted.
part of the list will be changing once in a while (site is connected to websocket) and every change in its content affect dimensions of the list also. So again - problem with stuttering animation occured.
Any ideas how to handle this? I've seen many ready-made examples but none of them handles those two issues.
Marquee can't help you in this case, as you can't achieve continuous scrolling using this element. Instead, just a bit of javascript might do the trick here. I tried this example which is also very well documented on my own blog and worked perfectly fine, more on this article:
http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm
I am doing an website where I have to keep one image fixed to the screen and on scroll I want different elements to appear one by one and stick to one position. When this is done I continue to the footer of the website.
I have done tried to reach that but whatever I do the page keeps scrolling and does not wait for all the elements to appear on the screen.
Example of what I want to do can be seen here Link on the second page where the mobile phone it is sticked in the screen and on scroll different content appear one by one.
How do I achieve this ? What kind of libraries would you suggest?
Thank you in advance.
stuff like this is usually done with js libriaries, as you already wrote. One that is actively supported and works quite well is Scrollmagic. It should be able to do what you describe, at least it can do the stuff in the example you linked: It can "pin" elements on the page for a defined duration (= "scroll duration") or animate elements controlled by the scroll position.
Scrollmagic can be found on Github or here: http://scrollmagic.io/ , examples to be seen here: http://scrollmagic.io/examples/index.html
Your fixed html content should have css position: fixed;.
Have you tried position: sticky? There may be browser compatibility issues but there are polyfils out there to fix that.
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)
Is there a good Javascript library for generating an automatically scrolling list like the "Top Tweets" on the Twitter homepage? Preferable as jQuery plugin. It should also support AJAX functionality (to add new list items dynamically).
As we were not really satisfied with the existing solutions we implemented one from scratch. Our solution is a fully jQuery UI compatible ticker plugin (also compatible with their theming framework) and fully unit tested. We didn't yet have the time to test it under every browser, so feedback is welcome (for problems please open issues on the below Github project site).
A special styled demo (Twitter like) is available here.
The main main repository can be found here (ticker branch). There are several options to customize the ticker (documentation at the above mentioned Github repository).
Screenshot:
Here is a nice solution: Scrolling List
Try http://www.htmldrive.net/items/demo/38/Multi-purpose-slideshowtext-scrollerimages-scroller-jquery-plugin
That is the best solution I was able to find:
Scrolling List
If you want to write your own, make a div of fixed width/height, with overflow: hidden, then create another div inside it, with the position: relative property, filled with content from your feed (twitter posts, or similar, etc). Then, when the page loads just make the inner div's top: CSS value change (if you want the list to scroll up, the top value should decrement from zero).
I doubt this helps, but it is quite a good, simple way to get a scrolling without using a jQuery plugin.