joris-rotteveel

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.

Thank you @OSUblake , That does the trick, the docs might not be up to date then : https://greensock.com/docs/v3/Plugins/InertiaPlugin/static.track()