joris-rotteveel

Thanks Jack, I'll look into `modifiers` a bit more as they seem crucial for more elaborate use cases!

Hi team, I made an infinite scroll with scrolltrigger and pretty stoked with the result. Could someone perhaps shed a thought on how I could add scroll to certain ypos positions and adhering the loop. For example, if I have scrolled up to 0.9 percent, and I want to scroll (via code) to , say 0.2 percent. Ideally I don't want to animate the scroll backwards ( so from 0.9, 0.89,0.7,0.6....0.2) but keep going forward,( so 0.9.,0.95,0.99,LOOP,0.1....0.2) Is this even feasible?

Jack, this is amazing!

Thanks, I have been struggling to understand the wrapping myself!

@OSUblake, I was wondering if you had any thoughts to share on either this thread or here: Not looking for a fully fleshed out solution, but a few pointers as how to achieve this.

Not a question but observation. I have my bonus files as .tgz file in my repo and I reference this in my package.json : "gsap": "./utils/gsap-bonus.tgz", this should be the latest download (as of today v3.9). "npm install" results in (package-lock.json): "node_modules/gsap": { "version": "3.9.0", "resolved": "file:utils/gsap-bonus.tgz", "integrity": "sha512-8cZp2/l9gBdFzI7Dpojh8tVPRDFivowSX8N3jl42zecPv8SXdysx4GrJcwVJz4Bl/pamFZdi17s85m4Bq5/pcQ==", "license": "This package should only be used by individuals/companies with an active Club GreenSock membership. See https://greensock.com/club/. Licensing: https://greensock.com/licensing/" }, now, when I remove the node modules and package-lock files and use yarn: gsap@./utils/gsap-bonus.tgz: version "3.8.0" resolved "./utils/gsap-bonus.tgz#96ea3244b12c370e8ea3facb2ff28840a90a40a4" As you can see.....wrong integrity and wrong version number! Not sure why this is happening, but that is causing some issues until I change the hash and version manually in the yarn.lock file.

I'll follow that thread because that is pretty much the same use-case! Excited about the new release!

@OSUblake, I have been digging a bit deeper in your helper function as I wanted the "snap" function to snap to the center of the screen. During my "debugging/understandng" of your provided solution, I got a little confused why, if the snap function returns a static number, say 40, it keeps snapping 40 pixels from the last drag position? I was expecting this to always snap to 40px. Are there any tips you could share to make the slide snap to the center (or any other arbitrary number)? I've created a fork that shows you the 40px snap being accumulated. https://codepen.io/joris-rotteveel/pen/jOYEjxz

After looking at Blake's solution, I used his approach off creating a Draggable on a "proxy" and called a custom update function on the appropriate callbacks (onDrag/onThrowUpdate). The InertiaPlugin.track gave me the current speed of the Draggable and I could use that as the input for my custom function. Thanks Blake!

Thanks Blake, I haven't seen that helper function, looks great! Will dive into it, thanks again for your help!

Hi everyone, I have made a looping tween that can be updated via scrollwheel. Ideally I'd like to integrate a Draggable too, so on a tablet users can drag it around (scroll isn't an option). What I did (see codepen) is abstract the update into a function so hopefully I can reuse it with a Draggable integration. Unfortunately, I could use a few hints/tips on how to get a draggable integrated. (the images need to be clickable, so a Proxy is prob not going to work?) because I can't really think of any. Your help is much appreciated!

Thanks for that video, super helpful and that creates a simpler solution than the onUpdate approach!

I have created another pen that does what I want. Unfortunately there are a few glitches on the codepen, prob some CSS reset issue, they are not happening on my local. Feedback is still welcome! https://codepen.io/joris-rotteveel/pen/XWaKyQN

Hi everyone, I am trying to do something very basic, but I can't get my head around it. I have a `content` div and a `footer` div. Once the `content` div's bottom reaches the center of the screen, I'd like to pin it and have the footer scroll over the top of the content. My pen shows weird spacing between the footer and the content, and ideally it should stop scrolling when the bottom of the footer hits the bottom of the viewport. With my attempt, the footer keeps scrolling causing a white gap at the bottom. I've had a look at https://codepen.io/GreenSock/pen/KKpLdWW but that only works with 100vh sections. Any help is appreciated! Thanks

@GreenSock So the order of creation would be important here. This is definitely a great new way of dealing with it! Will look into the docs and dig a bit deeper. Thanks a million for your help. This is why I have absolutely no issues with paying for a subscription to GSAP, great product and awesome forum!

@GreenSock I am trying to the same thing, but without any content between the sticky and the curtain. I've adjusted your example here, https://codepen.io/joris-rotteveel/pen/YzxXZgx. Unfortunately, the black box scrolls down when scrolling before pinning. Is this possible you think?

Nope, that's not an issue. You can register plugins as many times as you want. No drawbacks in doing it multiple times.

Thanks Jack, yes, that seems to do the trick on the prod build! Much appreciated

Hey jack, thanks for your response! The issue is that ScrollTrigger is causing those errors in a production build. In any browser!

Hi guys, I am using webpack as the tool to compile my JS. ScrollTrigger works amazing in the local dev setup, no errors. Unfortunately, when I run the `yarn build` command, the production code logs a warning Invalid property scrollTrigger set to {trigger: ".pSection", scrub: true} Missing plugin? gsap.registerPlugin() The issue is that it IS registered, and it's working fine in dev mode. This is the exact example as on your codepen https://codepen.io/GreenSock/pen/JjYPQpN import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger.js"; gsap.registerPlugin(ScrollTrigger); gsap.to(".pContent", { yPercent: -100, ease: "none", scrollTrigger: { trigger: ".pSection", // start: "top bottom", // the default values // end: "bottom top", scrub: true, }, }); gsap.to(".pImage", { yPercent: 50, ease: "none", scrollTrigger: { trigger: ".pSection", // start: "top bottom", // the default values // end: "bottom top", scrub: true, }, }); Steps to reproduce: I have used custom and the official facebook starterkit and they both have the same issue. npx create-react-app scrolltrigger open INDEX.JS remove all code (we don't want any react there anyway) paste following code: import "./index.css"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger.js"; gsap.registerPlugin(ScrollTrigger); gsap.to(".pContent", { yPercent: -100, ease: "none", scrollTrigger: { trigger: ".pSection", // start: "top bottom", // the default values // end: "bottom top", scrub: true, }, }); gsap.to(".pImage", { yPercent: 50, ease: "none", scrollTrigger: { trigger: ".pSection", // start: "top bottom", // the default values // end: "bottom top", scrub: true, }, }); run yarn (or npm) start , everything works fine, no errors run yarn build , (run the code that's in the build folder. e.g. python -m SimpleHTTPServer 8812 Now you'll see errors I am not sure how this is happening, happy to help if you have any clues.... Attached the zip with all the filesscrolltrigger.zip Cheers, Joris P.S I have tried setting the name as per , but that's not allowed and won't compile.

Thanks for spotting that error, updated the pen. I will abandon the Proxy approach, it is clearly not the right approach when dealing with regular DOM elements ?‍♂️. It will come in handy when dealing canvas/webgl and Draggable. Thanks for the reply!

Hi guys, looking at the docs (https://greensock.com/docs/v3/Plugins/Draggable), setting either dragClickables:true or adding the data attribute on the HTML element you want to be clickable data-clickable="true" would make the browsers default behaviour take precedence. However, using the proxy approach, the draggable is only an empty div. Are there best practises on making children clickable in this case? One solution that came to mind was to find the closest element based on it's x/y position and the click x/y , but hopefully there is a smarter way of doing this?

Thanks Jack and Blake!

Hi guys, is it possible to animate a Draggable with a tween and still respect it's container bounds? When dragging the red rectangle, you can't drag it past the grey boundary. But if I am tweening it, how would I make it respect those boundaries? Is there an API call I need to do, or would I manually need to check wether the new x-position is outside the boundaries? Ideally I'd like to be able to animate it outside the boundaries, but once complete it would react like when you stop dragging , it animates back within it's bounds. Cheers

For anyone who is still in doubt wether or not they should get a subscription, this issue was reported and solved within the hour! Great service and very knowledgeable people on the forum. Thanks for the explanation and help guys.