Jump to content
GreenSock

Search the Community

Showing results for tags 'scrollsmoother'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. Hey! I was looking into the scrollSmoother plugin for my client. And I came across a strange behavior in the codePen, which is present in the documentation. When the window is resized, the page scroll position jumps to the top and smoothly scrolls to the current position. Looks like a bug? Or did I not understand something? Here is a video demo Link to the documentation, where this codepen
  2. For those looking to integrate ScrollSmoother with Nuxt, here's a solution that builds off some of the work by @Born05 in this thread. CodeSandbox: https://codesandbox.io/s/gsap-scrollsmoother-nuxt-pbhmeh?file=/layouts/default.vue All you have to do is include the GSAPScrollSmoother and put whatever content you want inside of this. <GSAPScrollSmoother :vars="{ smooth: 2, effects: true }"> <Nuxt /> </GSAPScrollSmoother> You'll be able to access the ScrollSmoother in any page/component using this.$scrollSmoother, and can use any of the methods available, for example. this.$scrollSmoother.paused(true); let velocity = this.$scrollSmoother.getVelocity(); There are also a couple of extra methods available. $scrollSmoother.parseEffects() Call this to get ScrollTrigger to parse and create effects that are declared with data attributes, (data-speed and data-lag). $scrollSmoother.killEffects() Call this to kill all the ScrollSmoother effects. You will typically need to call this when navigating to a new page. $scrollSmoother.refresh() Refresh the ScrollSmoother and all ScrollTriggers. You should call this when navigating to a new page if you don't call .parseEffects() There are really only 2 files you need to be concerned about. The GSAPScrollSmoother.vue component file, and the nuxt.config.js file. The nuxt.config.js has some pageTransition callbacks in there that you may need to adjust to your project. And if you plan on using this in your own project, be sure to change all the gsap-trial imports to gsap, otherwise you won't be able to deploy it. Example usage on a page... export default { mounted() { // if you don't have any effects, use this.$scrollSmoother.refresh() instead this.$scrollSmoother.parseEffects(); this.myAnimation = gsap.timeline({ scrollTrigger: { ... } }) }, beforeDestroy() { // kill any ScrollTriggers you created this.myAnimation.scrollTrigger.kill(); // kill the effects that were created this.$scrollSmoother.killEffects(); } }
  3. Hello, with vertical scroll, we can make parallax or scrolling effect very simply with data-speed="value". How can we do this with horizontal scroll? Is there a method? An example I created to do this; https://codepen.io/sukruemanet/pen/dyKWeOg
  4. Hello, I want to make a stream like on this site. I partially succeeded, but I can't control the parallax. The parallax in the blue background that comes after CHAPTER 01 comes into play long ago and the right part looks bad. Actually, I have to give a container a 100% width and the main container a 300% width right now, I couldn't get it to get the width automatically. Can you help me? My sample site https://transmissions.cristobalbalenciagamuseoa.com/2019-21/moe-matsuoka.html
  5. If a smoother hasn't been initialized, `ScrollSmoother.get()` will return undefined. This should be reflected in the typing of the get function. The return type is currently `ScrollSmoother`, but it should be `ScrollSmoother | undefined`
  6. Hi guys im trying to use scrollsmoother on my website with tailwindcss however whenever i add data speed to an element it causes the element to just be fixed to the final position relative to where its heading according to the scrollsmoother if it were to smooth the divs on scroll . I have no idea why this is happening, i tried forking other scrollsmoother demos without tailwind and had no issues whatsoever. if someone could provide me with an explanation and or solution it would be much appreciated. Ive attached a codesandbox demo below however i have no idea how to attach the gsap scrollsmother dependency but i linked all the necessary code files within the sandbox. Sorry guys im very new to using codesandbox. I also have images below of the issue. https://codesandbox.io/s/zen-lake-pxlpm0
  7. code sandbox link (I was messing with this file and forgot to fork it, so I apologize, the file is now as it should be) In my little basic nextjs demo here (link above), I have set up an idea for a page I have where it would use a fixed position layout as you see here. I have three questions that are hopefully not too long: 1. Is this a good way to set up such a layout with gsap (using stacked, standard flow elements, in this case, the yellow and green lines in the middle of the page (which would be hidden in the actual site) to trigger the scrolling animation) or do you think there is a better way to achieve this? 2. If I scroll any amount of distance and hit refresh, the page doesn't reload from the beginning it just reloads and the scroll bar remains in place. What should I do to make it start back from scratch when I refresh the page? 3. I was trying out smooth-scroller, got it to work and it's very nice of course; however, If I have A setup like this in nextjs with these fixed elements which the smooth-scroller docs say to put outside the smooth content wrapper, I would have the main content in a wrapper (this wrapper would have smooth-scroller) then the fixed elements in their own parent div and then wrap all of that in say a react fragment or div because of course this is react and all components must only render one element. But when I do that smooth-scroller doesn't work anymore, So I'd love to see how smooth-scroller would get applied to this setup. Also, is there a way to make smooth-scroller work in code sandbox?
  8. Hello, I'm working on a rather large one page website with loads of different tweens, scrolltriggers, pins, timelines, etc. The site uses the ScrollSmoother plugin for smooth scrolling but i noticed weird behaviour when using the smooth scroll. I've included a pen to mimic the part that's causing problems When using ScrollTrigger.refresh() the order of the triggers being refreshed is different when using the ScrollSmoother. In the included pen i have 3 sections with 3 different types of animation. the order of the tweens in js is not the same as the order of the sections: 1 - normal tween with scrolltrigger - section #2 2 - timeline tween with scrolltrigger - section #3 3 - Scrolltrigger.create() - section #1 When not using the ScrollSmoother, the refresh order is: 1 - 2 -3 (as it should be) But when i enable SmoothScroller the refresh order is: 3 - 1 - 2. This messes up my triggers because 1 and 2 both have pinspacing. I've tried refreshing the timelines' scrolltrigger as mentioned here, but no success. I did manage to get it to work using refreshPriority:-1, but i don't think that's a fitting solution for me (because of the large amount of tweens/triggers/etc). So i was wondering if this is expected behavior or if i missed something or did something wrong or anything. Just trying to wrap my head around it. Any help would be highly appreciated! Cheers, Oscar
  9. Hi there. I'm trying to use scrollSmoother for smooth scrolling and various effects. However, i've run into a strange issue. In the example linked, I am using mix-blend-mode to create a "knockout" text effect over a video background. Then I'm pinning the section beneath with scrolltrigger. As you can see, the pinned section is choppy and glitchy looking on scroll. Removing mix-blend-mode on the text section seems to immediately solve this. Just that one line. I don't understand how the two are related, but I'd like to achieve the effect I'm going for with mix blend mode and still have smooth pins using scroll trigger. Any ideas here?
  10. Hello, first of all, the problem is; I am making a project with gsap. I want parallax to work on desktop version and I have succeeded. When the menu opens, I wanted to pause the body scroll, which works successfully. But there was a problem. I can't pause sroll in mobile version because the project is not loaded in GSAP (768px) resolution. I want to pause body scroll in both mobile and desktop versions. I am sharing the code and codepen link with you. Can you help me? console.clear(); gsap.registerPlugin(ScrollTrigger, ScrollSmoother); let smoother; const mm = gsap.matchMedia(); mm.add("(min-width: 768px)", () => { smoother = ScrollSmoother.create({ wrapper: "#smooth-wrapper", content: "#smooth-content", smooth: 1, normalizeScroll: true, ignoreMobileResize: true, effects: true, }); return () => smoother.kill(); });
  11. Hi, I'm in the process of building a website where on /work, the user will start scrolling from the bottom of smooth-content(main, in codepen example) I'm using scroolSmoother alongside other GSAP libraries. Guess the code is quite simple—but I'm new to this. I would wanna think that I need to do some kind of "scroll-to-end-of-smooth-content" thing. Not really sure. Looking forward to hearing from you Thanks a lot!
  12. Hi there! So I'm creating a website with some basic text animations (to note, ScrollSmoother is also being used) and I've had some people comment that some pages are a bit laggy. I've assumed that's because most text has the animation in question applied, and their browser is struggling to keep up. So I've tried to implement an alternative that instead of using GSAP to animate these simple values, I'd do it with CSS and the toggleClass parameter for the ScrollTrigger. While I've got this mostly working, I am A. unsure how performant the alternative is going to be, and B. it doesn't work the way I'd particularly like it to. For example, the currently un-commented option in the CodePen uses the stagger parameter to add a slight delay to the children of the trigger. But the key factor is that the parent element is the trigger and all immediate children will animate sequentially. The CSS alternative, doesn't do this as each individual child is the trigger, in order to create the staggered effect. This however means that there are some points where the first element will animate in (e.g. the title, in my example) and there will be a blank space below (where the paragraph is, but hasn't animated in). Example below. This As opposed to I hope this makes sense. If anyone has any ideas or solutions as to what I could do to maintain the initial animation (GSAP) but without incurring any lag on different machines/devices that would be much appreciated! Thanks, Ben Elwood
  13. Hi, Hoping that a genius in these forums can help me out. I've got a project which is using horizontal scrolling, scrollTrigger and smoothScroller. You can view it here: https://orconeau.com/cecilstreet/spaces/location/ The issue I'm having is that when the user scrolls towards the end of the horizontal scrolling section, it's adding a huge gap and not stopping on the last section with it centered. I've spent hours trying to tweak the math but I just can't get it to work properly and I'm pulling my hair out. Happy to set up a codepen but I wanted to see if anyone could have a look at the STAGING link and the code that I'm using and maybe make a suggestion. The CSS is: [data-component="horizontal-scroller"] { height: 100vh; width: 100%; display: flex; align-items: center; justify-content: flex-start; box-sizing: border-box; .cards { display: flex; justify-content: flex-start; align-items: center; width: 100%; height: 100%; flex-shrink: 0; gap: 10vw; .card { width: auto; height: 100%; display: flex; align-items: center; flex-shrink: 0; justify-content: center; background-color: blue; backface-visibility: hidden; overflow: visible; padding-top: 101px; padding-bottom: 120px; box-sizing: border-box; .inner { height: 100%; position: relative; will-change: transform; transform-style: preserve-3d; } picture { img { @include app-breakpoint-3 { width: auto; height: 100%; } } } &:nth-of-type(odd) { background-color: purple; } } } } The javascript is: const horizontalScroller = document.querySelector('[data-component="horizontal-scroller"]'); const horizontalCards = horizontalScroller.querySelector('.cards') const horizontalCard = horizontalCards.querySelectorAll('.card') gsap.set(horizontalCards, { marginLeft: '50vw' }) gsap.set(horizontalCard, { perspective: 750 }) const smoother = ScrollSmoother.create({ smooth: 1.5, effects: true, smoothTouch: false }) const horizontalTween = gsap.to(horizontalCards, { x: () => { return -((horizontalCards.scrollWidth - window.innerWidth * 0.5) + (window.innerWidth / 2 - horizontalCard[horizontalCard.length - 1].offsetWidth / 2)) }, ease: "none", scrollTrigger: { trigger: horizontalScroller, start: () => "top top", end: () => `+=${((horizontalCards.scrollWidth - window.innerWidth * 0.5) + (window.innerWidth / 2 - horizontalCard[horizontalCard.length - 1].offsetWidth / 2))}`, scrub: true, pin: true, markers: false, invalidateOnRefresh: true, anticipatePin: 1 } }); horizontalCard.forEach((card, i) => { const content = card.querySelector('.inner') gsap.set(content, { rotateY: -100, rotateX: 25, yPercent: -10, scale: 2.5, xPercent: 100 }) const tween = gsap.to(content, { rotateY: 0, rotateX: 0, yPercent: 0, xPercent: 0, scale: 1, force3D: true }) ScrollTrigger.create({ trigger: card, containerAnimation: horizontalTween, start: "left 75%", end: "50% 50%", scrub: 1, markers: true, animation: tween }); }); I've got the horizontalTween working and then I have an animation for each .card element inside the scrolling .cards section. The animation in there is doing some funky transforms and the issue is that the scrollWidth is including the transforms when it's determining the width of each card. I think. When I turn it off, the scrolling overflow is better but I lose the effect. Any help would be greatly appreciated. Thanks
  14. Hi, I've got ScrollTrigger on a project and have implemented the pairing of horizontal and vertical scrolling. You can view the example code pen in this post. What I'm trying to do now is do some cool effects on each section as it scrolls into and out of view. I love this example: https://digilab.kunsthaus.ch/en/exhibition/ausstellung-zur-eroeffnung-des-kunsthauses-am-heimplatz?group=switzerland Hoping that someone very talented in these always helpful forums could point me in the right direction. Thanks
  15. Hi, I'm having issues trying to get horizontal scrolling and vertical scrolling working correctly using ScrollTrigger. I used a starting point from this great CodePen example: https://codepen.io/nicvh/pen/gOeZKOJ What I have done is actually have the horizontal scrolling panels be various widths as that is what is going to happen on the final project and have made the horizontal scrolling sections appear first before the vertical scrolling sections. As you can see from my CodePen example, there seems to be a huge gap at the end of the horizontal scrolling sections. If I make the individual scrolling panels 100% width then it works but for some reason, the x: () function is returning the incorrect value. I've been racking my brain on this for hours and am hoping that one of the geniuses in these forums can help me out. Thanks
  16. Hello! Thank you very much for such an amazing library! I've been using locomotive scroll for some time to achieve smooth scroll, but I had occasional performance issues when I would use power save mode on my laptop. So I decided to become a club member and use scrollsmoother. After removing locomotive related code and updating JavaScript , website started to work perfectly on desktops, even on power save mode! But unfortunately on my phone and tablet performance dropped drastically and way worse than used to be. Address bar would show/hide sometimes despite setting normalize scroll to "true". After setting normalize scroll to "false", performance gets slightly better, but still very jumpy... I would provide codepen demo but I am not sure what causing this behavior on phone and tablet and which part to isolate and put in codepen. I really don't want to go back to using locomotive scroll, but it had better performance on mobile which doesn't make any sense. I am sure I am doing something wrong, but can't figure out what... I would appreciate any help and advice! this is demo https://gsap-test-smoothscroll.netlify.app/ this is javascript snippet I use // create the scrollSmoother before your scrollTriggers let scroller = ScrollSmoother.create({ wrapper: "#smooth-wrapper", content: "#smooth-content", normalizeScroll: true, ignoreMobileResize: true, smooth: 2.5, // how long (in seconds) it takes to "catch up" to the native scroll position effects: true, // looks for data-speed and data-lag attributes on elements smoothTouch: 0.3, // much shorter smoothing time on touch devices (default is NO smoothing on touch devices) });
  17. Hello, I am running modal box and menu in codepen. However, the scroll moves during this process, how can it be made active and passive? Can you do it on Codepen example, I tried a few times but I couldn't. Thank you in advance.
  18. Hi all, I'm experiencing an issue with Locomotive Scroll + GSAP ScrollTrigger. As soon as I add a "data-scroll-speed" to an element which is different from 0 it seems like the trigger is completely off and I don't know what I'm doing wrong. I would like to start the animation on all the elements as soon as they enter the viewport, this works as long as I don't change the "data-scroll-speed". I've added a minimal demo and the very last element has a "data-scroll-speed" set to 3. As you can see the opacity changes from 0 to 1 but not when the element enters the viewport. I'm quite new to GSAP, Locomotive Scroll and JS in general and I'm hoping someone in the forums can get me back on track. I've tried for countless hours to wrap my head around this, so this is my first post in the forums and my very first Codepen ever :-). Thank you in advance!
  19. GreenSock

    GSAP 3.10 Released

    Highlights: ScrollSmoother plugin for delicious, buttery-smooth scrolling that leverages native scroll. 💚 Observer plugin that greatly simplifies setup for reacting to various events across devices. gsap.quickTo() for frequent redirection to new values like mouse followers ScrollTrigger.normalizeScroll() solves a bunch of scroll-related annoyances across devices and browsers. "*=" and "/=" relative prefixes - multiply or divide the current value. Introducing ScrollSmoother.🥳 A shiny new plugin, exclusively for Club GreenSock members! ScrollSmoother makes it simple to add a buttery smooth vertical scrolling effect to your ScrollTrigger pages. Under the hood, ScrollSmoother leverages native scrolling which allows it to sidestep many of the accessibility annoyances that plague smooth-scrolling sites. No fake scrollbars, and no messing with pointer or touch functionality. See the Pen ScrollSmoother by GreenSock (@GreenSock) on CodePen. ScrollSmoother.create({ content: "#smooth-content", wrapper: "#smooth-wrapper", smooth: 1, // how long (in seconds) it takes to "catch up" to the native scroll position effects: true, // looks for data-speed and data-lag attributes on elements normalizeScroll: true, // prevents address bar from showing/hiding on most devices, solves various other browser inconsistencies ignoreMobileResize: true // skips ScrollTrigger.refresh() on mobile resizes from address bar showing/hiding }); Effects... ScrollSmoother will integrate seamlessly with all your scroll-triggered animations. but we've also added some bonus ScrollSmoother effects. ✨ speed - Great for parallax effects! It adjusts the speed at which an element moves vertically while scrolling through the viewport. A speed of 1 is normal speed, 2 is double speed, etc. lag - Add some lag* to gently flow elements behind the scroll before they ease back to their natural scroll position. * no seriously, trust us. It's the good kind of lag. <div data-speed="0.5"></div> <!-- half-speed of scroll --> <div data-speed="2"></div> <!-- double-speed of scroll --> <div data-speed="1"></div> <!-- normal speed of scroll --> <div data-lag="0.5"></div> <!-- takes 0.5 seconds to "catch up" --> <div data-lag="0.8"></div> <!-- takes 0.8 seconds to "catch up" --> Read the docs for all the juicy details, or pull up a seat and watch this short explainer video. Observer The brand new 3.5kb Observer plugin offers a super-flexible, unified way to sense meaningful events across all (touch/mouse/pointer) devices without wrestling with all the implementation details. Perhaps you want to respond to "scroll-like" user behavior which could be a mouse wheel spin, finger swipe on a touch device, a scrollbar drag, or a pointer press & drag...and of course you need directional data and velocity. No problem! Tell Observer which event types to watch (wheel, touch, pointer, and/or scroll) and it will collect delta values over the course of each requestAnimationFrame tick (debounced for performance by default) and automatically determine the biggest delta and then trigger the appropriate callback(s) like onUp, onDown, onDrag, etc. Look how easy it is to trigger next()/previous() functions based on when the user swipes up/down or uses their mouse wheel: Observer.create({ target: window, // can be any element (selector text is fine) type: "wheel,touch", // comma-delimited list of what to listen for ("wheel,touch,scroll,pointer") onUp: () => previous(), onDown: () => next(), }); Demo Notice there's no actual scrolling in the demo below but you can use your mouse wheel (or swipe on touch devices) to initiate movement so it "feels" like a scroll: Since ScrollTrigger leverages Observer internally for normalizeScroll(), we exposed it via ScrollTrigger.observe() so you don't have to load an extra file if you're already using ScrollTrigger. Excited? Why don't you observe this video or check out the docs (see what we did there?). gsap.quickTo() If you find yourself calling gsap.to() many times on the same numeric property of the same target, like in a "mousemove" event, you can boost performance by creating a quickTo() function instead. Think of a quickTo() like an optimized function tied to one particular numeric property, where it directly pipes a new number to it. Example let xTo = gsap.quickTo("#id", "x", {duration: 0.4, ease: "power3"}), yTo = gsap.quickTo("#id", "y", {duration: 0.4, ease: "power3"}); document.querySelector("#container").addEventListener("mousemove", e => { xTo(e.pageX); yTo(e.pageY); }); Mouse Follower Demo See the Pen gsap.quickTo() mouse follower by GreenSock ( @GreenSock) on CodePen. ScrollTrigger.normalizeScroll() and ignoreMobileResize Have you ever run into these problems?: Address bar on mobile browsers shows/hides and resizes the viewport, causing jumps When scrolling fast, a pinned element seems to shoot past for a brief moment and then jump to the correct pinned position (multi-thread synchronization issues) iOS jitter Overscroll behavior that seems impossible to prevent on iOS Inconsistent momentum scrolling across devices The powerful new normalizeScroll() functionality intercepts native browser scroll behavior and handles it on the JavaScript thread instead which solves the problems mentioned above on most devices (iOS Phones in portrait orientation still show/hide the address bar). To enable it, simply: ScrollTrigger.normalizeScroll(true); To prevent ScrollTrigger.refresh() from running (and recalculating start/end positions) when a mobile browser shows/hides its address bar, you can now do: ScrollTrigger.config({ ignoreMobileResize: true }); So easy! Read more in the docs. New "*=" and "/=" relative prefixes You've always been able to add or subtract from the current value, like: gsap.to(".box", { x: "+=100", // 100 more than the current value y: "-=100", // 100 less than the current value }); ...and now you can multiply or divide accordingly: gsap.to(".box", { x: "*=2", // double the current value y: "/=2", // halve the current value }); And more... GSAP 3.10 also delivers various bug fixes, so we'd highly recommend installing the latest version today. There are many ways to get GSAP - see the Installation page for all the options (download, NPM, zip, Github, etc.). Resources Full release notes on Github Full documentation Getting started with GSAP Learning resources Community forums Happy tweening!
  20. Hi I want have many sections with 100 percent height and one of sections have many sections itself, Can i have multiple scrolltriggers with scrollsmoth???
  21. Hi! So I'm trying to get the .stagger-text class (which moves each word in a sentence upwards on-load) to happen when each isolated item with the class .stagger-text is visible on the screen, I've tried using a forEach loop to apply the ScrollTrigger but that seems to entirely break it (so I clearly did it wrong!) I'm also trying to delay the speed at which the items scroll, which is clearly simple enough... if I were creating a vertically scrolling site. As you can see they scroll down vertically as opposed to horizontally. I feel like these issues are somewhat linked because the site is 'artificially' horizontally scrolling they are all inline and being triggered at the top of the page, which is technically the whole thing, if that makes sense? Hope someone can help! Thanks in advance, Ben Elwood
  22. I want to create a stagger effect using ScrollSmoother. I wrap individual letters of a word inside a span and then apply lag to each of them. This works well. But when I introduce an h1 tag as a wrapper for these spans, this no longer works. Any suggestions?
  23. Hi there! So I've setup a purely horizontal scroll site with ScrollTrigger, however now I've added in ScrollSmoother there is no ability to scroll! I did have an issue where it was scrolling diagonally, however I realised I had the wrapper and content selectors the wrong way around. Has anybody else had this issue? The attached codepen is a representation of the site, on the dev site I'm using it with Wordpress & the Divi theme, so if you're wondering why the odd selectors, that's why! Thanks in advance, Ben Elwood
  24. In my codepen I have a script tag that runs a scroll trigger pin. I've tested the pin and know it works. But when it's added via the script tag (in the HTML) the start and end marker move on scroll smoother scroll. Is this multi script approach possible? Or should I just keep all scroll trigger/scroll smoother JS in one file? Here's the scroll trigger script for reference: import gsap from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' gsap.registerPlugin(ScrollTrigger) function imagesMove() { let galleryImages = gsap.utils.toArray('.gallery picture') let wrapper = document.querySelector('.gallery .wrapper') let startWidth = wrapper.getBoundingClientRect().width - window.innerWidth gsap.to(galleryImages, { x: () => -startWidth, ease: "none", scrollTrigger: { trigger: ".gallery", pin: ".gallery", scrub: 0.5, anticipatePin: 1, start: "top: +=15%", end: "+=" + (window.innerHeight * galleryImages.length - 1), markers: true, } }); ScrollTrigger.refresh() } imagesMove()
  25. Hi, I have recently downloaded a ZIP file containing bonus plugins, and installed it according to your installation guide. I put gsap-bonus.tgz file into the main folder and ran npm install --save-dev ./gsap-bonus.tgz. I import gsap and necessary plugins and register them in my Scroll.ts file, which is responsible for scrolling effects. When I compile the code, I get the error: I logged the gsap object in Observer.js and it turned out to be undefined. What am I doing wrong?
×