✔️ Ready-to-useAnimation Components Pack 📦for React
Slide Animation
8 animations from different directions, with speed adapted to coordinates, through which you can implement the appearance of blocks, elements, text, images, and other components on your website.
Fade Animation
9 fade-in animations from different directions, ideal for use with text, blocks, ensuring smooth loading and presentation of elements during user scrolling
The fade-in effect in animation is a visual transition where an object or element gradually appears on the screen by starting from an invisible or transparent state and becoming fully visible over a specified duration.
Tilt & Scale Animation
Each animation can be combined with others, providing approximately 700+ possible combinations. Here, for example, Tilt & Scale is used in combination with Move by Mouse and Move by Scroll on the Y-axis.
Tilt & ScaleAnimationwith Move effectfor any Element
Tilt Animation
The tilt animation can be applied to any elements, making it an excellent solution to showcase an example of the application or service you provide to the user. It is easily adaptable, allowing you to change perspective and other parameters as needed.
Move Animation
The move animation involves several components, and here are examples of movement along the X and Y axes. They are responsive to scroll movement, allowing for the creation of entirely different variations of interactive elements.
This creates a sense of depth and adds a dynamic, engaging quality to the user experience.
A move animation by scrolling, is a technique used in web design and other digital interfaces where elements on a webpage move at different speeds as the user scrolls down or up the page.
Tilt & Scale Animation
Another variation of Tilt & Scale animation that emerges and scales from the bottom of the screen. If the user continues scrolling, this animation is also an excellent choice for showcasing a preview of your product or service.
Move Animation
The motion animation comprises several components, and here are examples of random scrolling movement and the effect of mouse-driven displacement. It's also possible to create entirely different interactive variations on the website.
The animation is triggered when the component becomes visible on the screen, and it continues to update the element's position based on random values within a given radius as the user scrolls.
The element's position is updated based on the mouse movement.
Tilt Animation
Another option is a simple Tilt animation that emerges from the bottom of the screen. If the user continues scrolling, this animation is also an excellent choice for showcasing a preview of your product or service.
Move Y Animation
Here is an example of image move animation that moves depending on changes in coordinates and scrolling.
Scale Animation
Scaling animation, where elements appear with a scaling effect and, like others, depend on coordinates. There are 9 of them, presented from all sides, and can be combined with other animations and effects.
This creates a sense of depth and adds a dynamic, engaging quality to the user experience.
Tilt Animation
This animation depends on mouse movement and smoothly changes the tilt of the image. You can create cards that change position or use other elements to add interactivity.
FAQ
Why do I need animations?
Cases can vary, but we created this set of components to save time on animation development, which can be applied to landing pages to add dynamics to websites.
Is it difficult to use ANMT?
Very easy, all these components are wrappers. Just wrap any HTML element, and the selected effect will be applied. Simply copy the animation folder to your project and you are done. Now you can use them.
What if I am a developer and can do it myself?
We don't doubt it! If you're a developer, it will save time on chatting with GPT, exploring StackOverflow, dealing with coordinates, and allow you to focus on the functionality of your project rather than aesthetics.
Why do I need animations if I am a designer?
If you are a designer, you will be able to understand and create visuals that programmers can implement quickly and without difficulties. Design landing pages with these animations and their various variations in mind.
What if I am the founder?
Great! If you are an entrepreneur, you can add animations to complement your designs or hand them over to your designers/developers to save time and budget on development.
How is it different from libraries?
There are specific solutions for animations. The main difference with ANMT is that you don't need to study or spend time understanding how the library works. The essence is to start using them immediately by simply copying them into your project.
Why not an npm package?
Today, many dependencies are added to projects, and we think that if you need to add dynamics to a landing page, why install a separate library for this? This is where ANMT comes in, where the code is under your full control without the need to add another dependency to the project.
Will there be updates after purchase?
Yes, of course! You can freely download updates and use the components in your projects. We plan to improve and expand this set of animations.
Can I use them in commercial projects?
Yes, of course! This set of animations was created for you to use in your commercial and pet projects.
Can I use them in multiple projects?
Yes, of course, there are no restrictions on the number of projects. You can use animations in an unlimited number of projects according to the license.
Can I use them to create and sell products?
No, please review the license. You cannot use this set, in whole or in part, modified or unmodified, as part of other products for sale, as a gift, as an addition, as a competing product, or rewritten in other languages/frameworks. For more accurate information, please review the license.
Do I need a team license?
Yes, if you want to use this set of animations in a team, we have suitable rates for that.
How does support work?
We have a small team, and we try to respond as quickly as possible. In any case, we won't leave you without attention and will try to solve the problem.
Is payment secure?
Yes, payments are processed through Stripe, PayPal, and other platforms. Choose a convenient payment method.
Do you provide discounts for students?
Yes, of course! We offer a 30% discount. Send us a photo of your student ID, and we will apply the discount for you.
How to use it
This is a set of 35+ fully ready-made components with 700+ possible combinations. You can wrap any element and give it the desired animation.Written on React/Typescript. Customizable through available props. Code is under your complete control.🗳️ No dependencies.
<ScaleUp>...This block or any other...</ScaleUp>