Hacker Newsnew | past | comments | ask | show | jobs | submitlogin
Show HN: TargetJ – New JavaScript framework that can animate anything (github.com/livetrails)
52 points by ahmadwasfi 11 months ago | hide | past | favorite | 47 comments
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!




Some fixes to consider other than scrolling mentioned:

- Super thin fonts on bright background makes the docs very hard to read.

- Inaccurate scrollbar that readjusts every time scrolling hits beyond the scrollbar indicates. E.g https://targetj.io/docs/timeLoop.html


Enhancements to consider:

- Make the demos and especially the demos editable.


I tried the examples on iOS Safari and the performance seems really bad. Even scrolling is super choppy. Could this just be the examples page?


Thank you for your feedback—it’s definitely appreciated. I believe I have fixed the performance issue, and it should run smoothly now. Please let me know if you still experience any performance issues.


Please remove the custom scrolling effect on your website. Ruins the examples.


Now I understand why I got many complaints about the speed. I believe I’ve fixed the issue. Thanks a lot for your feedback!


Not fixed in mobile (Chrome). Normal scroll jumps to the end. Needed to meticulosity slow scroll.


Not fixed for me. It’s still the purple scroll bar which is completely unusable on Safari iOS.


The examples page is impossible to scroll, can't use arrow keys, can't use middle mouse, can't even grab the scrollbar


Thank you for bringing this to my attention. I apologize for it and will work on a fix over the few days. I'll update as soon as the issue is resolved.


I have now added key arrow navigation. Please let me know if you still have any issues navigating the site. Thanks again.


it's better, but I wouldn't say it's good now. Try holding the arrow keys, the site won't move. Any swiping both on mouse and mobile overshoots by a lot. What should be a small movement scrolls the whole website


Thank you for the feedback. I appreciate you pointing that out. I will rewrite part of the code as I agree with you that it is lacking. Thanks again for your input. It was really helpful.


How is this better than motion? Or really the other big competitors in the space? Seems like there's a good spectrum between motion (performance and simple API) to the more complex frameworks out there. How does yours actually distinguish yourself between these?

Targets is specifically not novel, as every animation framework I've used has the same ideas exposed in the same ways (declaratively).

Not trying to insult the project, but there's a lot of crowd here and I'm passionate about performance, simple animations that I don't feel like anyone have quite nailed yet.


The website performance is fine for me, but the UX of the entire site is so, so awful. It mocks pretty any expectation I have of how a website should behave.

Chrome mobile BTW.


Thanks for sharing TargetJ! It’s intriguing how it can animate anything. Could you share how it simplifies animation creation and its performance in handling complex scenes?


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.


Does this play nice with react or similar Dom diffing frameworks? Can the animation values be fed in through react state variables?


Thank you for your question. I don't think it will work well with React. While both React and TargetJ utilize diffing algorithms, there are significant differences between them. TargetJ aims to keep the DOM as small as possible by default, only including visible elements to speed up page rendering. Additionally, it is designed to maintain a flat DOM tree.

Integrating just the DOM animation from TargetJ with React is likely not feasible, as the two would conflict.


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


Just as a curiosity, have you thought about transforming the target value stepping down to web animations api calls?

That way the implementation could _probably_ get some free performance as the browser could pre-calc some stuff ahead of time, without the need for you to brute force every calc on top of the js engine.


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.


Thank you again for the great suggestion! I’ve reflected on it and decided to work on integrating the Web Animations API. Users will be able to choose between using the Web Animations API or more direct DOM manipulation at runtime, selecting their preference in the target itself. Thanks again for the feedback.


No problem! Happy that I could help :)

I'll be eagerly waiting what you come up with!


Does this really have no types? How can something like this be usable in 2024 with no types?


Not everybody cares about, uses or wants to use typescript.


Sure but as a library author, your audience is greatly diminished if you don’t provide some typings in 2024. More than half the professional Javascript programmers use Typescript these days.


Thank you for your feedback. Every target in TargetJ has an onEnabled method that can be used to verify types before enabling the target. Only enabled targets will run. You can have targets report errors during initialization if they receive the wrong type.


Seems really laggy


Thank you for your feedback. There was a bug on the site that caused the slowdown. The code is animated to show how it operates in connection with the output, and there was a bug that contributed to the delay. However, I believe I have fixed it.


demo is still laggy for me


Thanks for letting me know. I plan to use the Web Animation API to improve performance. Thanks again for your feedback—it was really helpful.


How do you expect people to respond to this? You might be browsing on a potato for all we know.


is that likely to you? more likely i am on a chromium or firefox browser on a standard computer experiencing a laggy demo experience with no user modifications. i'm simply making the OP aware that "works on my system" is not true for me, since he stopped getting feedback. this is a kindness.


Let browsers and OS manage scrolling.

My 0.02.


[flagged]


So this is clearly a bot, right?

This is the first real data-point for me on HN for how the LLM rot is slowly spreading to the entirety of the web.


Thank you! I’m glad you find TargetJ interesting. It’s indeed a new approach in development, and I can say from personal experience that it does simplify things. As for production use, the targetj.io site is fully implemented using the framework. Initially, I developed TargetJ for another project, but due to financial constraints, I focused solely on the framework. I just published it, so there aren’t any other projects using it yet. If you’re interested in trying it out, I’d love to hear more. Thanks again.


I think what I love most about websites is if they have extremely fancy animations which artificially delay actions and confuse the user. Really awesome to see people spending time, not on how information can be clearly and plainly communicated, but how to obfuscate that information and bury it under eye candy. Nothing upsets me more than a plain website, where nothing moves, unless I scroll, and clicking gets me to where I want, without whirling things over my screen.


From the Hackernews guidelines: "Please don't sneer, including at the rest of the community."

Someone spend two years on something, something that could be very useful for someone. Your comment kind of shits on all of that without providing anything useful for the creator of this tool, or anyone else.


I honestly do not believe this should exist, it is a bad idea and anyone using it will use it to make a worse website.

Of course I do realize that this might be hurtful to the individual who has spent time on this, but that doesn't change my opinion one bit. Animations on the web are already overused, having a framework dedicated to making them even more overused will make websites even worse. I absolutely think that OP should spend his time on something else.


You have missed the point entirely. The problem isn’t that you have a hurtful opinion. It’s that you’re being an ass about it.


No, I didn't miss that point.

To be honest I would tell you that I don't care about "being an ass", but that would be a lie. I want OP to stop developing this nonsense and spend his time elsewhere. Obviously getting some pushback is necessary for that.

There is no way of saying "you completely wasted your time and should delete your project before someone uses it", without "being an ass".


> I think what I love most about websites is if they have extremely fancy animations which artificially delay actions and confuse the user. Really awesome to see people spending time, not on how information can be clearly and plainly communicated, but how to obfuscate that information and bury it under eye candy.

You really don't see any other way to word that same sentiment? you couldn't not be an ass and state plainly that there's an excessive amount of eyecandy for your tastes, and that you feel it gets in the way of communication? The sardonic tone of "I think what I love the most..." doesn't set off your internal "wait, hold on, I'm being an ass and might consider rewording my comment" alarm?

Saying "you completely wasted your time and should delete your project before someone uses it" would be a less ass way to say the same thing, even! It's still ass, but less than what you wrote, imo.

But even then, the project isn't harming anyone else, so who are you to decide what they spend their time on? What have you done to cure cancer today and why haven't you done more? People get to choose what they do and as long as they aren't hurting someone else, it's up to them how they want to use their time.


You are totally missing the point. Didn't you read my last post?

>You really don't see any other way to word that same sentiment?

The problem with being polite is that the other too easily mistakes the politeness itself for encouragement, even if the comment is entirely negative. Generally ridicule is a good way to get someone to stop, as it makes very clear what you think and discourages continuing. Of course name calling is too easily dismissed and can easily lead to defiance. As discussed before, any kind of politeness is easily ignored or mistaken as positivity.


Well, in the future, I will just stop reading when the post is from the user "constantcrying".


I could not care any less. My post wasn't even addressed to you, obviously it was addressed to OP, so you not having read it would have been totally irrelevant to me, except you totally misunderstanding the intention of my post and trying to debate me on it. Oh well.


Oh, absolutely! Who needs efficient, user-friendly design when you can have a digital circus? I mean, why should we prioritize clarity and usability when we can dazzle users with a labyrinth of animations and loading screens? After all, who doesn't love a good game of "Where's the Content?" every time they visit a website?




Consider applying for YC's Fall 2025 batch! Applications are open till Aug 4

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: