Smooth Page Transitions with GSAP ScrollTrigger, Smooth Scrollbar & Custom Elements with Shadow DOM

Magazine website concept with horizontal scrolling that uses smooth scrollbar library and GSAP's ScrollTrigger plugin at the same time. I am going cover lot's of interesting concepts like creating custom elements with shadow DOM, shared services with singleton pattern and so on!

Subscribe for more http://bit.ly/alldesignsub

— Source code
https://bit.ly/2RIK5uC

— Chapters
0:00 Intro
0:40 Adding Markup and Styles
5:05 Rendering Images
9:55 Add smooth scroller plugins
10:43 Shared service
13:10 Setup smooth scrollbar and scrollTrigger
15:22 Add scroll progress indicator
16:05 Selecting image functionality
19:45 Detail component with shadow DOM
22:25 Detail component styles
26:26 Displaying detail
32:50 Close method

— If you wanna buy me a coffee
https://paypal.me/bekaam

— Beats

JOY.
  / joy-aus  

—

— Previous uploads
Landing Page Infinite Slider Gallery with TypeScript, GSAP, HTML, Sass →    • Part 1 | Landing Page Infinite Slider...  
Create Starter Project With Webpack, TypeScript & Sass →    • Видео  
Create Simple Grid System with CSS Grid & Sass →    • Create Simple Grid System with CSS Gr...  ​

—

#gsap #typescript #smoothscroll