Search the Community

Hello guys, we are working on a new project, but we have a big problem on mobile. We use both scrolltrigger and locomotives scroll, on mobile once the user stops scrolling he is sent back to the top of the page. I can't understand what the problem is, we have entered several console logs when refreshing locomotives and also scrolltriggers.. Can anyone give us a hand? I think the problem was here locoScroll.on("scroll", ScrollTrigger.update); // tell ScrollTrigger to use these proxy methods for the ".data-scroll-container" element since Locomotive Scroll is hijacking things ScrollTrigger.scrollerProxy(".site", { scrollTop(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y; }, // 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}; } }); If i wrap this inside a if ($(window).width() >= 768) { media query, all works fine, but i need a clean solution. http://rambl.oneupstudio.it/

Hello @GreenSock, Thank you very much for your help! I have created a custom hook that integrates locomotive-scroll and ScrollTrigger using the video I linked in the original question, gsap Locomotive Scroll with ScrollTrigger demo, gsap docs for scrollerProxy, and some other Youtube videos. I have also took into consideration your comment from above. Everything works now, and having the hook where I could simply turn locomotive-scroll on and off helped me debug stuff. I will leave the code below for anyone else struggling. Maybe this thread will help. I hope you don't mind. Here is the custom hook: import React, { useEffect } from 'react'; import LocomotiveScroll from 'locomotive-scroll'; import gsap from 'gsap'; import ScrollTrigger from 'gsap/ScrollTrigger'; const useLocoScroll = (start) => { gsap.registerPlugin(ScrollTrigger); useEffect(() => { if (!start) return; const scrollEl = document.querySelector('.App'); let locoScroll = new LocomotiveScroll({ el: scrollEl, smooth: true, multiplier: 1.5, }); 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; }, scrollLeft(value) { if (locoScroll) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.x; } return null; }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight, }; }, }); const lsUpdate = () => { if (locoScroll) { locoScroll.update(); } }; ScrollTrigger.addEventListener('refresh', lsUpdate); ScrollTrigger.refresh(); }, [start]); }; export default useLocoScroll; To use this hook you simply call it inside theApp.js file like so: useLocoScroll(true) or any condition that will result to true You'll also need to add data-scroll-container to the".App" div and data-scroll-section to the most outer div of any of your sections. For simple use I have created a Section component that does that. For a batter understanding of the hook, please check gsap demo. import React from 'react'; const Section = ({ children }) => { return <section data-scroll-section>{children}</section>; }; export default Section; To use this, simply wrap your jsx into this component like so: return( <Section> code... </Section> ) For the gsap / ScrollTrigger code I've done exactly what Jack suggested. Here is another code example: useEffect(() => { let ctx = gsap.context(() => { const tl = gsap.timeline({ scrollTrigger: { trigger: heroContainerRef.current, scroller: '.App', start: 'top top', scrub: 1, }, }); tl.to(textColRef.current, { x: 200, opacity: 0, }); tl.to( imageWrapperRef.current, { x: -200, opacity: 0, }, 0 ); }); return () => ctx.revert(); }, []); Please note the scroller: '.App' inside the ScrollTrigger. This is very important as you need to specify what the new scroller is. Also, don't forget to add into your App.css or index.css the CSS that locomotive-scroller recommends. Hope this helps

Hello @GreenSock, Thank you for you replay! I know that ScrollSmoother is easier to work with, but purchasing the GreenSock Club does not make sense for me right now. Sorry. Regardless I am still locking for a wait to have a smooth scroll while being able to use everything else that gsap offers. I am sorry that it was difficult to navigate the demo. It's part of a bigger project and I tool only what's necessary. I forgot to add content underneath the hero section so you could scroll. I have fix the issue and now you should be able to scroll ?. Also, there ware some different styling for mobile so please enlarge the window in order to see the animation. Maybe this will help. I have also added a 3s duration so the animation doesn't fly off the screen. I did ignore the ScrollTrigger and implemented the locomotive-scroll. It seems to work fine. I don't think that the locomotive package is the problem as I wasn't able to make the ScrollTrigger run even before adding it. Before adding the locomotive scroll, I had overflow: hidden on the App and body and had a separate component with overflow-y scroll. I figure that ScrollTrigger doesn't work on divs with overflow-y so I added the locomotive scroll because I planned to do it anyways. The difference between before the locomotive scroll and after is the before the animation wont event run. Now the animation runs but ScrollTrigger gets ignored. Can you please take a quick look at pages > homepage > hero > index, right before where the jsx starts and see if you can spot anything? If you don't see anything at the first glimpse I will try to find other solutions. Thank you!

I am trying to set up locomotive scroll with ScrollTrigger but it seems that the ScrollTrigger does not work. I would like for the animation to run as scrub, only when scrolling but the tl runs as normal when refreshing the page, ignoring the ScrollTrigger. I am wondering if ScrollTrigger still works with another smooth-scrolling libraries, since gsap now has a SmoothScroll plugin. I made my setup base on a video I found on youtube and I think I set up everything properly. As it seems that a minimal demo is requested often, I have created a sandbox. Thank you!

Hi, Sorry to hear about the troubles, is no fun when something just doesn't work . Maybe you could try using Locomotive directly on the project and not using the React wrapper. As you can see there are plenty of Vanilla JS examples around here that use ScrollTrigger and Locomotive without any issues. I know that using the hook and the high order component is super fast and makes your life far easier, but sometimes these things require some extra working hours. Finally you should check ScrollSmoother, GSAP smooth scrolling plugin: https://greensock.com/scrollsmoother/ It is a Club GreenSock bonus plugin, but normally the cost of that is recovered in a single project, after that is all profits and you get an excellent tool set that allows you to do amazing things. Happy Tweening!

Unfortunately, this brings me back to square one with everything disappearing at start and reappearing at end (due to Locomotive Scroll’s page translation). Bummer, thought someone had a fix for this for sure. Thank you though!

Hi, You're still pinning the quotes container in your code: gsap.to(".quotes-wrapper", { xPercent: -100 * (sections.length - 1), ease: "none", scrollTrigger: { trigger: ref.current, // ref is the element with class quotes start: "top center", end: () => "+=" + ref.current.offsetWidth, scrub: 0.5, markers: true, pin: true } }); Pin true by default pins the trigger element which is the quotes. The trigger element has to be the parent element. Also there could be some other issues that are brought to the table by locomotive. Unfortunately we don't have the time resources to debug third party plugins/components. I created a simple example without locomotive and it seems to work fine: https://stackblitz.com/edit/react-w4eihw?file=src%2Fstyle.css,src%2FApp.js Hopefully this helps. Let us know if you have more questions. Happy Tweening!

@akapowl I'm having the same issue. I believe it is related to the page scroll with Locomotive scroll messing up with translating the page. However, this should be possible and I found a tutorial by Greensock: https://codepen.io/GreenSock/pen/ExPdqKy I cannot get it to work though, my content keeps disappearing. Here is a minimal demo: https://codesandbox.io/s/cool-noyce-108h6c?file=/pages/index.tsx Here is also a link to the final page. At the bottom where it says “Meine Community Über Mich” you can see it disappear and reappear: https://juliaweber-git-preview-inzn.vercel.app Thanks for your help!

Actually it is Laravel Project and Working Good in Plain Javascript Iam using GSAP, ScrollTrigger, TextPlugin & Locomotive Scroll but I want to compile assets with laravel Mix I compiled it and also there is no error but after including compiled Javascript File in Html file it breaks the animation this problem is coming it is working in plain javascript but not after compiled with Laravel Mix

I would look at the existing ways of integrating scrollTrigger with other smooth scrolling libraries like locomotive scroll or AsScroll

Hi, thank you for your response. I think that use the last version of locomotive scroll because I took the file in their github. I'll try the solution in my website, for the moment it working. Thank you for your help. If I have a question I'll ask you.

Hy, first sorry for my english I'm french ?. I'm working on a website and I have a problem with an horizontal scroll on the mobile versio. The fact is that we have two horizontal scroll in one page, on the first scroll, everithing is ok, but when we finish to scroll the second one, the first pass over the second. const scroller = document.querySelector('#scroller'); const locoScroll = new LocomotiveScroll({ el: scroller, smooth: true, smartphone: { smooth: true, }, tablet: { smooth: true, } }); // each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning) locoScroll.on("scroll", ScrollTrigger.update); // tell ScrollTrigger to use these proxy methods for the ".smooth-scroll" element since Locomotive Scroll is hijacking things ScrollTrigger.scrollerProxy(scroller, { scrollTop(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y; }, // 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: scroller.style.transform ? "transform" : "fixed" }); ScrollTrigger.defaults({ scroller: scroller }) /* Scroll locomotive + horizontal */ const horizontalSections = gsap.utils.toArray('section.horizontal') // const getMaxWidth = () => { // maxWidth = 0; // sections.forEach((section) => { // maxWidth += section.offsetWidth; // }); // console.log(maxWidth); // }; horizontalSections.forEach(function (sec, i) { let horizontal = document.querySelectorAll('.horizontal'); var thisPinWrap = sec.querySelector('.pin-wrap'); var thisAnimWrap = thisPinWrap.querySelector('.animation-wrap'); // getMaxWidth(); var getToValue = () => -(thisAnimWrap.scrollWidth - window.innerWidth); gsap.fromTo(thisAnimWrap, { x: () => 0 }, { x: () => getToValue(), ease: "none", scrollTrigger: { mobile:{ smooth: true, }, trigger: sec, scroller: scroller, start: "top top", end: () => "+=" + (thisAnimWrap.scrollWidth - window.innerWidth), pin: thisPinWrap, invalidateOnRefresh: true, anticipatePin: 1, scrub: true, //markers: true } }); }); Did you have something to help us or not ? Thanks in advance to the team.

Hi @Faz_kh Thanks for your interest in my courses. Unfortunately, this promotion was only for Club GreenSock members and it expired over a year ago. The good news is I currently have a public End of Year sale that offers tremendous value to everyone. You can unlock my entire course bundle for only $67 or just $2.95 a month. Below is a list of the over 200 lessons available. I'm confident there is no better value in any front-end training and I hope you find this favorable. Join Creative Coding Club Offer expires Jan 1 Carl GSAP 3 Express Welcome to the course Our Development Environment GSAP 3 Express Notes and Instructions GSAP Object: Tweens and Timelines Basic Tween from() and fromTo() Special Properties: Delay and Repeat Special Property: Ease Reading Ease Curves Special Property: Stagger Tween Control Why from() Tweens Glitch and Stop Working! Using the GSAP Documentation Why Timelines are Important Basic Timeline Intro Position Parameter Visualizer Basic Timeline Position Timeline Control and Labels Simple Rollover / Hover Effects Rollover / Hover Effects for Multiple Elements Constant Hover Pulse with Smooth Reset Project Setup Basic Animation Timeline Defaults GSDevTools Tweak Timing Remove Flash of Un-styled Content (FOUC) Typewriter Effect with TextPlugin Getting Started with SplitText SplitText Word by Word SplitText Line by Line Get Started with ScrollTrigger in 3 Easy Steps Percentage-Based Keyframes Percentage-Based Keyframes Part 2: Benefits, Downsides and Challenges Beyond the Basics Chapter Intro From Illustrator to Animation Getter-Setter Methods Smart Play-Pause-Restart Toggle Button Scrub Through an Animation with an HTML Input Slider Tween progress() of an Animation OOPS: Gotta Fix the Buttons Intro Callbacks Build a Timeline Visualizer with getChildren() killTweensOf() gsap.utils.wrap() gsap.registerEffect() CSSPlugin: Use clearProps to remove inline styles 3D Transforms Understanding GSAP's immediateRender Property Tweening function-based values Ease-based distribution of start times Using the weightedRandom() helper function Using the distribute() utility function Rubberbander Text Effect Staggered Staggers. What? 3D Text Rotator Repeat Values on Tween vs Stagger Object Using Callbacks in Staggers Staggered Staggers with No Gap Intro Linear Navigation with addPause() Non-Linear Navigation Using Labels Add a Pause to a Timeline for a Specific Amount of Time Nested Timelines Functions That Return Timelines tweenTo() and tweenFromTo() File Setup Animate Panel 1 Create a function to animate 3 panels Morph curve using AttrPlugin TItle Effects Generator Part 1 Title Effects Generator Part 2 Title Effects Generator Part 3: Wrap Up Refactoring Multiple Timelines Into a Single Tween Staggered Animations Variations on a Theme ScrollTrigger Express Welcome Get Started in 3 Easy Steps Scrub and Pin Pinning and pinSpacing Overview Pinning Deep Dive Pin Spacing Pinning Car Project Intro to Parallax Scrolling Aerial SVG Car Parallax ScrollTriggers for Multiple Sections Smooth Scrolling with Locomotive Scroll Prevent Scroll on Fullscreen Intro Back to Top Link: fastScrollEnd and toggleClass Change Nav Color on Scroll Change Nav Color on Scroll: Part 2 Responsive Scroll-Based Reading Progress Bar ScrollTo Plugin and ScrollTrigger (Animated Jump Links) ScrollTrigger Toggle Animations 4 Ways Responsive Scroll-Driven Line-by-Line Text Effect Part 1 Responsive Scroll-Driven Line-by-Line Text Part 2 Off-Screen Reset 3D Rolling Headers Slide-in Panels Layered Pinning Layered Pinning from Bottom SVG Mega Scroll and Follow Use ScrollTrigger Callbacks to Control HTML5 Video Scoll-Driven SVG Path Follower Part 1: File setup, Alternating Rows and ScrollTrigger Basics Part 2: Offscreen Reset Part 3: Mobile Layout SVG Animation with GreenSock Welcome! Course Status Updated 11/19 Animating the Guts of an SVG with GreenSock Style SVG with Attributes and CSS Exploring More Shapes and Line Styles with Boxy SVG SVG Path Element: Bezier Curve Commands SVG Groups and Applying Transforms SVG Text: Using Custom Fonts Understanding transformOrigin and svgOrigin Project: SVG Basic Banner SVG Strokes: linejoin, linecap, and miter-limit Avoiding Weird Glitches with Line Animations Don't Animate tspan Elements Character by Character Animations Part 1: Characters as Paths Character by Character Animation Part 2: Characters as Text SVG Text on Path SVG viewBox and viewport Understanding preserveAspectRatio: Putting Skinny Rectangles in Squares preserveAspectRatio Part 2: Recap and Examples Marching Ants: Intro to dasharray and dashoffset Drawing Animated Lines Using DrawSVG Plugin DrawSVG Mastery Adding Custom Split Points with Boxy SVG Recreating GreenSock.com Jelly Nav Introducing SVG Clip Paths Animating SVG Clip Paths Introducing SVG Masks Animating SVG Masks: Reveal and Hide Text SVG Masks: Spotlight Effect Clip and Mask: Feathered Colorize Effect Welcome to Programming SVG Building the Worst SVG Drawing App SVG Background Generator (blend modes, gradients, random start time) B-sides, Bonuses, and Oddities Laziest Response Slider Using repeatRefresh Responsive Full Screen Circle using CSS VMAX and Edge to Edge Text Curved motion using different eases for x and y Reveal dots while animation plays Constant Speed with Random Motion Directional Rotation Bug Race in a Single Tween Bug Race Complete: Jerk Level and Weighted Random Values Hacking Ease Curves Basic Animated Counter using Snap Plugin Customizable and Re-usable Counter Effect Auto-close open item // reverse current timeline Animated Snow using Interpolate Favorite Mask Effects Using Clip-Path in a Custom Effect for Multi-directional Wipes Hard Edge Gradient Animated Fill Mask-Up / Scale-Down Effect: Chevy Tahoe Ad Exploration Mask-Up / Scale Down Part 2: optimizations and registerEffect() Text Mask Effect Using Blend Modes 3D Card Flip Effect (double-sided) Interactive 3D Card Flip 3D Card Flip Basic Game Responsive Hover Nav Gallery with Burn-in Effect Image Comparison Tool with Draggable Gradient Filled Text on Scroll Intro to ScrambleText Plugin Staggered Text Effect with ScrambleText Creating distinct enter and leave animations with a single timeline Circular Distribution of Elements without much Math Ferris Wheel: Counter-rotation to keep spinning elements upright Interactive Peacock with Modern GreenSock Banner: Clean loops and custom end screens : Part 1 Callbacks Banner: Clean loops and custom end screens : Part 2 TweenTo() Multiline Text Mask Effect (overflow hidden) Part 1: Basic setup Multiline Text Mask Effect Part2: Responsive Using CSS Clamp for Responsive Text Sizing Zero-Duration Tweens and set() Zero-Duration Tweens Part 2: addPause() Gallery with AutoPlay Part 1: File Setup / Basic Functionality Gallery with Autoplay Part 2: Toggle Switch Breaking Free of the Timeline Mindset: Part 1 Breaking Free of the Timeline Mindset Part 2 Breaking Free of the Timeline Mindset Part 3 Creeping and Jumping Dots Physics Plugins Part 1: PhysicsProps Physics Plugins Part 2: Physics2D Rotating Input Dials (SVG) Challenge: Slime Conveyor Belt Solution: Slime Conveyor Belt Constant Loop with Return to Start Drop Down Descramble Part 1: Technical Exploration Drop Down Descramble Part 2: Building the Animation Animating background-size cover and contain Constant Loop with Return to Start: Part 2: Smart Reverse Staggered Bars Wipe Transition Ease-based distribution of start times GSAP 3 Express Free Trial Ad Zim Splat 3D Inverted Cube Spinner getRelativePosition() Spinner Demo One Line of Code Mega Demo Apply a CustomEase to a MotionPath Tween How I Built my CustomEase Visualizer Pixi Circulator Beta Pixi Sweet Corn Pixi Circles Top and Bottom Dynamic Text Effect Self Playing Dynamic Interactive Text Effect Special Eases SlowMo Overview In Your Face Effect Whirl-Around Text Effect RoughEase Overview Scary Flicker Shiver Configure an elastic ease Steps Ease for Spritesheet Animations CustomEase Quick Start Unlock all these lessons for only $67 (expires Jan 1)

Hi Everyone! Pls help me I have a trouble with the integration of GSAP and Locomotive Scroll When i tried to make an animation on both scripts the animation of Motion Path is going a little slow and looks like frame and frame animation, and i dont know how to solve it ! any idea? Thanks to everyone

Thanks Cassie! I included the locomotive scroll just because its being used but I don't believe its causing the issue. The issue disappears when I remove the following code: ScrollTrigger.scrollerProxy(pageContainer, { scrollTop(value) { return arguments.length ? scroller.scrollTo(value, 0, 0) : scroller.scroll.instance.scroll.y; }, getBoundingClientRect() { return { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight }; }, pinType: pageContainer.style.transform ? "transform" : "fixed" }); I am fairly new to GSAP and used someone elses code. How does this section work so I could troubleshoot. I would assume yes it is returning 0 at weird times. I noticed its once the scroll comes to a stop it jumps right back to the top... super weird and I cant figure it out. I think you're spot on it has to do with scrollTo and scroll.instance, but I'm unsure how these work. Any help would greatly be appreciated!

Hey there! Locomotive isn't one of our tools so I'm afraid we can't really help with bugs, but we can help with only running code on mobile and tablet. https://greensock.com/docs/v3/GSAP/gsap.matchMedia() Keep in mind that all the GSAP animations and ScrollTriggers created inside a matchMedia function get reverted automatically - but not anything to do with locomotive. You'd have to handle that yourself. FYI - This following section is what I'm talking about. This isn't GSAP-related code const scroller = new LocomotiveScroll({ el: pageContainer, smooth: true, getDirection: true }); If you're bug hunting this is where I'd start looking for something funny ? ScrollTrigger.scrollerProxy(pageContainer, { scrollTop(value) { // What value is getting returned here? Is it returning 0 at strange times? return arguments.length ? scroller.scrollTo(value, 0, 0) : scroller.scroll.instance.scroll.y; }, });

Hi, I have come across a bug on mobile where if I scroll once and don't touch the screen again it automatically pulls the entire scroll position back to the top. I am not extremely familiar with GSAP and the horizontal scroll, as I used a common Codepen example to recreate this effect. My website is: shanefry.com Desktop: Have the horizontal scroll section - works as expected Mobile: I hide that section and display a mobile alternative - for some reason it gets pulled to the top (cant navigate the website) I find if I remove the horizontal scroll code, my website works as normal... So I'm assuming something here is causing my locomotive scroll to be reset back to the top? Is there a way to kill this code on mobile and tablet? The video attached shows the behavior I'm talking about. (Keep in mind I scroll once and don't touch the screen again) const pageContainer = document.querySelector('#scroller'); const scroller = new LocomotiveScroll({ el: pageContainer, smooth: true, getDirection: true }); gsap.registerPlugin(ScrollTrigger); scroller.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy(pageContainer, { scrollTop(value) { return arguments.length ? scroller.scrollTo(value, 0, 0) : scroller.scroll.instance.scroll.y; }, getBoundingClientRect() { return { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight }; }, pinType: pageContainer.style.transform ? "transform" : "fixed" }); let pinBoxes = document.querySelectorAll(".pin-wrap > *"); let pinWrap = document.querySelector(".pin-wrap"); let pinWrapWidth = pinWrap.offsetWidth; let horizontalScrollLength = pinWrapWidth - window.innerWidth; // Pinning and horizontal scrolling gsap.to(".pin-wrap", { scrollTrigger: { scroller: pageContainer, //locomotive-scroll scrub: true, trigger: "#sectionPin", pin: true, // anticipatePin: 1, start: "top top", end: "+=3000" }, x: -horizontalScrollLength, ease: "none" }); ScrollTrigger.addEventListener("refresh", () => scroller.update()); //locomotive-scroll ScrollTrigger.refresh();

Hello there. One problem is that you are not sticking to the order of progression as it is shown in the locomotive-scroll example on the .scrollerProxy() documentation page; which is this one here. https://codepen.io/GreenSock/pen/zYrELYe This following example on the other hand sort of emulates your order of progression, and as you can see, it won't work this way. [Open in wider window to see it not working, because due to the way locomtoive reverts back to native scrolling on narrower viewports the preview here works just fine] https://codepen.io/akapowl/pen/vYaErqP You should be adding the refresh-eventListener and setting the default scroller to ScrollTrigger before you create your ScrollTriggers. The latter one of those two probably is the one breaking things for you, so that is one thing that you will likely want to change. If that doesn't resolve things for you, make sure to include a minimal demo that demonstrates your issue.

// or all tools are exported from the "all" file (excluding members-only plugins): import LocomotiveScroll from 'locomotive-scroll' import { gsap, ScrollTrigger, TextPlugin} from "gsap/all"; // don't forget to register plugins gsap.registerPlugin(ScrollTrigger, TextPlugin); // Smooth Scroll Function const locoScroll = new LocomotiveScroll({ el: document.querySelector(".scroll-smooth-loco"), smooth: true, // for tablet smooth tablet: { smooth: true }, }); locoScroll.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy(".scroll-smooth-loco", { scrollTop(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y; }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight }; } // follwoing line is not required to work pinning on touch screen /* pinType: document.querySelector(".smooth-scroll").style.transform ? "transform" : "fixed"*/ }); let tl = gsap.timeline(); // define timeline // Animate graphs function function initGraphSectionAnimate() { tl.from([".graphGrowY"], { scaleY: 0, transformOrigin: "bottom", duration: 2, scrollTrigger: { trigger: "#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a42b-9f01ccfd", start: "top top", end: "bottom +=200", pin: true, scrub: true, // markers: true, }, }); tl.from([".graphGrowFromBottom"], { scaleY: 0, transformOrigin: "top", duration: 2, scrollTrigger: { trigger: "#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a42b-9f01ccfd", start: "top top", end: "bottom center", scrub: true, // markers: true, }, }); tl.from([".graphGrowCreditCards1"], { scaleY: 0, transformOrigin: "bottom", duration: 2, scrollTrigger: { trigger: "#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a42b-9f01ccfd", start: "top top", end: "bottom center", scrub: true, // markers: true, }, }) .from([".graphGrowCreditCards2"], { scaleY: 0, transformOrigin: "bottom", duration: 2, scrollTrigger: { trigger: "#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a42b-9f01ccfd", start: "top top", end: "bottom center", scrub: true, // markers: true, }, }) .from([".graphGrowCreditCards3"], { scaleY: 0, transformOrigin: "bottom", duration: 2, scrollTrigger: { trigger: "#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a42b-9f01ccfd", start: "top top", end: "bottom center", scrub: true, // markers: true, }, }) .from([".graphGrowCreditCards4"], { scaleY: 0, transformOrigin: "bottom", duration: 2, scrollTrigger: { trigger: "#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a42b-9f01ccfd", start: "top top", end: "bottom center", scrub: true, // markers: true, }, }); } // Manipulation of numbers function function initNumberManipulationAnimated(startCountNum, endCountNum, idOfElement) { let startCount = startCountNum, num = {var:startCount}; gsap.timeline({ scrollTrigger: { trigger: "#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a42b-9f01ccfd", start: "top top", end: "+=300", scrub: true, } }) .to(num, {var: endCountNum, duration: 5, ease:"none", onUpdate:changeNumber}) .to({}, {duration:2}) function changeNumber() { idOfElement.innerHTML = (num.var).toFixed(); } } // Manipulate All Numbers Function function manipulateAllNums() { initNumberManipulationAnimated(0, 205115, numbers); // For Credit Balance initNumberManipulationAnimated(0, 1540, buildbalancecount); // For Bill & Taxes initNumberManipulationAnimated(0, 4230, energyPower); initNumberManipulationAnimated(0, 3421, bonusNumAnm); initNumberManipulationAnimated(0, 56909, EarningsAm); initNumberManipulationAnimated(0, 6543, SpentThisMonth); initNumberManipulationAnimated(0, 543, clientAmNum); initNumberManipulationAnimated(0, 985, LeadsAmNum); initNumberManipulationAnimated(0, 780, RevenueAmNum); initNumberManipulationAnimated(0, 34, UsersAmNum); } // Big Animate Section UI, Code Speed up Section function bigUiCodeAnimation() { // green light Animate const greenlightAnimate = gsap.timeline({ repeat: -1 }).to(".greenResLight", { opacity: 0, duration: 1.5, ease: "Power4.inOut" }); // main animation const tl = gsap.timeline( { // defining ScrollTrigger scrollTrigger: { trigger: "#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a432-9f01ccfd", start: "top top", end: "bottom +=350", pin: true, scrub: true, // markers: true, } }) tl.fromTo( // Animating Best ui text ".hero-text", { y: "50px", opacity: 0, duration: 10, delay: 2 }, { y: "0px", opacity: 1, stagger: 0.5 }, "+=1" ) .to(".hero-text", { opacity: 0 }, "+=1") // fade out Best ui text .to("#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a432-9f01ccfd", { background: 'linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%)', scale: 3, x: -50, ease: "none", duration: 10, }, "+=1" ) .from([ ".triangleElementUi", ".circleElementUi", ".uiShape1", ".uiShape2" ], { scale: 0, opacity: 0, transform: "rotate(90deg)", duration: 3 } , "+=1" ) .from(".greatManImg1", {scale: 5, opacity: 0, duration: 10}, "+=1") .from(".greatManImg2", {scale: 5, opacity: 0, duration: 10}, "+=1") .from(".greatManImg3", {scale: 5, opacity: 0, duration: 10}, "+=1") .to(".bestUiDesignSec",{opacity: 0, duration: 3}, "+=1") .to("#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a432-9f01ccfd", { background: '#ffffff', x: 7, scale: 1, ease: "none", duration: 10, }, "+=1" ) .to("#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a432-9f01ccfd", {backgroundImage: "url(frontend/media/best-in-class-ui-code/code-editor-bg.svg)", backgroundSize: "cover", opacity: 1, duration: 3}, "+=1") .from(".consoleEditorSvg", {scale: 0.5, opacity: 0, duration: 10, delay: 1}, "+=1") .to(".constText", { duration: 2, text: "const", delay: 1 }) .to(".getRespText", { duration: 2, text: "getResponse", delay: 1 }) .to(".getResEqText", { duration: 2, text: "=", delay: 1 }) .to(".getResDataLineText", { duration: 2, text: "axirio", delay: 1 }) .to(".getResDataDotText", { duration: 2, text: ".", delay: 1 }) .to(".getResDataGetText", { duration: 2, text: "GetData", delay: 1 }) .to(".getResDataBreText", { duration: 2, text: "()", delay: 1 }) .to(".getResDataColText", { duration: 2, text: ";", delay: 1 }) .from(".respSvg", { y: -50, scale: 1, opacity: 0, duration: 3, }) .from(".showCodeSlow",{ opacity: 0, duration: 3 }) .to("#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a432-9f01ccfd", { backgroundImage: '', duration: 3, }) .to(".consoleEditorSvg", { opacity: 0, duration: 3 }) .to(".respSvg", { opacity: 0, duration: 3 }, "+=1") .to("#w-node-_6ff07a12-5eb1-c7b6-c700-541be418a432-9f01ccfd", {backgroundImage: "url(frontend/media/best-in-class-ui-code/speed-upBg.png)", backgroundSize: "cover", opacity: 1, duration: 3}, "+=1") .from(".speed-upSvg", { opacity: 0, scale: 0, duration: 10 }) .from(".fallingAngle", { opacity: 0, y: -70, duration: 3 }); } // initializer function function init() { initGraphSectionAnimate(); manipulateAllNums(); bigUiCodeAnimation(); } window.addEventListener("load", function () { init(); // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); ScrollTrigger.defaults({ scroller: '.scroll-smooth-loco' }); // --- SETUP END --- });

Hi, That site is actually using Locomotive for the smooth scrolling. If you inspect the data attributes you'll see that they are using data-scroll and data-scroll-speed: <div class="p-30 xs:p-60 flex items-center justify-center absolute w-full h-full left-0 top-0 z-2 is-inview" data-scroll data-scroll-speed="3" style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 116.128, 0, 1);"> If you check locomotive's docs you'll see that's how is applied: https://github.com/locomotivemtl/locomotive-scroll#smooth Finally in the case of your example perhaps there is no need to move the entire header, just the content inside it. Just add the data-speed amount in those elements or a parent element wrapped around the header. Something like this: https://codepen.io/GreenSock/pen/BaVELLK Hopefully this makes things clearer. Let us know if you have more questions. Happy Tweening!

I understand what i mean, If there is someone who helps me and encourages me to learn, also showing me examples (like you) so i can understand how to do it more or less, it becomes important for me and I have more desire to learn. So I really thank you. I managed to do what I wanted, (i can't belive)...if you take a look on the left side you see the images go out of the screen when I scroll while the image in the center gets bigger. Surely there will be errors or adjustments in the code that I created but the effect is a bit like that of the site that I shot as an example. What do you think? Now i can also try to add a sort of parallax effect to every single image..maybe i'm asking too much to my self With locomotive scroll it's easy to add parallax effect to every element, you have just to add a class to you div in html The predefined classes comes directly from locomotive scroll...it's easy. Her you give me a link..i have to check if i will be able. Thanks Davide https://codepen.io/uavide/pen/MWXzEej

Hi @Vizzale and welcome to the GreenSock forums! Just set the start point of your animation to top top and set a relative end point to the number of sections minus one, times the viewport height: const tl = gsap.timeline({ defaults: { ease: 'none' }, scrollTrigger: { trigger: '#animation', markers: true, pin: "#animation", scrub: 0.5, start: "top top", end: "+=" + ((gsap.utils.toArray("section").length - 1) * 100) + "%", } }); I don't have any experience with Locomotive so I can't tell you exactly what's going on here, but my guess is that for the way Locomotive works the max value is not being picked up correctly. Another alternative that could be less cumbersome is to use the scroller and window height: const tl = gsap.timeline({ defaults: { ease: 'none' }, scrollTrigger: { trigger: '#animation', markers: true, pin: "#animation", scrub: 0.5, start: "top top", end: () => (document.querySelector(".scroller").clientHeight - window.innerHeight), } }); Happy Tweening!

Hello everyone, I created this simple animation using GSAP tween, timeline and the ScrollTrigger plugin. The animation works perfectly, but when I integrate the third-party library Locomotive Scroll into the project, the property end: 'max' does not work correctly. To build the animation I followed point by point the suggestions you provided in the example at the following link. https://codepen.io/GreenSock/pen/zYrELYe I know this is not a GSAP product but I still hope someone will be able to help me. Thanks in advance.

Hello @lucasdesign Although it is great that you included a demo, unfortunately it is not exactly minimal, which makes it very hard to help. Also you are not including your CSS directly in the codepen, which again makes it a lot harder to help. There is a demo for the usage of locomotive-scroll alongside ScrollTrigger on the docs-page for .scrollerProxy(), which you will need to hook up ScrollTrigger to locomotive-scroll in the first place - you will need to stick to the order of succession in your JS as it is shown in that demo for hooking them up. For it to work with a horizontal-scrolling locomotive-scroll driven page you will also need to adjust the values the scrollerProxy gets and sets to the horizontal equivalents of those you can see in the demo on that page, AND you will need to set horizontal to true on your ScrollTriggers. Some other sidenotes to things I noticed within your demo: you shouldn't be trying to use both ScrollSmoother and locomotive-scroll together - that will produce huge conflicts, as they both will try to smoothen the scroll in a similar way (although they might be working a bit different) locomotive-scroll's data-scroll-section attribute will in the vast majority of cases not work alongside ScrollTrigger, due to how it makes the smooth-scroll work, so I'd advise against using it on your page if you want to use ScrollTrigger since you appear to want to use different setups for different screen-widths, you should have a look at gsap.matchMedia() which should help a lot with that. Here is an older example of mine for a scenario as such to possibly help you get started. Although it works, I can and will not guarantee that it is 100% correct with regard to how to set up locomotive-scroll. Also, especially the horizontal version of locomtive-scroll comes with quite some bugs and quirks that you can not really expect support for here, since locomotive-scroll is not a GreenSock product as Rodrigo already mentioned above. Maybe this will help though. https://codepen.io/akapowl/pen/Vwppzqb/87ad10833ca73c5a1ea59190fae48e32

Hi, Here is an example using Locomotive and ScrollTrigger in a horizontal setup: https://codepen.io/GreenSock/pen/JjbrwyV Is worth noticing that Locomotive is not a GSAP product and we can't give you a lot of support for issues regarding it, since we need to keep the forums focused on GSAP related questions. You can look into GSAP ScrollSmoother plugin in order to see an alternative for it. Happy Tweening!