6 ms·

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

52 points by ahmadwasfi 2y ago

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!

alexliu518 2y ago
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?
- ahmadwasfi 2y ago
  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 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 https://targetj.io/examples/g-Infinite-scrolling.html and infinite zooming at https://targetj.io/examples/h-Infinite-zooming.html https://targetj.io/examples/h-Infinite-zooming.html. I am making the site https://targetj.io https://targetj.io more mobile-friendly, which will take a few days. In the meantime, it's best to check it on a computer.
efilife 2y ago
The examples page is impossible to scroll, can't use arrow keys, can't use middle mouse, can't even grab the scrollbar
- ahmadwasfi 2y ago
  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.
  - ahmadwasfi 2y ago
    I have now added key arrow navigation. Please let me know if you still have any issues navigating the site. Thanks again.
    - efilife 2y ago
      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
      - ahmadwasfi 2y ago
        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.
Permik 2y ago
It's a shame that the non-composited animations just aren't performant enough to animate on mobile devices.
- Permik 2y ago
  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.
  - ahmadwasfi 2y ago
    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.
  - ahmadwasfi 2y ago
    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.
    - Permik 2y ago
      No problem! Happy that I could help :) I'll be eagerly waiting what you come up with!
deleted 2y ago
[deleted]
FractalHQ 2y ago
Does this really have no types? How can something like this be usable in 2024 with no types?
- ahmadwasfi 2y ago
  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.
- archerx 2y ago
  Not everybody cares about, uses or wants to use typescript.
  - jitl 2y ago
    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.
eqkRZX_wmv0jqp7 2y ago
Seems really laggy
- ahmadwasfi 2y ago
  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.
  - neontomo 2y ago
    demo is still laggy for me
    - ahmadwasfi 2y ago
      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.
    - ranger_danger 2y ago
      How do you expect people to respond to this? You might be browsing on a potato for all we know.
      - neontomo 2y ago
        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.
danhau 2y ago
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?
- ahmadwasfi 2y ago
  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.
dcsan 2y ago
Does this play nice with react or similar Dom diffing frameworks? Can the animation values be fed in through react state variables?
- ahmadwasfi 2y ago
  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.
throw03172019 2y ago
Please remove the custom scrolling effect on your website. Ruins the examples.
- ahmadwasfi 2y ago
  Now I understand why I got many complaints about the speed. I believe I’ve fixed the issue. Thanks a lot for your feedback!
  - fuzzythinker 2y ago
    Not fixed in mobile (Chrome). Normal scroll jumps to the end. Needed to meticulosity slow scroll.
  - throw03172019 2y ago
    Not fixed for me. It’s still the purple scroll bar which is completely unusable on Safari iOS.
nsjoz 2y ago
[flagged]
- ahmadwasfi 2y ago
  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.
- preommr 2y ago
  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.
jhkug 2y ago
[flagged]
fuzzythinker 2y ago
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 https://targetj.io/docs/timeLoop.html
- fuzzythinker 2y ago
  Enhancements to consider: - Make the demos and especially the demos editable.
constantcrying 2y ago
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.
- thaithrowawayy 2y ago
  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?
- ahofmann 2y ago
  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.
  - constantcrying 2y ago
    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.
    - spiderice 2y ago
      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.
arcanemachiner 2y ago
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.
jarebear6expepj 2y ago
Let browsers and OS manage scrolling. My 0.02.
MisterKent 2y ago
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.

52 points by ahmadwasfi 2y ago

alexliu518 2y ago

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?

ahmadwasfi 2y ago
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 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 https://targetj.io/examples/g-Infinite-scrolling.html and infinite zooming at https://targetj.io/examples/h-Infinite-zooming.html https://targetj.io/examples/h-Infinite-zooming.html. I am making the site https://targetj.io https://targetj.io more mobile-friendly, which will take a few days. In the meantime, it's best to check it on a computer.

efilife 2y ago

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

ahmadwasfi 2y ago
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.
- ahmadwasfi 2y ago
  I have now added key arrow navigation. Please let me know if you still have any issues navigating the site. Thanks again.
  - efilife 2y ago
    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
    - ahmadwasfi 2y ago
      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.

Permik 2y ago

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

Permik 2y ago
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.
- ahmadwasfi 2y ago
  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.
- ahmadwasfi 2y ago
  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.
  - Permik 2y ago
    No problem! Happy that I could help :) I'll be eagerly waiting what you come up with!

deleted 2y ago

[deleted]

FractalHQ 2y ago

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

ahmadwasfi 2y ago
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.
archerx 2y ago
Not everybody cares about, uses or wants to use typescript.
- jitl 2y ago
  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.

eqkRZX_wmv0jqp7 2y ago

Seems really laggy

ahmadwasfi 2y ago
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.
- neontomo 2y ago
  demo is still laggy for me
  - ahmadwasfi 2y ago
    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.
  - ranger_danger 2y ago
    How do you expect people to respond to this? You might be browsing on a potato for all we know.
    - neontomo 2y ago
      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.

danhau 2y ago

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?

ahmadwasfi 2y ago
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.

dcsan 2y ago

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

ahmadwasfi 2y ago
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.

throw03172019 2y ago

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

ahmadwasfi 2y ago
Now I understand why I got many complaints about the speed. I believe I’ve fixed the issue. Thanks a lot for your feedback!
- fuzzythinker 2y ago
  Not fixed in mobile (Chrome). Normal scroll jumps to the end. Needed to meticulosity slow scroll.
- throw03172019 2y ago
  Not fixed for me. It’s still the purple scroll bar which is completely unusable on Safari iOS.

nsjoz 2y ago

[flagged]

ahmadwasfi 2y ago
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.
preommr 2y ago
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.

jhkug 2y ago

[flagged]

fuzzythinker 2y ago

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 https://targetj.io/docs/timeLoop.html

fuzzythinker 2y ago
Enhancements to consider: - Make the demos and especially the demos editable.

constantcrying 2y ago

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.

thaithrowawayy 2y ago
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?
ahofmann 2y ago
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.
- constantcrying 2y ago
  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.
  - spiderice 2y ago
    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.

arcanemachiner 2y ago

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.

jarebear6expepj 2y ago

Let browsers and OS manage scrolling. My 0.02.

MisterKent 2y ago

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.