This is a solution to the Space tourism website challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for each of the website's pages depending on their device's screen size
- See hover states for all interactive elements on the page
- View each page and be able to toggle between the tabs to see new information
- Solution URL: Add solution URL here
- Live Site URL: Add live site URL here
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- GSAP - JS library - Animations
- Barba JS - React framework) - Page transistions
I could spend days adjusting the Barba/GSAP integration. Making the pages smoothly transition was not to difficult when testing on Firefox/Chrome browsers. But on Safari the page indicator appeared to not complete the animation.
I was able to mitigate the animation by swapping the width
value in the gsap animations to use scaleX
instead.
ActiveNav.js - line 7
gsap.fromTo(this.marker, {autoAlpha: 0, visibility:'visible', opacity: 0, scaleX:'0%'}, {ease:'sine.out', autoAlpha: 1, transformOrigin: 'left', visibility:'visible', opacity: 1, scaleX:'100%'})
- GSAP Cheatsheet - Main resource to add transition/svg animations.
- Barba Docs - Documentation used to implement page transistions
- Website - Brian Thomas
- Frontend Mentor - @joyreacher