ano-js / anojs Goto Github PK
View Code? Open in Web Editor NEWWeb animation made easy.
Home Page: http://anojs.com
License: MIT License
Web animation made easy.
Home Page: http://anojs.com
License: MIT License
iPhone 11
iOS 13.5.1
Google Chrome
When browsing through the animations on mobile, a nice prompt comes up:
However, once exited and the if the user presses on the animation, it redirects to an internal server error page. As an enhancement, perhaps have the prompt pop up every time a user on mobile clicks on an animation, to prevent errors.
Potential feature additions:
test issue #3
The contributors seem to be listed in no particular order.
According to the screenshot below, the website promises that "Contributors with the most amount of contributions are shown the most." Following this philosophy, it would make more sense if the contributors are listed in the order of their amount of contribution to this open-source, displaying those who contribute the most at the top.
Guys, I think optimization tests shouldn't be done directly on the actual page. There must be a test server. On the page we should only load the final changes. When users come in and see the mess being created on the page, they don't want to go back. It's just my point of view. I know we are just getting started, but I think we should be careful with that.
For other animations, the animation updates when the user changes the colours on the botton right of the screen. This one does not: https://anojs.com/animations/balls-follow-mouse
The formatting on the page "Join Us" needs improvement. The text starting at "What do Ano.js contributors do" are all left-aligned, leaving a huge space to its right side.
Suggestion: Instead of continuing the "Benefits of being a Contributor" information at the bottom, try to take advantage of the space on the right side.
test issue
The main disadvantage of the current code is that because each animation script finds its target by ID and not by class, it is impossible to include more than one of the same type of animation on a page.
The current appeal of the project is the ability to embed any animation with 2 lines of code. If we lift this restriction slightly by introducing an additional helper library, it could greatly simplify the rest of the animation scripts.
The library could be structured something like this:
if (!window.AnoJS) {
window.AnoJS = {};
// example helper function
AnoJS.point = function(x, y) { return { x, y }; };
}
Browsers block the content.
Error Message
Mixed Content: The page at 'https://....' was loaded over HTTPS, but requested an insecure script 'http://anojs.com/...js'. This request has been blocked; the content must be served over HTTPS.
For example, as Vue/React components
Minor GUI issues on mobile
Platform: Android
Operating System: Android 10
Browser:
Page:
http://anojs.com/our-team
Text overlapping and the ability to scroll to the right
The page allows for scrolling left and right
Text overlapping
I meant that regardless of the technology we choose to use for animations, our codes are modules. Modules that allow the user to customize it according to their needs, since at this moment the user adapts to anojs and not the other way around, and in this way, the use of animations becomes complicated.
In anojs there should be the option to customize certain parameters of the code (number of balls, speed, colors, canvas size) and then be able to return the code to be used with the changes made.
In the "How to use AnoJS" section, add relevant links and images to assist understanding. For example, for Step 1, add a link to the animations; for step 2, have an image showing how to customize colors; for step 3, show example code of an animations to explain how to integrate into their own project.
test issue #2
As I was formatting the code for semicolons, I noticed a lot of these classes had the same basic setup (init, animate, render, etc). I think we can use an interface for this (idk if javascript has interface). We should eliminate all this boilerplate code
Many of the anojs animations are really lagging, this is probably due to the use of the 2D canvas rendering context, which uses a very slow CPU rendering engine. requestAnimationFrame
is also known to be inconsistent. As a result, it would be preferable to use a GPU accelerated renderer + a better animator.
The best solution to this is probably the GreenSock Animation Platform (GSAP) animation system along with the PixiJS accelerated 2D renderer. I will be working on this in the coming days.
We need a core module to handle all the rendering. Potentially, multiple backend rendering systems could be used, but I think right now the highest priority is to use PixiJS, since it is one of the fastest (and GPU accelerated).
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.