Under the section titled "Ano.js Examples," the following picture doesn't link to the example. It leads the users back to Ano.js's homepage

In the Join Us! form as a contributor, clicking the text "I have read the Ano.js Terms and Privacy Policy" should check the box as on many other sites for convenience.

Macbook Air Catalina
Google Chrome

I've refreshed and waited for the page to load, and the animation doesn't show up. Not sure if it's a problem on my end, let me know if it's reproducible!

The "Join Our Team" button's hover state has the same color as the "Check out Animations" button. This is slightly confusing because one color indicates a hover state while the other button doesn't. A suggestion would be to change both buttons' hover state to the same color.

• Make the code extensible, reusable, and configurable.
• Optimize the website so that point 1 is possible.

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.

On a given Animation page, the link to the contributor page shows an internal error. This link should lead to the contributor's github profile or a designed page for that contributor on AnoJS.

Error:

Link Clicked:

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.

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.

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.

On the "Our Team" page, clicking the photo of the contributor should lead to the same link as clicking the contributor name.

Server appears to be down

Under the "Why Ano.js" section on the homepage, it would look nicer if the space on the bottom right was filled. This can be done by expanding the text under "Open Source" so that it fills the whole screen.

In the footer, there are no links or text under the Connect With Us! section of the footer. There should be a link to a contact page or an email.

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.

For the color selector, the colors in the animation should automatically update whenever a new color is selected not when the color selector is closed.

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.

https://letsencrypt.org
http://cloudflare.com

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 sections on the homepage appear to be not aligned properly when opened using a mobile platform.
eg. The section titled "Open Source!" only fills the left side of the screen while the section titled "Ano.js Examples" fills the whole screen.

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.

test issue #3

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).

In the AnoJS examples section on the homepage, clicking the left exmple leads to nowhere (there is no link attached to the card.)
Note that the link on the right example does work.

test issue #2

test issue

On the popup that shows how to integrate a given animation into the code, the code shown should be in color and formatted like it is in text editors.

Popup:

How code should be colored and formatted:

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.

Under the "Our Team" section, clicking into the contributors' username leads to a server error.

Suggestion: Link each contributor's username to their GitHub page.

Clicking the logo on AnoJS in the footer should lead to the homepage of the AnoJS website.

The quotation marks under the Testimonials section overlap with the text. If this wasn't intentional, then I suggest moving the text slightly towards the bottom-right.

The whole ano.js website crashes when users try to register as an opensource contributor under the "Join Us" page.

For example, as Vue/React components

• This would also allow for easy configuration, i.e. passing in props

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 }; };
}

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.

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

Summary:

Minor GUI issues on mobile

Environment

Platform: Android
Operating System: Android 10
Browser:

Page:
http://anojs.com/our-team

Description

Text overlapping and the ability to scroll to the right

Steps to reproduce

1. Go to http://anojs.com/our-team on a mobile device
2. Scroll to the right

Expected result

The page stays static and doesn't allow for scrolling in any direction except for up and down
Text doesn't overlap
Actual result

The page allows for scrolling left and right
Text overlapping

Screenshot

Potential feature additions:

• search by name, keywords, and/or categories
• allow contributors to tag their animations with keywords/categories

Beginning at 1199px, the background animations on the homepage are distorted.

At 800px, the background animations are not integrated into the text but rather appear as a section on its own.