Component
Encryption Hero Animation in Framer
This is a mesmerizing encryption hero animation crafted in Framer without a single line of code. Inspired by Maharram Hasanli's work, it features text smoothly gliding from left to right, dramatically transforming as it passes through a beam of light. Feel free to remix the project to see how something like this can be built in Framer.
About the resource
I'd like to highlight two of the main parts of this effect here to give a little more information about how it's built in Framer.
The environment
We can thank most of the effect and the futuristic environment to the gradients, blurs, and drop shadows that I'm applying on quite a few layers. To create the main light in the center, I had to draw all sorts of different frames, with varying fill colors, blur values, and drop shadows. For the nice particle effect, I simply used this free component. Take a look at the structure of the "Base" effect in the image below.
Note: Safari might not be able to handle so many layers of blur and stuff, so it might look a bit different there. But who uses Safari, right? lol
About the resource
I'd like to highlight two of the main parts of this effect here to give a little more information about how it's built in Framer.
The environment
We can thank most of the effect and the futuristic environment to the gradients, blurs, and drop shadows that I'm applying on quite a few layers. To create the main light in the center, I had to draw all sorts of different frames, with varying fill colors, blur values, and drop shadows. For the nice particle effect, I simply used this free component. Take a look at the structure of the "Base" effect in the image below.
Note: Safari might not be able to handle so many layers of blur and stuff, so it might look a bit different there. But who uses Safari, right? lol
About the resource
I'd like to highlight two of the main parts of this effect here to give a little more information about how it's built in Framer.
The environment
We can thank most of the effect and the futuristic environment to the gradients, blurs, and drop shadows that I'm applying on quite a few layers. To create the main light in the center, I had to draw all sorts of different frames, with varying fill colors, blur values, and drop shadows. For the nice particle effect, I simply used this free component. Take a look at the structure of the "Base" effect in the image below.
Note: Safari might not be able to handle so many layers of blur and stuff, so it might look a bit different there. But who uses Safari, right? lol
The layers structure of the base light effect.
The layers structure of the base light effect.
The layers structure of the base light effect.
The encryption
The other thing I want to explain here is how the encryption effect of the text works. How can we make sure that the text goes in from left to right, and comes out as an encrypted text?
I simply created two frames, both set to overflow hidden. One frame is on the left side of the container, and the other is on the right side. The left frame holds the normal text, and the right frame holds the encrypted text. I picked both of these text layers and made sure they sit right on top of each other, while still being in their own frames. Then, I could move them at the same time (by animating the position on different variants). This setup I just explained creates the cool effect we see.
It's like having two special windows side by side. One window shows normal words, and the other shows secret code. When we slide the words across, it looks like they change from normal to secret as they move from one window to the other!
The encryption
The other thing I want to explain here is how the encryption effect of the text works. How can we make sure that the text goes in from left to right, and comes out as an encrypted text?
I simply created two frames, both set to overflow hidden. One frame is on the left side of the container, and the other is on the right side. The left frame holds the normal text, and the right frame holds the encrypted text. I picked both of these text layers and made sure they sit right on top of each other, while still being in their own frames. Then, I could move them at the same time (by animating the position on different variants). This setup I just explained creates the cool effect we see.
It's like having two special windows side by side. One window shows normal words, and the other shows secret code. When we slide the words across, it looks like they change from normal to secret as they move from one window to the other!
The encryption
The other thing I want to explain here is how the encryption effect of the text works. How can we make sure that the text goes in from left to right, and comes out as an encrypted text?
I simply created two frames, both set to overflow hidden. One frame is on the left side of the container, and the other is on the right side. The left frame holds the normal text, and the right frame holds the encrypted text. I picked both of these text layers and made sure they sit right on top of each other, while still being in their own frames. Then, I could move them at the same time (by animating the position on different variants). This setup I just explained creates the cool effect we see.
It's like having two special windows side by side. One window shows normal words, and the other shows secret code. When we slide the words across, it looks like they change from normal to secret as they move from one window to the other!
Creating the encryption effect by moving both text layers.
Creating the encryption effect by moving both text layers.
Creating the encryption effect by moving both text layers.
