Home
Feed

Extend

Hashnode Pro
Hashnode for Agents

Resources

The foreword
Hashnode gql skill

Buildful - AI coding agent that delivers frontier-level results at a fraction of the cost Bug0 - The AI-native e2e QA regression testing Hackathons Changelog Brand @hashnode on X Hashnode on LinkedIn Support - hello+support@hashnode.com Code of Conduct Terms Privacy Sitemap

Search Hashnode

Search posts, tags, users, and pages

Feed/

Discussion

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. Last week, while browsing the internet, I came across Eny...

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

#gsap

Written by

Israel Oyetunji

@IsraelMitolu · Osun, Nigeria

View profile

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 :)

Responses3

Markdown supported · ⌘↵ to post

essei forte

Feb 3, 2022

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

Israel Oyetunji

Feb 4, 2022

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

Eleftheria Batsou

Jan 28, 2022

Great guide Israel Oyetunji!

Israel Oyetunji

Thank you, Eleftheria!

Joe Attardi

Jan 26, 2022

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

Hi Joe Attardi. 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 of animation technologies.

Feb 4, 2022

Israel Oyetunji

Jan 26, 2022