Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

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

Found 20 results

  1. 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!
  2. 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!
  3. 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???
  4. 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
  5. 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?
  6. 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
  7. 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()
  8. 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?
  9. Hello, I'm currently working on a personnal project using your new super plugin Scroll Smoother, and I have a little problem. I made a simple codepen reproducing the situation I am facing in the real project. What I want: Keep the lag effects active on the letters while the container is pinned What is actually happening: The lag effects are disabled once the container start to be pinned - I know it's for optimization purposes, since the element should be out of the viewport if it wasn't pinned (see the "gost" element on the demo, lag effects stop once the ghost element get out of the viewport). But I want to keep thoses effects enabled. Is there a way to do that ? Thanks for your help !
  10. Hi, I have a problem with my code (see codepen), if i disable the scrollsmoother it works like i want, but when enabled i get in trouble with my .section-2 because it uses a margin-top: 100vh; which causes the the scrollable content to be short 100vh so am missing the last section. What am i missing here?
  11. Hi, I will keep this short. This is a simple feature, but I think it would be essential to prevent conflict with each user's code. data-speed & data-lag might already be used in the DOM for other things than scrollsmoother; which might break some integrations. What I'm suggesting is a new option for effects, EX: let smoother = ScrollSmoother.create({ wrapper: '#wrapper', content: '#content', smooth: 2, effects: true, prefix: 'my-prefix' // -> [data-my-prefix-(speed/lag)] }) Passing a string to a prefix option would allow for more specific attributes to be used to trigger effects (without the need to play around with string or array scopes). The above would output these: data-my-prefix-speed data-my-prefix-lag
  12. Hi! I'm trying to use Scrollsmoother but I have a problem with lazyload images. The scroll doesn't refresh or update when images are loaded. Maybe it could nice a method for refresh or update scrollsmoother. Anyone has a solution for this? Thanks!
  13. Hello GSAP devs, We need urgent help from a senior GSAP developer with expertise in ScrollTrigger and pinning stuff. An agency was handling our website conversion from Figma and scrolling is not smooth at all, especially on mobile. There are various bugs and issues with the GSAP animation. The site is using WordPress. For scrolling we use ScrollSmoother. I’ll be sending you the animation concept video and the WP login. If you’ll need anything else feel free to ask. We have a custom theme with js files inside the theme folder (using git but at this point not using it will save us more time.) Urgent task: Making the scrolling smoother on desktop / tablet. There are also various bugs that we will explain along the way. BUDGET: We’ll pay professional rates. PayPal, Upwork etc. The most important thing is to work with the current site and make the animations smoother and fix bugs. You may prefer to estimate a fixed price for some tasks / we can go with hourly - whatever you like. After making the site ready for launch, we’ll rebuild it using Elementor and since the HTML structure will change, the animations will need some work for you if interested.. The site is on wpengine, I’ll provide the wp login along with theme files. Please send me a message if interested and can start ASAP, I’ll send you the animation concept video and the site URL and explanation on where to start. Best, Zeberet
  14. I have a weird problem when try to use ScrollSmother; My project is react and typescript, it can't find ScrollSmoother in node/modules but this bug is not happen when i use ScrollTrigger. Sorry my bad english :(
  15. Just bumping this here in case it's useful for anyone else. Navigate to this url to see it working. https://cdpn.io/pen/debug/XWVvMGr#section3
  16. Hello Valerio here, nice work with gsap its amazing and i'm discovering it. I've been using scrollTrigger to animate a 360 photo in a canvas with position fixed. Then i discovered scrollSmoother, purchased the club, but if i enable it scrollTrigger stop to work.... i tried to solve it but i cannot find a solution, can you help me to understand the problem? i let commented at the end of the js the smoother to see the error. // let smoother = ScrollSmoother.create() thanks in advance, Valerio.
  17. 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(); } }
  18. Hello, Thank you for the nice plugin. Basically I want to refresh Scrollsmoother to recalculate page height after a ajax call or any other action by JS. I am not able to find refresh method here in docs. Is that I need to kill and create every time?
  19. Hi there! I am really excited about the latest gsap updates and all the great functionality it comes with! So first of all: Thanks for the fantastic work on this! I tried to give the ScrollSmoother plugin a go in a project I am working on right now. The project has scrolltrigger snapping to snap to sections. When I now activate ScrollSmoother additionally, the snapping does not work correctly anymore. If I stop my scrolling between sections it starts jerking back and forth, and just occasionally snaps to the section eventually. I wonder, do I need to set this up differently, or is this something where ScrollTrigger and ScrollSmoother do not work together (yet)? For an example, see the included CodePen. Thanks a lot! Edit: I notice, the effect does not seem to be quite so bad on the little embedded CodePen iFrame. Maybe it gets worse the further the snap position is from its target position? To better observe the effect, maximize the window size on the CodePen sketch. Sometimes it keeps jerking back and forth endlessly.
  20. Hello, I'd like to use GSAP ScrollSmoother on top of ScrollTrigger (with some SlitText) but I have animation issue. I'm trying to use GSAP as a reusable component with React like the documentation here (section #reusable-animations) But it's not working well, the 1st animation is running smoothly but the other one are juste popping in the screen. As soon as I remove the ScrollSmoother.create(); the animations are good again. So definively something on ScrollSmoother side. Do you know what cause the issue? Thanks Alex
×