[Infinite scroll with scrolltrigger, anchor links]

Thanks Jack,

 

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

[Infinite scroll with scrolltrigger, anchor links]

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?

See the Pen poZrdXe by joris-rotteveel (@joris-rotteveel) on CodePen

[Draggable Infinite Carousel with Snap and Indexing]

Jack, this is amazing!

[looping animation on scroll, how to add drag]

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

[looping animation on scroll, how to add drag]

@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.

[bonus.tgz file npm vs yarn]

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.

 

 

[looping animation on scroll, how to add drag]

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

Excited about the new release!

[looping animation on scroll, how to add drag]

@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.

 

See the Pen jOYEjxz by joris-rotteveel (@joris-rotteveel) on CodePen

 

[looping animation on scroll, how to add drag]

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!

 

 

[looping animation on scroll, how to add drag]

Thanks Blake,

 

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

[looping animation on scroll, how to add drag]

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!

See the Pen zYPVBjw?editors=1100 by joris-rotteveel (@joris-rotteveel) on CodePen

[scroll footer over the top of main content]

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

[scroll footer over the top of main content]

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!

 

See the Pen XWaKyQN by joris-rotteveel (@joris-rotteveel) on CodePen

 

 

[scroll footer over the top of main content]

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 

See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen

 but that only works with 100vh sections. 

Any help is appreciated!

 

Thanks

 

 

See the Pen wvqWQox by joris-rotteveel (@joris-rotteveel) on CodePen

[Scroll Trigger, with child position:sticky element]

@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! 

[Scroll Trigger, with child position:sticky element]

@GreenSock I am trying to the same thing, but without any content between the sticky and the curtain. I've adjusted your example here, 

See the Pen YzxXZgx by joris-rotteveel (@joris-rotteveel) on CodePen

. Unfortunately, the black box scrolls down when scrolling before pinning. 

 

Is this possible you think?

[ScrollTrigger and webpack prod build]

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

[ScrollTrigger and webpack prod build]

Thanks Jack,

 

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

[ScrollTrigger and webpack prod build]

Hey jack,

 

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

[ScrollTrigger and webpack prod build]

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 

 

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. 

See the Pen JjYPQpN by GreenSock (@GreenSock) on CodePen

[Draggable Proxy and clickable children]

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!

[Draggable Proxy and clickable children]

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?

 

See the Pen jOPMdKL by joris-rotteveel (@joris-rotteveel) on CodePen

[Animate Draggable and respect container]

 

 

Thanks Jack and Blake!

[Animate Draggable and respect container]

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

See the Pen YzPbJxw by joris-rotteveel (@joris-rotteveel) on CodePen

[InertiaPlugin.track returns Array?]

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.