A powerful JavaScript framework designed to simplify development and enable animation of any complexity. TargetJ introduces a novel concept known as 'targets' which are used as the main building blocks of components instead of direct variables and methods.
The problem
Animating an object in JavaScript is quite challenging, and orchestrating intricate animations among multiple objects is even more complex. Additionally, existing frameworks address it by introducing extra complexity. Furthermore, there is no one single coherent software solution that addresses animation, controls program flow, handles events, and loads data from external APIs, etc.
The solution
TargetJ simplifies development and animation by employing one concept across all aspects of the program. It is used in animation, controlling program flow, integrating APIs, and so on. This unified approach means that it is easy to learn and can solve complicated problems.
The novel concept that forms its core is called 'targets', Targets are used as the main building blocks of components instead of direct variables and methods. Each component in TargetJ is a set of targets.
Brief overview of how it operates
Each target in TargetJ essentially has two variables: target and actual. The target can be a static value or a method, while the actual value is always represented as a value. When the target value does not equal the actual value, TargetJ will update the actual value iteratively until it matches the target value. This iteration is determined by two additional variables: steps and step interval. Steps dictate the number of iterations, and the step interval specifies the duration in milliseconds that the system waits before executing the next iteration.
To animate a variable, create a target after its name. There are default target names you can use to animate and impact the UI, such as x, y, width, height, opacity, scale, rotate, zIndex, html, style, css, scrollLeft, and scrollTop. You can also dynamically change how HTML elements are nested using the domHolder or domParent targets. Additionally, there are other target names for dynamic control, such as canHandleEvents to specify which events are handled and canHaveDom to determine if the object requires a DOM element.
A target has a simple life cycle by default: it is executed only once when enabled. The optional enabling method creates dependencies between targets and ensures they execute at precisely the right moment.
Other features
As a result of using targets, we can develop web sites or apps that require minimal HTML, and CSS, eliminate the need for static HTML nesting, and control the execution flow based on timing, among other benefits.
Your thoughts
Explore the full potential of TargetJ and dive into our interactive documentation at www.targetj.io. I hope it inspires you to create amazing web experiences.
If you have any questions about the TargetJ framework or want to share your thoughts, please leave a comment below. I’m eager to hear from you!
Zombie Planets