Google Trends Page Clone

Solution preview 😎

website link

The challenge

i wanted to make google ui Dimension Picker tool that appears in Google trend site using Astro static site builder with Preact and animation using Gsap by GreenSock.

Tools I used

• Astor Build
• Preact
• Tailwind
• Gsap
• Nanostores

Learning outcomes

• using tailwind for the grid to be dynamic i had to add safelist grid-col in tailwind config file so the classes are not removed by PurgeCSS.
• using [Math.floor(Math.random() * (max - min) + min)] to randomize transitions and text.
• using Gsap Text plugin to create the typewriter effect.

👀 Want to know more about me?

Feel free to check my Twitter or instagram