---
title: "Discussion on \"How to Create a Sleek Preloader Animation Using GSAP Timeline\" | Hashnode"
description: "Discussion on \"How to Create a Sleek Preloader Animation Using GSAP Timeline\". Have you ever come across a website with a fluidly animated preloader that drew you in and grabbed your interest from the first glance? It made you want to reload the page over and over again.\nLast week, while browsing the internet, I came across Eny..."
url: "https://hashnode.com/posts/how-to-create-a-sleek-preloader-animation-using-gsap-timeline/61efe1c487fd2728e7cd2fb9"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [How to Create a Sleek Preloader Animation Using GSAP Timeline](https://blog.mitolu.dev/how-to-create-a-sleek-preloader-animation-using-gsap-timeline?utm_source=hashnode&utm_medium=feed)

Have you ever come across a website with a fluidly animated preloader that drew you in and grabbed your interest from the first glance? It made you want to reload the page over and over again. Last week, while browsing the internet, I came across Eny...

Jan 25, 2022 · 8 min read · blog.mitolu.dev  
Updated Jul 4, 2022  
Read the article

-   [#gsap](https://hashnode.com/tag/gsap)
-   [#javascript](https://hashnode.com/tag/javascript)
-   [#css](https://hashnode.com/tag/css)
-   [#html5](https://hashnode.com/tag/html5)
-   [#beginners](https://hashnode.com/tag/beginners)

## Written by

[Israel Oyetunji](https://hashnode.com/@IsraelMitolu)

@IsraelMitolu · Osun, Nigeria

  
[View profile](https://hashnode.com/@IsraelMitolu)

Front End Developer && Technical Writer

Hello there 👋 I'm Israel, a Frontend Web Developer who is passionate about creating engaging UI and interactive experiences. I'm also a technical writer who writes on Frontend technologies to help other developers understand and be creative with them :)

## Responses 3

Markdown supported · ⌘↵ to post

[essei forte](https://hashnode.com/@essei)

[Feb 3, 2022](https://hashnode.com/posts/how-to-create-a-sleek-preloader-animation-using-gsap-timeline/61efe1c487fd2728e7cd2fb9/comment/61fc1a1dfd8b083e57289312)

great guide!! it would be interesting to implement it with imagesLoaded and with a load rate ... even just with numbers.

[Israel Oyetunji](https://hashnode.com/@IsraelMitolu)

[Feb 4, 2022](https://hashnode.com/posts/how-to-create-a-sleek-preloader-animation-using-gsap-timeline/61efe1c487fd2728e7cd2fb9/comment/61fc1a1dfd8b083e57289312#reply-61fcbb428d15cb3e7ce5ff95)

Very true Essei. I would love to see how that turns out!

[Eleftheria Batsou](https://hashnode.com/@eleftheriabatsou)

[Jan 28, 2022](https://hashnode.com/posts/how-to-create-a-sleek-preloader-animation-using-gsap-timeline/61efe1c487fd2728e7cd2fb9/comment/61f3b64522a38747671d7ea2)

Great guide [Israel Oyetunji](https://hashnode.com/@IsraelMitolu)!

[Israel Oyetunji](https://hashnode.com/@IsraelMitolu)

[Feb 4, 2022](https://hashnode.com/posts/how-to-create-a-sleek-preloader-animation-using-gsap-timeline/61efe1c487fd2728e7cd2fb9/comment/61f3b64522a38747671d7ea2#reply-61fcbb7d8d15cb3e7ce5ff9b)

Thank you, Eleftheria!

[Joe Attardi](https://hashnode.com/@joeattardi)

[Jan 26, 2022](https://hashnode.com/posts/how-to-create-a-sleek-preloader-animation-using-gsap-timeline/61efe1c487fd2728e7cd2fb9/comment/61f0b423e247b2151e620060)

I don't know much about GSAP but wouldn't using a CSS animation be more performant?

[Israel Oyetunji](https://hashnode.com/@IsraelMitolu)

[Jan 26, 2022](https://hashnode.com/posts/how-to-create-a-sleek-preloader-animation-using-gsap-timeline/61efe1c487fd2728e7cd2fb9/comment/61f0b423e247b2151e620060#reply-61f0e18f87fd2728e7cd4c1a)

Hi [Joe Attardi](https://hashnode.com/@joeattardi). That's a great question. For very simple animations, CSS would be a good choice, but when working with really complex animations, GSAP is highly recommended. You may want to read about the [pros and cons](https://css-tricks.com/comparison-animation-technologies/) of animation technologies.