Search the Community

I want vertical progress bar in content section that will be completely filled when user reaches at the end of the content section.

Hello im trying to achieve this effect with locomotive scroll Graphic hunters and here is the link to my code on GitHub and here it is live. I tried adding this javascript for scroll trigger and I also added the locomotive scroll for some reason it seems locomotive is maybe making it not work. gsap.registerPlugin(ScrollTrigger); // Call this function when the DOM content has loaded document.addEventListener("DOMContentLoaded", function() { // Initialize other functions like initLoaderHome(), initTimeZone() as needed initLoaderHome(); initMagneticButtons(); initTimeZone(); initBasicFunctions(); initScrolltriggerCheckScroll(); initScroll(); initScrolltriggerAnimations(); }); function initScroll() { let scroll = new LocomotiveScroll({ el: document.querySelector("[data-scroll-container]"), smooth: true, lerp: 0.075, }); scroll.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy("[data-scroll-container]", { scrollTop(value) { return arguments.length ? scroll.scrollTo(value, 0, 0) : scroll.scroll.instance.scroll.y; }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight }; }, pinType: document.querySelector("[data-scroll-container]").style.transform ? "transform" : "fixed", }); window.addEventListener('resize', () => { scroll.update(); ScrollTrigger.refresh(); }); ScrollTrigger.addEventListener("refresh", () => scroll.update()); ScrollTrigger.refresh(); } /** * Scrolltrigger Animations Desktop + Mobile */ function initScrolltriggerAnimations() { // Disable GSAP on Mobile // Source: https://greensock.com/forums/topic/26325-disabling-scrolltrigger-on-mobile-with-mediamatch/ ScrollTrigger.matchMedia({ // Desktop Only Scrolltrigger "(min-width: 1025px)": function() { if (document.querySelector(".bg-img")) { // Scrolltrigger Animation : Example $(".bg-img").each(function(index) { let triggerElement = $(this); let targetElement = $(this); let tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, start: "100% 100%", end: "150% 0%", scrub: 0, } }); tl.to(targetElement, { opacity: 0, ease: "Power3.easeOut" }); }); } }, // End Desktop Only Scrolltrigger // Mobile Only Scrolltrigger "(max-width: 1024px)": function() { if (document.querySelector(".example")) { // Scrolltrigger Animation : Example $(".example").each(function(index) { let triggerElement = $(this); let targetElement = $(".example"); let tl = gsap.timeline({ scrollTrigger: { trigger: triggerElement, start: "0% 100%", end: "100% 0%", scrub: 0 } }); tl.to(targetElement, { rotate: 90, ease: "none" }); }); } } // End Mobile Only Scrolltrigger }); // End GSAP Matchmedia } but it wont work for some reason, when I apply markers: true it shows fade working but it doesnt work when no markers. I also not my locomotive code is causing that javascript I provide to not work. thats why it wont fade. I have no idea why it would do that.

I'm trying do example app and learn gsap and locomotive scroll. I create sample page, when during scrolling show some animation. In chrome browser all right, but when I'm trying in safari, my animation is flickering. My code: <template> <div class="scroll" data-scroll-container> <div class="horizontal-sections"> <div class="pin-wrap"> <div class="animation-wrap to-right"> <div class="section"> <NuxtLink to="/"> <p> Chnage page</p> <h2>Scroll Down</h2> </NuxtLink> </div> <div class="section section-amin section-gray"> <h2>You need to animate on scroll. Performing some action.</h2> <div class="block-anim"></div> </div> </div> </div> </div> <div class="section section-lightblue"> <h2>Some section 1</h2> </div> <div class="section"> <h2>Some section 2</h2> </div> <div class="horizontal-sections"> <div class="pin-wrap"> <div class="animation-wrap to-right"> <div class="section"> <NuxtLink to="/"> <p> Chnage page</p> <h2>Scroll Down</h2> </NuxtLink> </div> <div class="section"> <h2>Some section 2</h2> </div> <div class="section section-amin section-gray"> <h2>You need to animate on scroll. Performing some action.</h2> <div class="block-anim1"></div> </div> </div> </div> </div> <div class="section"> <h2>Some section 2</h2> </div> </div> </template> <script setup lang="ts"> import gsap from 'gsap'; import ScrollTrigger from 'gsap/ScrollTrigger'; import LocomotiveScroll from 'locomotive-scroll'; gsap.registerPlugin(ScrollTrigger); let locoScroll: any = null; onMounted(() => { locoScroll = new LocomotiveScroll({ el: document.querySelector('.scroll') as HTMLElement, smooth: true, }); pinType: document.querySelector(".scroll").style.transform ? "transform" : "fixed" locoScroll.on('scroll', ScrollTrigger.update); ScrollTrigger.scrollerProxy('.scroll', { scrollTop(value) { return arguments.length ? locoScroll?.scrollTo(value, { duration: 0, disableLerp: true }) : locoScroll?.scroll.instance.scroll.y; }, }); const horizontalSections = gsap.utils.toArray('.horizontal-sections'); horizontalSections.forEach((section: any, i) => { const thisPinWrap = section.querySelector('.pin-wrap'); const thisAnimWrap = thisPinWrap.querySelector('.animation-wrap'); const getToValue = () => -(thisAnimWrap.scrollWidth - window.innerWidth); ScrollTrigger.create({ trigger: section, scroller: '.scroll', start: 'top top', end: () => '+=' + thisAnimWrap.scrollWidth, pin: thisPinWrap, scrub: true, }); const fakeHorizontalAnim = gsap.fromTo( thisAnimWrap, { x: () => (thisAnimWrap.classList.contains('to-right') ? 0 : getToValue()), }, { x: () => (thisAnimWrap.classList.contains('to-right') ? getToValue() : 0), ease: 'none', scrollTrigger: { trigger: section, start: 'top top', scroller: '.scroll', end: () => '+=' + (thisAnimWrap.scrollWidth - window.innerWidth), scrub: true, }, } ); const tl = gsap.timeline(); tl.to('.block-anim', { duration: 1, scroller: '.scroll', ease: 'power3', clipPath: 'inset(25% 25% 25.01% 25.01% round 25vw 25vw 25.01vw 25.01vw)', }); const tl1 = gsap.timeline(); tl1.to('.block-anim1', { duration: 1, scroller: '.scroll', ease: 'power3', clipPath: 'inset(25% 25% 25.01% 25.01% round 25vw 25vw 25.01vw 25.01vw)', }); ScrollTrigger.create({ trigger: section, start: () => 'top top-=' + (thisAnimWrap.scrollWidth - window.innerWidth), end: () => '+=' + window.innerWidth, animation: tl1, scroller: '.scroll', scrub: true, }); ScrollTrigger.create({ trigger: section, start: () => 'top top-=' + (thisAnimWrap.scrollWidth - window.innerWidth), end: () => '+=' + window.innerWidth, animation: tl, scroller: '.scroll', scrub: true, }); }); ScrollTrigger.refresh(); }); onBeforeRouteLeave((to, from, next) => { ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); locoScroll?.destroy(); next(); }); </script> <style lang="scss" scoped> body { margin: 0; padding: 0; overflow-x: hidden; } h2 { position: relative; z-index: 2; margin: 0; } .section { position: relative; display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100vw; flex: 0 0 100vw; background: lightgray; } .section-gray { background: gray; } .section-lightblue { background: lightblue; } .block-anim { will-change: transform; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: lightgoldenrodyellow; } .horizontal-sections { position: relative; overflow-x: hidden; .pin-wrap, .animation-wrap { display: flex; position: relative; z-index: 1; height: 100vh; } } .spacer { height: 50vh; width: 100vw; } </style> And link to page: https://skandynawia-przystan.vercel.app/test. Do yoy know how I can fixed this ?

Hi, i'm trying to create an horizontal scroll on my gallery section. So i followed lot of tutorials, and compared my code to lot of codepen to understand why, my horizontal scroll doesn't works. Sometimes it works, but the section is not pinned, Sometimes the section is pinned but scroll doesn't works. What did i do wrong. Also i'm using tailwindCss. Here is my useLocoScroll Hook: import {gsap} from "gsap" import { ScrollTrigger } from "gsap/dist/ScrollTrigger" import LocomotiveScroll from "locomotive-scroll" import "locomotive-scroll/src/locomotive-scroll.scss" import { useEffect } from "react" gsap.registerPlugin(ScrollTrigger) const useLocoScroll = () => { useEffect(()=>{ const scrollEl = document.querySelector('#page-wrapper'); let locoScroll = new LocomotiveScroll({ el: scrollEl, smooth:true, multiplier:1, class: 'is-reveal', markers:true }) locoScroll.on('scroll', () => ScrollTrigger.update) ScrollTrigger.scrollerProxy(scrollEl, { scrollTop(value) { if (locoScroll) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y; } return null; }, getBoundingClientRect() { return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight}; }, pinType: scrollEl.style.transform ? "transform" : "fixed" }); const lsUpdate = () => { if (locoScroll) { locoScroll.update(); } }; ScrollTrigger.addEventListener("refresh", lsUpdate); ScrollTrigger.refresh(); return () => { if (locoScroll) { ScrollTrigger.removeEventListener("refresh", lsUpdate); locoScroll.destroy(); locoScroll = null; } }; }) } export default useLocoScroll And here my gallery component. import gsap from "gsap"; import { useEffect, useRef } from "react"; const Gallery = ({ data }) => { const ref = useRef(null); const projects = data.projects.data useEffect(() => { // This does not seem to work without a settimeout setTimeout(() => { let sections = gsap.utils.toArray(".gallery-item-wrapper"); const sectionWidth= ref.current.offsetWidth const scrollWidth = sectionWidth - window.innerWidth console.log(sections); console.log(ref.current.offsetWidth - window.innerWidth); gsap.to(sections, { scrollTrigger: { scroller: "#page-wrapper", scrub: true, trigger: ".sectionHorizontalScroll", pin: true, snap: 1 / (sections.length - 1), start: "top top", end: ()=> `+=${sectionWidth}`, markers: {startColor: "green", endColor: "red", fontSize: "12px"} }, x: -100 * (sections.length - 1), ease: "none", }); }); }, []); return( <section id="" className="h-screen w-max py-32 sectionHorizontalScroll" data-scroll-section > <div className="pinSectionHorizontalScroll"> <div className="flex flex-nowrap w-max" ref={ref} > { projects.map((project, index) => { return <GalleryItem mignature={project.attributes.mignature} title={project.attributes.title} key={project.attributes.title + "-" + index} /> }) } </div> </div> </section> ) } const GalleryItem = ({mignature, title}) => { return ( <div className="w-[50vh] gallery-item-wrapper" data-scroll> <h3 className="text-3xl font-bold text-grayPrimary">{title}</h3> </div> ) } export default Gallery At last, i added my locoScroll to my Layout like that: import ImageWebP from '../../components/ImageWebP' import Birds from './Canvas/Birds' import { Outlet } from "react-router-dom"; import Header from './Header'; import { useState } from 'react'; import CursorProvider from './CustomCursor'; import useLocoScroll from '../../services/useLocoScroll'; export default function Layout() { useLocoScroll(); const [isMenuOpen, toggleMenuOpen] = useState(false) return( <> <CursorProvider> <Header toggleMenu={toggleMenuOpen} isMenu={isMenuOpen}/> <section id='page' className={ 'h-full w-full relative transition-all' + (isMenuOpen ? " ml-96" : " ml-0") }> <section className='fixed left-0 top-0 w-screen h-screen -z-10'> <ImageWebP src={window.location.origin + "/assets/imgs/backrounds/background1.webp"} fallback={window.location.origin + "/assets/imgs/backrounds/background1.jpg"} classnames=" h-screen w-screen object-screen block " alt="A photo showing the expiration date on a box of Lucky Charms" className="object-cover h-full w-full" /> </section> <Birds /> <div id='page-wrapper' className=" w-full h-full min-h-screen z-30" data-scroll-container> <Outlet /> </div> </section> </CursorProvider> </> ) } Thank you if you take times to help me. There is the demo here: https://justhugo.fr

Hey everyone, I am trying to recreate this codepen. But I have a horizontal scrolling website. So its kinda tricky... This is what I have so far gsap.registerPlugin(ScrollTrigger); gsap.registerPlugin(ScrollTrigger); const scrollContainer = document.querySelector('.data-scroll-container'); const locoScroll = new LocomotiveScroll({ el: scrollContainer, direction: 'horizontal', smooth: true, /*lerp: 0.1,*/ /*touchMultiplier: 2.54,*/ reloadOnContextChange: true, tablet: { smooth: true, direction: 'horizontal', gestureDirection: 'both', }, smartphone: { smooth: true, direction: 'vertical', } }); window.onresize = function(){ location.reload(); } locoScroll.on('scroll', ScrollTrigger.update); ScrollTrigger.scrollerProxy(scrollContainer, { scrollTop(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y; }, scrollLeft(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.x; }, // we don't have to define a scrollLeft because we're only scrolling vertically. getBoundingClientRect() { return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight}; }, // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element). pinType: scrollContainer.style.transform ? "transform" : "fixed" }); window.addEventListener("load", function () { let pinBoxes = document.querySelectorAll(".pin-wrap > *"); let pinWrap = document.querySelector(".pin-wrap"); let pinWrapWidth = pinWrap.offsetHeight ; let horizontalScrollLength = pinWrapWidth - window.innerHeight; gsap.to(".pin-wrap", { scrollTrigger: { scroller: scrollContainer, //locomotive-scroll scrub: true, trigger: "#sectionPin", onEnter:() => { console.log("Enter") }, pin: true, //horizontal: true, // anticipatePin: 1, start: "left center", end: pinWrapWidth }, /*y: -horizontalScrollLength, ease: "none"*/ }); // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc. ScrollTrigger.refresh(); }); I cant seem to find out why its not working. The structure of my DOM is similiar as in the codepen. Special is that I use Elementor as my base, but it should not have any affect on this. As attribute I do have data-section in each section, as its not working else... Hope someone can help me!!! ❤️ Cheers zoruak

Hello Everyone, Hope you guys having a great day. So, here i am trying to achieve pin scrolling form left to right and right to left achieved nicely by @akapowl using locomotive scroll and how to make horizontal scroll section to display vertical on mobile and display horizontally at tab and desktop. and if i want to achieve horizontal scroll at mobile then this will be kind of bad for user experience as it will cause problem to scroll. https://codepen.io/akapowl/pen/8a383f202ba53d6b11cc83da39b6f5b5 I want to achieve left to right in second section and want to make them display vertical on mobile coz its overlapping

Hello, I have an issue with the website I am creating on Elementor. The template used here has locomotive scroll, GSAP and GSAP Scroll Trigger activated. Several elements are present on this template, which are animated and working as expected. Nevertheless, I can’t find a way to add a show-hide header. I tried many different combinations. When I am editing mode I see the header, but when I go on Preview mode the header doesn’t show up. New to this type of development, I would appreciate your help. I used the CSS ID on my header, #maria-header, I completed the code CSS and the javascript below: I appreciate the time you take to read and answer me. Best, #maria-header { display: flex; position: fixed; z-index: 999; width: 100%; } <script> ;( function() { // wait until gsap & ScrollTrigger available let chck_if_gsap_loaded = setInterval( function() { if( window.gsap && window.ScrollTrigger ) { // register scrolTrigger gsap.registerPlugin( ScrollTrigger ); // ... do your thing show_hide_header(); // clear interval clearInterval( chck_if_gsap_loaded ); } }, 500 ); function show_hide_header () { const site_header = document.querySelector( "maria-header" ); const show_hide_header = gsap.from( site_header, { yPercent: -100, duration: 0,25, ease: "sine.out", } ).progress( 1 ); ScrollTrigger.create({ start: "top top-=" + 100, onUpdate: ( self ) => { if( self.direction === -1 ) show_hide_header.play(); else show_hide_header.reverse(); } }); } } )(); </script>