Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 3 years ago

Meet Landing Page Challenge Hub with SCSS, Gulp and GSAP

gsap, gulp, sass/scss
P
Jérôme Haas•320
@jeromehaas
A solution to the Meet landing page challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


For this challange I worked the first time with GSAP. Because I have a very long timeline, I was looking for a solution to not show the animation everytime the page gets loaded. My idea was to set a cookie which expires after one day after an user has visited the page. Within this day, the animation would not play again. This approach worked - but it has brought with it another obstacle. Now I had a flackering effect whenever the page was loading - beacause there were some miliseconds where I had to check if the cookie is setted or not. My solution now is, to set the opacity of the body per default to zero and show it when the page is ready to load. Although this solutions works, it feels more like a workaround.

Has anyone expirence or ideas about how this could be done better? Also all other hints and advices are highly welcome.

Thanks in advance!

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Jérôme Haas's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License