joris-rotteveel

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.