User Manual & FAQs
v1.1 Documentation, Last updated → 8 Jan 2024
🏹 Introduction
Arrow Dynamics is a Framer Component to build interactive animations and patterns. It is one single, blazing fast, code-component with Property Controls that make it easy to customise grid layout, interactions, motion controls and object parameters, etc. Currently, there are 15 variations available in the component – 11 interactive and 4 static, and future updates will bring more variations at no additional cost.
The aim is to push the boundaries of Framer by leveraging the power of p5.js and optimising it to design beautiful and precise interactions.
🤔 How to Use
On purchase, you will receive the License Key and an Access Link to the Arrow Dynamics component, Pre-made Examples and other relevant files – simply copy and paste the component into your Framer project, and you are all set to go!
🎛️ Property Controls
Arrow Dynamics component has inbuilt Property Controls to intuitively customise the various attributes of your interactive animation. They can be grouped into four sub-categories:
Layout
Object
Motion
Special Dynamics
Property Controls Overview 1.0
1. Layout
Property
Rows
Columns
Row Spacing
Column Spacing
Canvas Padding
Value
Number
Number
px
px
px
Description
Rows of objects
Columns of objects
Spacing between objects - Row wise
Spacing between objects - Column wise
Padding around canvas
2. Object
Property
Item Size
Item Type
Bg Color
Value
px
Text / Image
Color
Description
Size of individual objects
Type of object – Text, Images, SVGs, GIFs, URL embeds
Background Color and Opacity of canvas
3. Motion
Each Arrow Dynamics variation is made up of two core motion behaviours – Animate and Interact. Variations that are interactive comes with two secondary level interaction properties – Area and Canvas Reset. The combination of these increases the flexibility of the desired motion.
Property
Animate
Interact
(iff Animate = Yes)
Interaction Area
(iff Interact = Yes)
Canvas Reset
(iff Interact = Yes)
Frame Rate
Special Dynamics
Value
Yes / No
Yes / No
Confined / Unconfined
Yes / No
30 / 60 / 120 fps
Multiple
Description
Object animation – Toggle animation on or off
Object interaction – Toggle pointer interaction on or off. Interact option is available only when Animate is on.
Area of interaction. Define if mouse interaction is confined to the canvas boundaries. Interaction Area option is available only when Interact is on.
Reset objects in canvas. You can choose to reset back objects to their initial orientation. Only available when Interact is on.
Frame rate of animation
Dedicated Property Controls of certain variations. Check next section ↓
4. Special Dynamics
Property
Speed
Default Speed
Speed Multiplier /
Speed Divider
Intensity
Angle
Revert
Trigger
Radius
Repel
Scale
Delay
Movement
Gravity
Appears in
Entropists, Oscillators, Polarizers, Warriors
Accelerators, Decelerators
Accelerators, Decelerators
Amplifiers, Gravity
Polarizers
Entropists
Polarizers
Accelerators, Amplifiers, Decelerators, Entropists, Oscillators, Gravity
Amplifiers
Amplifiers
Entropists
Warriors
Gravitators
Description
Speed at which items/objects move on interaction
Speed at which items/objects move by default
Increase / Decrease speed of objects on interaction
Amount of force applied to each object’s movement
Object orientation angle
Object reset behaviour
Set interaction / animation to trigger on Hover or Click
Effective range of pointer interaction
Force with which objects repel from the pointer
Size of objects upon interaction
Time after which objects reset
Direction of object movement. North ↑, West ←, South ↓, East →
Intensity and effective radius of Gravity effect on objects
📁 All Variations – Summary
15 Variations → 11 interactive and 4 static (non-interactive) animations
All Variations
Accelerators°
Amplifiers°
Convergers°
Decelerators°
Entropists°
Ferromancers
Gravitators°
Harmonizers
Listeners°
Oscillators°
Polarizers°
Resonators°
Stoics°
Vermiformers
Warriors
Description
Accelerates objects within a radius around the pointer arrow
Amplifies objects within a radius around the pointer arrow
Rotates individual objects to converge towards the pointer arrow
Decelerates objects within a radius around the pointer arrow
Objects increase their entropy under the arrow and lowers when away
Objects emulate a compass needle movement in zero magnetic field
Increases gravity within a radius around the pointer arrow
Objects loop in Y-axis in a harmonised orientation
Objects never listens to the pointer arrow
Objects oscillate collectively around the pointer arrow
Objects change their polarity on click or hover
Objects resonate collectively around the pointer arrow
Objects behave however they want
Objects behave like microorganisms under a microscope
Objects march like warriors towards a particular cardinal direction
Animate
Yes, No
Yes, No
Yes, No
Yes, No
Yes, No
Yes, No
Yes, No
Yes, No
Yes, No
Yes, No
Yes, No
Yes, No
Yes, No
Yes, No
Yes, No
Interact (iff
Animate = Yes)
Yes, No
Yes, No
Yes, No
Yes, No
Yes, No
-
Yes, No
-
Yes, No
Yes, No
Yes, No
Yes, No
Yes, No
-
-
Interaction Area
(iff Interact = Yes)
Confined, Unconfined
Confined, Unconfined
Confined, Unconfined
Confined, Unconfined
Confined, Unconfined
-
Confined, Unconfined
-
Confined, Unconfined
Confined, Unconfined
Confined, Unconfined
Confined, Unconfined
Confined, Unconfined
-
-
Canvas Reset
(iff Interact = Yes)
Yes, No
Yes, No
Yes, No
Yes, No
Yes, No
-
Yes, No
-
Yes, No
Yes, No
Yes, No
Yes, No
Yes, No
-
-
Special Dynamics
Default Speed, Speed Multiplier, Radius
Repel (Intensity, Radius), Scale (Max, Min, Radius)
-
Default Speed, Speed Divider, Radius
Radius, Speed, Revert (Reset Back, Delay, Speed)
-
Gravity (Intensity, Radius)
-
-
Radius, Speed
Speed, Angle, Trigger
-
-
-
Speed, Movement
° denotes Interactive component
🕹️ Arrow Gallery Demos
Arrow Dynamics currently includes 19 free interactive Framer animations and patterns to demonstrate a few creative ways to use the component →
Mars Defence
Snowfall
Crazymeter
Car Chase
Mortyverse
Magic Wands
Living Knobs
Interactive Interfaces
Groovy Stickers
The Walking Dead
5 Pattern Effects
5 Pattern Effects
More Demos Coming Soon
You can get the Framer files of these animations in the ‘Basic’ plan. (‘Pro’ plan includes Figma + Framer files).
Arrow Gallery Demos → Framer animations and effects built using Arrow Dynamics
FAQs
What is Arrow Dynamics
How do I add Arrow Dynamics to my Framer site?
What will I get on purchase?
Can I edit the code?
Is there something that’s not included as part of ‘Pro’ plan?
Can I use the component for Client projects?
Can I include the component in Framer Templates / Remixes?
Is this a One-time purchase?
Is there a student discount available?
How do I get updates to the component?
Can I submit ideas or any requests?
Why the name Arrow Dynamics?
Arrow Dynamics™ v1.1 © 2023 → by Framer.zip ↗︎