DEV Community

How to make a slick CSS animation from Upload

Rob OLeary on June 06, 2022

This time, I will tackle a title sequence from Upload. Upload is an American science fiction comedy-drama television series created by Greg Daniel...

Read full post

jzombie • Jun 7 '22

I am curious if this could be created as well using clip-path.

developer.mozilla.org/en-US/docs/W...

This is something I've had on my radar for a while but haven't started working w/.

Rob OLeary • Jun 7 '22 • Edited

You can use clip-path to cut an image into an arbitrary shape. There is a playground tool called Clippy that you can try out to play with it/understand it.

In this case, clip-path is not suitable because we want the background image to be static, and the text to be cut-out and move towards the viewer. Our text is like a peep hole to the image, rather than it being a cut-off version the image. Does that makes sense?

jzombie • Jun 7 '22

Yeah, I will play around w/ this Clippy a bit to help understand the limitations a bit more.

Thanks for this post. It saved me a few hours of prototyping.

André • Jun 7 '22

Let me help you

<style>
.omg {
  position: relative;

  width:max-content;
  height:max-content;

  color: transparent;
  font-weight: bold;
  font-size: 300px;
  font-family:monospace;

  background-image: url(https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
  background-clip: text;
  border:solid 1px black;
}

.omg::before {
  position: absolute;
  z-index:-1;

  width:100%;
  height: 100%;

  background-color:black;

  content:'';
}
</style>
<div class="omg">Nice!</div>

Rob OLeary • Jun 7 '22 • Edited

Here is Andre's example live:

If you animate it, it does not give the result we would hope for:

It is a bit tricky when add animations to things!

André • Jun 7 '22

a quick and dirty start, can easily be improved

<style>
.container {
  background-image: url(https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
   width:500px;
   height:500px;
}

.omg {
  font-size:100px;
  font-weight:bold;
  position:relative;
  height:100%;
  width:100%;
  background-color:black;
  color:white;
  mix-blend-mode: multiply;
  text-align:center;

  display:flex;
  justify-content:center;
  align-items:center;
}

.animate{
  animation-duration: 5.5s;
  animation-fill-mode: forwards;
  animation-name: grow;
  transform-origin: center center;
}


@keyframes grow {
  90% {
    transform: scale(1.2);
  }

  92% {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translateX(100px) scale(60);
  }
}
</style>
<div class="container">
  <div class="omg animate"><span>Nice!</span></div>
</div>

Rob OLeary • Jun 7 '22 • Edited

Sure 😀 Round 2!

As I said in the article, I chose to go with SVG because there are some limitatons to navigate, and I wanted to draw some elements. Overall, it made more sense. I am sure with some effort, you can do it all with HTML and CSS if you want to, but it is more challenging!

You can add the code as an embedded example like I did to demo your example. If you put the code on JSFIddle or Codepen, and add the following to the comment:

{% jsfiddle <url> results,html,css %}

or:

{% codepen <url> %}

André • Jun 7 '22

I thought I was answering @jzombie to give him the motivation to start. It seems I don't understand how to add a comment properly. 😅

BTW @robole great article thank you !!!

Rob OLeary • Jun 7 '22 • Edited

No worries Andre. Your input was valuable. 🙂 I just wanted to demonstrate that it is a longer path when you add animations!

Thanks! 😊

jzombie • Jun 7 '22

Indeed, it does give me motivation.

jzombie • Jun 7 '22

Thanks for posting this, though in Chrome for me I just saw the background image w/o anything cut out; same result as his fiddle example.

jzombie • Jun 7 '22

Result screenshot for reference in case it somehow looks different for me:

dev-to-uploads.s3.amazonaws.com/up...

Rob OLeary • Jun 7 '22

Ya, actually you need a prefixed version of that property for webkit browers (Chrome, Edge)

This is the combo you need usually:

 -webkit-background-clip: text;
background-clip:text;
color:transparent;

I added it to the examples. So it should look the same in all browsers now!

Peter Vivo • Jun 6 '22

Nice fight with CSS

Rob OLeary • Jun 6 '22

Thanks Peter 😄 It is a noble path to become a Knight of the CSS Order

Peter Vivo • Jun 6 '22 • Edited

Sir Rob you are proved please sit next to the:

#r-table { border-radius: 50%;}

Rob OLeary • Jun 6 '22 • Edited

😄

Yongchang He • Jun 6 '22

Nice work thank you for sharing!

Rob OLeary • Jun 6 '22

Thanks 🙏

Khryzen • Jun 7 '22

Cool transitions

Rob OLeary • Jun 7 '22

😎👍

Justinmaker • Jun 8 '22

Really great post

Rob OLeary • Jun 8 '22

Thanks 🙏

Andrew Baisden • Jun 7 '22

Wow really cool!

Rob OLeary • Jun 7 '22

😎🙏

fuzenco • Jun 9 '22

I really love this series. I intend to delve a little deeper into your examples but I already see ways of utilizing some of the concepts and code as starting points for my own. Much appreciated.

Rob OLeary • Jun 9 '22

Thanks fuzenco! I am glad that its gives you some insight and inspiration on making some animations yourself. It stems from my own frustration where I didnt see a path between mediocre animations and great animations, I couldn't find any decent walkthroughs to find a process!

ecyrbe • Jun 6 '22

Thank you. Nice article.

Rob OLeary • Jun 6 '22

Thanks 🙏

Rob OLeary • Jun 6 '22

Tilak Jain • Jun 7 '22

Very Creative, thanks for Sharing!

Rob OLeary • Jun 7 '22

Youre welcome 🙏

Liv Risner • Jun 14 '22

I am new to coding. But I wanted to make something for my father in law since it’s his birthday in a couple weeks ! He really loved this show even watched it three times during the pandemic and season 2 twice ! This would be awesome to make for him. So where do I start ? Is there an app or website ? That’s where I’m confused on

Rob OLeary • Jun 14 '22 • Edited

Hi Liv,

That's a nice idea!

If you are new to coding, then this is probably too advanced for you tackle. In this example, I create a vector graphic (SVG) with Inkscape, and I write CSS to make the animation. If you are not familiar with SVG or CSS, then it is too tough for you to start with this.

If you do not know much about CSS, then it is probably best to start there. Once you know the fundamentals of CSS, you can learn about CSS animation, maybe you can start with this tutorial.

My example is hosted on codepen. Codepen is an interactive code playground for frontend development. You can create an account and write code in your browser. There is a separate area for your HTML and CSS code, and it will show you the result of your code as you write. When you want to share it with others, you can embed it in webpage like I have done here.

Best of luck

Comment deleted

Some comments have been hidden by the post's author - find out more