NOCODE HAVEN
navigation

Slide in text effect

Hi again. Another great example of targeting Notion elements to get a desired result.
Have your h1, h2 or h3 slide in from the left or right. An awesome feature to add to your website to enhance the look and feel of it. You can play around with it how ever much you like. 😊
 
In the code below I targeted an h1 (title of the page) for the animation but you can also target an h2 or h3. Just right click on the text in chrome and hit inspect element. It will show you what type of element it is. 
<style >
 @keyframes slideInFromLeft {
      0% {
        transform: translateX(-100%);
        opacity: 0;
      }
      100% {
        transform: translateX(0);
        opacity: 1;
      }
    }
.notion-h1{
        animation: 0.5s ease-out 0s 1 slideInFromLeft;
	}

</style>
 

Change start and duration of the animation

So in this example the code is setup to slide in from the left. You can change some stuff about the duration etc. For example change when the animation should start
  • change the start of the animation
      • line 13: animation: 0.5s ease-out 0s ⇒ change 0s to 1s , 3s or however long you like which will have the animation start immediately, after 1s or 3s etc.
  • change the duration of the animation
      • line 13: animation: 0.5s ease-out 0s ⇒ change 0.5s to 1s , 3s or however long you like which will have the animation take longer to finish

Change the direction

If you want it to slide in from the right you just need to change all the lines from slideInFromLeft to slideInFromRight. Meaning line 2 and 13 of the code
 

Here’s the implementation of the feature on my own site

notion image
 
Now the whole idea about animations is that you don’t want too many otherwise it ends up distracting the user from what’s important. So when you implement these features use them sparingly.
Add this feature to your site by just copying the code above and adding it to your custom code section😎
 
 

LIKED THE CONTENT?

Untitled (13).png
SMOOTHIE

BUY ME A SMOOTHY 😁

 
 
 
GO BACK

Get a personal website in minutes.

notion image
No coding or design skills required.
 
badge