A frontend recreation of the Hotel Odisej website, built entirely with vanilla HTML, CSS, and JavaScript. No frameworks, no component libraries — just hand-written markup, custom animations, and three JS libraries doing the heavy lifting for scroll behavior, transitions, and the image carousel.
This was a frontend practice project focused on replicating the visual design and animation feel of a high-end hospitality website.
Pages & Sections
The site is a single HTML file (index.html) structured across 12 sections — landing hero, descriptive text block, room showcase, room type listing, image carousel, dining section, nature/wellness section, activity highlights, and a full footer with contact and social links.
Animations Almost everything on the page animates on scroll. GSAP handles the animation logic, ScrollTrigger maps each animation to a specific scroll position, and Locomotive Scroll replaces the browser's default scroll with a smooth inertia-based version. The two are synced together so ScrollTrigger knows where Locomotive Scroll has scrolled to.
Specific animations include:
- A percentage loading screen that counts up to 100% before sliding off screen
- Character-by-character text color reveal on scroll for all major headings
- Fade-in and translate animations for images, paragraphs, and CTA buttons
- SVG wave separators that slide off-screen as you scroll past section boundaries
- A wellness section where two side panels animate outward to reveal centered text
- An overlay booking CTA that rises from the bottom of the final image
Custom Cursor
The default browser cursor is hidden. A small dark circle follows the mouse using mousemove event tracking with a cubic-bezier transition for a trailing lag effect.
Swiper Carousel Page 5 uses Swiper.js in a centered-slides mode with fraction pagination and custom arrow buttons. Active slides scale up and inactive ones shrink and shift, creating a depth effect.
Navbar Hide/Show
The navbar fades out when the user scrolls down and reappears when they scroll back up, detected via the wheel event's deltaY value.
hotel-odisej-portfolio/ ├── index.html # Full page markup — all 12 sections ├── style.css # All styles — layout, animations, typography ├── script.js # All JS — GSAP, Locomotive, Swiper, cursor, loader ├── PPWoodland-Regular.ttf # Custom serif font used throughout └── android-chrome-192x192.png # Favicon
| Library | Version | Purpose |
|---|---|---|
| GSAP | 3.12.2 | Scroll-triggered animations and timelines |
| ScrollTrigger | 3.12.2 | Mapping GSAP animations to scroll positions |
| Locomotive Scroll | 3.5.4 | Smooth scroll with inertia |
| Swiper | 10 | Image carousel on page 5 |
| RemixIcon | 3.5.0 | Arrow and UI icons |
All loaded via CDN — no npm install needed.
Clone the repo and open index.html directly in a browser. No build step, no server required.
bash git clone https://github.com/Samadali123/hotel-odisej-portfolio.git cd hotel-odisej-portfolio open index.html
For the smoothest experience, open it in Chrome or Edge. Locomotive Scroll's smooth scroll behavior can vary slightly across browsers.
GSAP + Locomotive Scroll sync — Locomotive Scroll hijacks the native scroll, so ScrollTrigger needs to proxy through it. The setup uses ScrollTrigger.scrollerProxy() to point GSAP at Locomotive's scroll position, and locoScroll.on("scroll", ScrollTrigger.update) to keep them in sync on every frame.
Character-level text animation — Each heading's text content is split into individual characters, each wrapped in a <span>, and then GSAP animates their color with a stagger. This gives the typewriter-style color reveal effect as you scroll.
Timeline labels — GSAP timelines use string labels (like 'a', 'b', 'n', 'r') to run multiple animations in parallel at the same point in the timeline rather than sequentially.
HTML · CSS · Vanilla JS · GSAP · ScrollTrigger · Locomotive Scroll · Swiper.js