Show HN: TargetJ – New JavaScript framework that can animate anything

I am excited to introduce to you TargetJ, a new JavaScript framework that can animate anything. I have been working on this project for over two years, driven by the complexity of current UI frameworks.

You can find the interactive documentation at www.targetj.io.

I hope you find it useful for creating great web experiences. If you have any questions about the framework or want to share your thoughts, please leave a comment below. I’m eager to hear from you!

Show HN: TargetJ – New JavaScript framework that can animate anything
github.com

Thank you for your feedback.

TargetJ uses a unified mechanism for both development and animation by creating targets. Each target essentially has two variables: target and actual. When actual does not equal target, TargetJ will update actual until it matches target through iterations controlled by steps and stepIntervals.

For example, to animate an object along its x-axis:

App(new TModel({ x: [300, 20, 50], // Moves x to 300px in 20 steps with 50ms pauses in between html: 'Hello world' })); You can find more examples at: https://targetj.io/examples.

For Performance: - TargetJ optimizes rendering by minimizing DOM manipulations. - TargetJ divides objects automatically into a tree structure, tracking only the branches visible to the user. See examples of infinite scrolling at https://targetj.io/examples/g-Infinite-scrolling.html and infinite zooming at https://targetj.io/examples/h-Infinite-zooming.html.

I am making the site https://targetj.io more mobile-friendly, which will take a few days. In the meantime, it's best to check it on a computer.

It's a shame that the non-composited animations just aren't performant enough to animate on mobile devices.

Thank you for your feedback. Currently, animations are handled using transform: translate by directly manipulating the styles of elements with JavaScript. I think this offloads the work to the GPU. This approach also gives the ability to animate in response to user actions which could be frequent like scrolling and no fixed time frame is known beforehand.

However, I agree that using the Web Animations API could be beneficial when user actions are not involved. This is a great suggestion, and I haven't given it much thought before. I will consider adding a separate API for it using the Web Animations API.