andsavu

@GreenSock just noticed this, now that I removed the border-radius. is there an easy way to get rid of this half a pixel gap between elements? I see it in both Chrome & Safari. It seems that a negative margin left & right -1px and then a width +=2px does the trick between elements, leaving only a gap between first and last item. I would say that is good enough for me, but please let me know if theres a better way to handle this.

@Juan Llopis maybe I'm missunderstanding, but at least with my request, because there's no active item/snapping, why don't you just use different widths directly on the card element? https://codepen.io/andrei-savu/pen/BaPqzvX maybe also try to use vw units to get a perfect viewport mix. // you can then have images either as <img tag with position absolute, width 100%, height 100% and object-fit:cover, or you can use them as background-image

..hah, that is exactly what I was looking for, lol. Thanks a lot @GreenSock, I appreciate you taking the time to build this

@GreenSock while that's definitely really cool and well documented, I'm having a hard time understanding how can I tie that to Scroll, noticing that it's based on increasing/decreasing currentIndex. I'm more interested in achieving an infinite loop scroll than having an actual slider. I guess you can call it Freemode (no snapping, no active/current index). Maybe using a clone of the list to get there might be a better idea? I'm reconsidering because this seems to be more tricky than I thought, lol. This is what I'm trying to recreate as an idea: https://saintlouvent.com/brandings Any extra guidance would be much appreciated. I'll start digging more into these examples & the documentation. Thanks!

Hey there! I'm looking to create an infinite/looping horizontal scroll page, and I came across this GSAP Pen: https://codepen.io/GreenSock/pen/RwKwLWK it is a bit too much..and I would like to simplify it (no dragging, no transform/animation, no snapping), just a simple looping scroll (list of item separated by some gap, that keep repeating on scroll ). I attached a codepen in which I started removing part of the code, but I don't understand it enough to make it work. I found a similar example https://codepen.io/GreenSock/pen/qBYbqNj but in this one there's a jump when going from start/end if you go slow enough. I'd appreciate some help here

@noviedo, @akapowl Cheers guys! Thanks a lot for the help, exactly what I was looking for :).

@ZachSaucier hey man! thanks for joining in. well, it's not much, I have a basic horizontall smooth scrollbar setup with 3 images, and I'm trying to add skew to them. here's a quick codepen I made up using the other example: https://codepen.io/andreitmm/pen/yLJwqby gsap.set(".item", {transformOrigin: "right center", force3D: true}); I set this to .item and in inspect element I get this: <div class="item" style="transform-origin: 100% 50%; transform: translate3d(0px, 0px, 0px);">Eaque ullam illum nobis deleniti mollitia unde, sed, nemo ipsa ratione ex, dicta aliquam voluptates! Odio vitae eum nobis dignissimos sunt ipsum repellendus totam optio distinctio. Laborum suscipit quia aperiam.</div> so I guess .item is targeted, but it's not moving at all? It's the same setup I have, with Smooth Scrollbar & a Horizontal Scroll Plugin.

Hey guys, so I'm trying to combine 2 CodePens: https://cdpn.io/GreenSock/pen/eYpGLYL https://cdpn.io/idiotWu/pen/KJNYye basically, ScrollTrigger with a smooth scrollbar plugin, that actually works horizontally, lol. I've got ScrollTrigger working with the regular/vertical scroll, but this one page in my project is actually horizontal. Can anyone help me here? not sure what do I need to change to make it work? I'm adding code that I think it's relevant for this issue (I've got a Gatsby JS setup): class HorizontalScrollPlugin extends Scrollbar.ScrollbarPlugin { static pluginName = 'horizontalScroll'; transformDelta(delta, fromEvent) { if (!/wheel/.test(fromEvent.type)) { return delta; } const { x, y } = delta; return { y: 0, x: Math.abs(x) > Math.abs(y) ? x : y, }; } } Scrollbar.use(HorizontalScrollPlugin, OverscrollPlugin /* you forgot this */); let bodyScrollBar = Scrollbar.init(document.querySelector('#my-scrollbar'), { overscrollEffect: 'bounce', alwaysShowTracks: true }); so this is how I made the horizontal scroll work and this is what I previously used for regular scroll: let scrollPositionX = 0, scrollPositionY = 0 bodyScrollBar.addListener(({ offset }) => { scrollPositionX = offset.x; scrollPositionY = offset.y; }); bodyScrollBar.setPosition(0, 0); gsap.registerPlugin(ScrollTrigger); ScrollTrigger.scrollerProxy("body", { scrollTop(value) { if (arguments.length) { bodyScrollBar.scrollTop = value; } return bodyScrollBar.scrollTop; } }); bodyScrollBar.addListener(ScrollTrigger.update); } and then I just added that skew effect from the codepen. It's there, I see it in inspect element, but I guess it's not moving because its not recognizing any Y scroll/scrollTop?

@mimoid-prog It's been a while since I worked on this but: import React, { useEffect } from "react"; import Header from "../components/header"; import Scrollbar from 'smooth-scrollbar'; import {TweenMax, TimelineLite, Power3} from 'gsap'; import gsap from 'gsap'; import ReactDOM from 'react-dom'; import { Component } from 'react'; import { ScrollTrigger } from "gsap/ScrollTrigger" export default function About() { useEffect(() => { const isSSR = typeof window === "undefined" if(!isSSR) { let scrollPositionX = 0, scrollPositionY = 0, bodyScrollBar = Scrollbar.init(document.querySelector('#my-scrollbar')); bodyScrollBar.addListener(({ offset }) => { scrollPositionX = offset.x; scrollPositionY = offset.y; }); bodyScrollBar.setPosition(0, 0); bodyScrollBar.track.xAxis.element.remove(); gsap.registerPlugin(ScrollTrigger); ScrollTrigger.scrollerProxy("body", { scrollTop(value) { if (arguments.length) { bodyScrollBar.scrollTop = value; } return bodyScrollBar.scrollTop; } }); bodyScrollBar.addListener(ScrollTrigger.update); } }, []); useEffect(() => { gsap.to('body', 0, {css: {visibility: 'visible'}}); const tl = gsap.timeline(); tl.from('.line span',1.6, { y: 400,ease: Power3.easeOut,delay: .2,skewY: 7,stagger: { amount: 0.3 },}) .from('.line_small span',1.2, { y: 100,ease: Power3.easeOut, delay: .2,skewY: 7,stagger: { amount: 0.3 }}, .1) ; gsap.registerPlugin(ScrollTrigger); gsap.to('.image_float', { scrollTrigger: { trigger: '.h_trigger', start: '-100px top', end:'bottom top', scrub: .1, id: 'image-float' }, y: -50, ease: 'none', duration: 2 }); gsap.to('.line', { scrollTrigger: { trigger: '.h_trigger', start: '-100px top', end:'center top', scrub: .1, id: 'lines' }, y: -50, ease: 'none', duration: 2 }); }, []) return ( sorry, I've got some other things there but I guess this is it: useEffect(() => { const isSSR = typeof window === "undefined" if(!isSSR) { let scrollPositionX = 0, scrollPositionY = 0, bodyScrollBar = Scrollbar.init(document.querySelector('#my-scrollbar')); bodyScrollBar.addListener(({ offset }) => { scrollPositionX = offset.x; scrollPositionY = offset.y; }); bodyScrollBar.setPosition(0, 0); bodyScrollBar.track.xAxis.element.remove(); gsap.registerPlugin(ScrollTrigger); ScrollTrigger.scrollerProxy("body", { scrollTop(value) { if (arguments.length) { bodyScrollBar.scrollTop = value; } return bodyScrollBar.scrollTop; } }); bodyScrollBar.addListener(ScrollTrigger.update); } }, []); and don't forget this: gsap.registerPlugin(ScrollTrigger);

Yeah, that was exactly it. It's working well now, thanks a lot guys!

Just updated to 3.4.2, is this the latest? I got this now.

Hmm I tried that but I'm getting: anything I'm missing here? Thanks for taking the time!

Hey guys, so I started playing with GSAP & Scroll Trigger and I really liked it and the animations are super smooth, but I've been also using this plugin Smooth Scrollbar ( https://idiotwu.github.io/smooth-scrollbar/ ) for a while and I wanted to add it to this new project as well, but it doesn't work. I was hoping maybe you guys can help a bit here? I don't have a codepen sadly but I've got some bits of code: I've got my page wrapped in these 2 divs, .scrollable is used to initialize Smooth Scroller <div className="scrollable" data-scrollbar> <div className="wrap-overflow"> .scrollable { width:100vw; height:100vh; overflow: auto; } .wrap-overflow { position: relative; overflow: hidden; height:100%; } gsap.registerPlugin(ScrollTrigger); gsap.to('.image_float', { scrollTrigger: { trigger: '.h_trigger', start: '-100px top', scroller: '.wrap-overflow', end:'bottom top', scrub: 1, markers: true, id: 'image-float' }, y: -200, ease: 'none', duration: 10 }); useEffect(() => { const isSSR = typeof window === "undefined" if(!isSSR) { Scrollbar.initAll(); } }, []); while .wrap-overflow is the scroller I tried using. I don't think it can work without a custom scroller, because: .scrollable has only 100vh height (750px on my screen) and .scroll-content has the actual height of the page (around 3300px) - this is how Smooth Scroller works/needs to work. My guess here is that somehow GSAP is listening to the browsers default scrollbar, that isn't scrolling at all, because it is 'overlapped' by the Smooth Scroller scrollbar? Hope I'm not crazy, it's pretty late where I live, lol. Anyways, hopefully I explained this well enough, not sure if this is/should be your expertise anyhow (using third-party plugins with Scroll Trigger). I can take the answer that these two can't simply work together, but I'd really appreciate any ideas that can make it happen tho. Oh, btw, this is what I got (the Smooth Scroller works but the animation isn't ?

So I'm trying to recreate 2 effects that I saw on this awesome website: https://jesperlandberg.dev/ https://jesperlandberg.dev/about 1. is the 'page transition' effect when you press on profile, theres that white overlay that slides top with a warp/distortion 2. while on Profile, when you hover on a link you get that 3d text underline effect. How are these made and how are these so smooth? Anyone can offer some guidance, examples with similar effects? Thanks in advance! Really appreciate it! p.s.: I made this codepen with some basic css, its obviously not that smooth/jiggly but yeah..