DEV Community

Cover image for Cricket League Registration Landing Page with GSAP Animation
Jenna
Jenna

Posted on

Cricket League Registration Landing Page with GSAP Animation

This is a submission for Frontend Challenge v24.07.24, Glam Up My Markup: Recreation

What I Built

I created a landing page to prompt users to join the cricket league team by redirecting them to the website's registration form. The main goal was to drive conversions by guiding users smoothly through the process.

To achieve this, I designed the "Join Us" text in the header to transform it into an eye-catching button, drawing user attention and encouraging interaction. This button leads directly to the "How to Join" section, where detailed information is provided to make the registration process easy and engaging.

Demo

Live site
Github

Journey

I learned about GSAP animation by using it in this project. I also made the page responsive, mobile-friendly, and accessible by reducing motion.

I kept the HTML structure intact and made all the necessary changes by adding and manipulating elements through JavaScript.

Credits:
Images, Illustration from Freepik
Icons from svgrepo

Top comments (1)

Collapse
 
jwodjhd_hshsj_04a17c5dbb8 profile image
Jwodjhd Hshsj

Streaming platforms often provide pre-match analysis, post-match discussions, and exclusive interviews with players and coaches, giving fans a deeper understanding of the game. This content helps to educate fans about the strategies and nuances of cricket for t20 leagues, making them more informed and engaged viewers. Moreover, these platforms often archive past matches, allowing fans to revisit classic games and memorable moments at their convenience.