Categories
Premiere Pro

How to make slide text effect in Premiere Pro?

How to make slide text effect in Premiere Pro?

To create the slide text effect in Premiere Pro you will need to have the text in .png format (for the learning purpose you can use mine below, or create your own for example in Adobe Photoshop, or by using different software).

Text is white with transparent background:

winter

text-1

text-2

Follow the steps below and watch the video tutorial:

Step1.

Create a new sequence

Open Adobe Premiere Pro and create a new sequence:

Premiere Pro slide text effect

In sequence settings set the frame size:

How to make slide text effect in Premiere Pro?

Step2.

Import a video (optional)

Import a video and drag it into the sequence. Got to Effect Controls to fit the video into a frame (scale, position):

slide text effect in Premiere Pro

Step3.

Import your text

Import your text and drag it into the sequence:

How to make slide text effect in Premiere Pro?

Step4.

Create a slide effect

Click on the first text and go to the Effects panel and type in the search bar – crop:

How to make slide text effect in Premiere Pro?

Drag the Crop option into the Effect Controls panel:

slide text effect in Premiere Pro

Crop your text from the top and bottom:

How to make slide text effect in Premiere Pro?

Go to the Effects panel and type in the search bar – transform (distort):

How to make slide text effect in Premiere Pro?

Drag the Transform option into the Effect Controls panel above the Crop option.

In the Transform option go to Position and add the first stopwatch. Click on the stopwatch and change the vertical position of the text (move the text down):

How to make slide text effect in Premiere Pro?

You can notice that the first text disappeared (went down outside the cropped area):

How to make slide text effect in Premiere Pro?

Move the blue line to the right (0.2-0.5 second) and add the second watch stop:

How to make slide text effect in Premiere Pro?

You can play your video to see the effect. To make the slide effect more smooth select both stopwatches and right-click, go to Temporal Interpolation and choose the Ease In or Ease Out option.

How to make slide text effect in Premiere Pro?

Click on the second text and repeat the steps from the first text (Crop, and Transform):

How to make slide text effect in Premiere Pro?

You can move the first stopwatch and the second stopwatch to the right to make a delay in appearing of the text (the second text will appear after the first text):

How to make slide text effect in Premiere Pro?

You can play your video to see the effect:

How to make slide text effect in Premiere Pro?

Watch also the video tutorial:

Read also:

How to create a GIF in Adobe Premiere Pro?

Push Slide Transition Effect in Adobe Premiere Pro

How to add a GIF into iMovie?

Categories
Web development

CSS Slide Text Animation/ Sliding Text Effect



CSS Slide Text Effect

Demo:

*to see the CSS Slide Text Animation on the website click here.

To create the CSS Slide Text Animation follow the steps below and watch the video tutorial:

  1. Add HTML
  2. Add CSS

Step1.

Add HTML

<div class="slide-effect">
  <div class="text">CSS Slide Effect:</div>
  <div class="slideDown">Slide Down,</div>
  <div class="slideUp">Slide Up</div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  height: 100vh;
  align-items: center;
  display: flex;
}

.slide-effect {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

Style the text:

.text, .slideDown, .slideUp {
  position: relative;
  font-family: tahoma;
  font-size: 35px;
  opacity:0;
}

.text {
  top:40px;
  font-weight: bold;
  animation: slideUp ease .4s forwards;
}

.slideDown {
  top:-40px;
  left:5px;
  animation: slideDown ease .4s forwards .6s;
}

.slideUp {
  top:40px;
  left:10px;
  animation: slideUp ease .5s forwards 1.2s;
}

Add CSS Animation:

@keyframes slideUp {
  0% {transform: translateY(0);}
  100% {transform: translateY(-40px);opacity:1;}
}

@keyframes slideDown {
  0% {transform: translateY(0);}
  100% {transform: translateY(40px);opacity:1;}
}

To display the animation on smaller screens (tablets, mobile):

@media only screen and (max-width: 600px) {
  .slide-effect, .text, .slideDown, .slideUp {
    font-size: 15px;
  }
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

Pure CSS Rainbow Text Animation

CSS Perspective Text Effect

CSS Mirror/ Reflection Text Effect