"Horizontal Scroll with GSAP and ScrollMagic"
Bootstrap 4.1.1 Snippet by ranjit1602

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <header> <div class="headings text-center py-5"> <h1>Horizontal Scroll</h1> <p class="text-muted">with GSAP, scrollMagic and nice <a href="https://www.unsplash.com" target="_blank">Unsplash.com</a> pictures</p> </div> </header> <section class="section-items bg-dark text-white"> <div class="scroll-slider"> <div class="scroll-wrapper"> <article class="item scroll-slide"> <div class="scroll-line"></div> <div class="item-container"> <div class="item-image"> <img src="https://images.unsplash.com/photo-1510154328089-bdd27fc4ff66?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a8096fff6bf58a9b503f2d01cede364c&auto=format&fit=crop&w=1936&q=80" width="700px" alt="Image"> </div> <div class="item-body"> <h2 class="item-title">Grand Hotel</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem error mollitia provident.</p> <ul class="nav tags"> <li class="nav-item tag"><a href="#" class="nav-link">Hotel</a></li> <li class="nav-item tag"><a href="#" class="nav-link">Colorful</a></li> <li class="nav-item tag"><a href="#" class="nav-link">Symetric</a></li> </ul> </div> </div> </article> <article class="item scroll-slide"> <div class="item-container"> <div class="item-image"> <img src="https://images.unsplash.com/photo-1508433957232-3107f5fd5995?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=33a01492098edf3e26f986c0ef1a1ff3&auto=format&fit=crop&w=1964&q=80" width="700px" alt="Image"> </div> <div class="item-body"> <h2 class="item-title">Wall Street</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem error mollitia provident.</p> <ul class="nav tags"> <li class="nav-item tag"><a href="#" class="nav-link">Trader</a></li> <li class="nav-item tag"><a href="#" class="nav-link">Drugs</a></li> <li class="nav-item tag"><a href="#" class="nav-link">Finance</a></li> </ul> </div> </div> </article> <article class="item scroll-slide"> <div class="scroll-line"></div> <div class="item-container"> <div class="item-image"> <img src="https://images.unsplash.com/photo-1510154328089-bdd27fc4ff66?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a8096fff6bf58a9b503f2d01cede364c&auto=format&fit=crop&w=1936&q=80" width="700px" alt="Image"> </div> <div class="item-body"> <h2 class="item-title">Grand Hotel</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem error mollitia provident.</p> <ul class="nav tags"> <li class="nav-item tag"><a href="#" class="nav-link">Hotel</a></li> <li class="nav-item tag"><a href="#" class="nav-link">Colorful</a></li> <li class="nav-item tag"><a href="#" class="nav-link">Symetric</a></li> </ul> </div> </div> </article> <article class="item scroll-slide"> <div class="item-container"> <div class="item-image"> <img src="https://images.unsplash.com/photo-1508433957232-3107f5fd5995?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=33a01492098edf3e26f986c0ef1a1ff3&auto=format&fit=crop&w=1964&q=80" width="700px" alt="Image"> </div> <div class="item-body"> <h2 class="item-title">Wall Street</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem error mollitia provident.</p> <ul class="nav tags"> <li class="nav-item tag"><a href="#" class="nav-link">Trader</a></li> <li class="nav-item tag"><a href="#" class="nav-link">Drugs</a></li> <li class="nav-item tag"><a href="#" class="nav-link">Finance</a></li> </ul> </div> </div> </article> </div> </div> </section>
.scroll-slider { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; height: 100vh; } .scroll-wrapper { position: relative; display: flex; flex-wrap: nowrap; height: 100%; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .scroll-slide { flex: 1 0 75vw; max-width: 75vw; height: 100%; } .item { display: flex; justify-content: center; align-items: center; height: 100%; &-container { position: relative; } &-title { font-size: 4vw; font-weight: bold; line-height: 1; } &-body { @media (min-width:40em) { position: absolute; left: 100%; top: 50%; width: 50%; transform: translate(-25%, -50%); } } } .tag { margin-right: .5rem; > a { display: block; padding: .25rem .5rem; font-size: .75rem; text-transform: uppercase; background: rgba(#FFFFFF, .25); color: #FFF; } }
/* Horizontal Scroll Slider Version: 0.0.1 Author: Alexandre Buffet Website: https://www.alexandrebuffet.fr */ !(function($) { 'use strict'; var $slider = $('.scroll-slider'), $slides = $('.scroll-slide'), $sliderWrapper = $('.scroll-wrapper'), $firstSlide = $slides.first(); var settings = {}, resizing = false, scrollController = null, scrollTween = null, scrollTimeline = null, progress = 0, scrollScene = null; function scrollSlider(options) { // Default settings = $.extend({ slider: '.scroll-slider', sliderWrapper: '.scroll-wrapper', slides: '.scroll-slide', slideWidth: null, slideHeight: null, }, options); // Set dimensions setDimensions(); // On resize $(window).on( 'resize', function() { clearTimeout(resizing); resizing = setTimeout(function() { setDimensions(); }, 250); }); } function setDimensions() { settings.slideWidth = $firstSlide.width(); settings.slideHeight = $firstSlide.height(); console.log(settings.slideWidth); console.log(settings.slideHeight); // Calculate slider width and height settings.sliderWidth = Math.ceil((settings.slideWidth * $slides.length)); settings.sliderHeight = $firstSlide.outerHeight(true); // Set slider width and height $sliderWrapper.width(settings.sliderWidth); //$sliderWrapper.height(settings.sliderHeight); // Set scene setScene(); //resizing = false; } function setScene() { var xDist = -$slides.width() * ( $slides.length - 1 ), tlParams = { x: xDist, ease: Power2.easeInOut }; if (scrollScene != null && scrollTimeline != null) { progress = 0; scrollScene.progress(progress); scrollTimeline = new TimelineMax(); scrollTimeline.to( $sliderWrapper, 2, tlParams ); scrollScene.setTween(scrollTimeline); scrollScene.refresh(); } else { // Init ScrollMagic controller scrollController = new ScrollMagic.Controller(); //Create Tween scrollTimeline = new TimelineMax(); scrollTimeline.to( $sliderWrapper, 2, tlParams ); scrollTimeline.progress( progress ); // Create scene to pin and link animation scrollScene = new ScrollMagic.Scene({ triggerElement: settings.slider, triggerHook: "onLeave", duration: settings.sliderWidth }) .setPin(settings.slider) .setTween(scrollTimeline) .addTo(scrollController) .on('start', function (event) { scrollTimeline.time(0); }); } } $(document).ready(function() { scrollSlider(); }); })(jQuery);

Related: See More


Questions / Comments: