Stack Overflow
Stack Overflow

Questions tagged [scrolltrigger]

The official scroll plugin for GSAP.

The official scroll plugin for GSAP (GreenSock Animation Platform). ScrollTrigger controls any GSAP animation and supports play states, scrubbing, pinning, automatic resizing, callbacks, horizontal scrolling, and more.

View the ScrollTrigger docs and demos.

ScrollTrigger is licensed under GSAP's standard licensing.

116 questions
2
votes
0 answers

Horizontal scroll not working with one scroll in GSAP scroll trigger

I am using the GSAP product scroll trigger. What I am doing is, once the user scroll then I have to scroll the next section from bottom to top in the one scroll. This will happen until the sixth section comes on the viewport. Once the sixth section…
Naren Verma
  • 2,205
  • 5
  • 38
  • 95
1
vote
0 answers

github authentication error for installing gsap-scrolltrigger in react project

so I was trying to use gsap along with locomotive scroll and scrolltrigger plugin installing gsap and locomotive was not a problem but whenever I try installing scrolltrigger using npm install gsap gsap/ScrollTrigger command my terminal shows error…
Utkarsh
  • 21
  • 1
1
vote
1 answer

GSAP ScrollTrigger runs on all animations at the same time, even for elements not in the viewport

I have several content blocks stacked on a page that will all share the same animation on scroll. Currently, the animation runs on all the blocks at the same time, when the first item with the relevant class/trigger enters the viewport. How do I…
user1406440
  • 1,329
  • 2
  • 24
  • 59
1
vote
1 answer

Pinning and unpinning elements on scroll with Framer Motion (ScrollTrigger)

I am new to Framer Motion and I am trying to recreate ScrollTrigger's functionality of pinning and unpinning elements on scroll. In the example I have working, the box unpins when component enters the viewport, but when you scroll back up to…
rnrh
  • 231
  • 1
  • 16
1
vote
1 answer

how to make an element position fixed with scrolltrigger gsap?

I have a container that has two divs with a width of 50% each, and the alignment is how I want it to be when the scroll trigger isn't active, but when the scroll trigger is active, I wanna make the left div's position fixed and the right div to be…
betty_
  • 61
  • 10
1
vote
1 answer

GSAP multiple scroll triggers for lottie animations in different sections

I am trying to setup multiple gsap scroll triggers with lottie animations in 3 sections. I would like the screen to pin to the animations until they complete. This is the code I currently have, which seems to mostly work. I randomly will see issues…
Jeff
  • 11
  • 1
1
vote
0 answers

GSAP Scroll based animation with React breaking

I am using two different scroll based animation in two consecutive components which are working fine on their own i.e.. if i turn on either one of them they are working fine.. but it breaks when i turn both of them on it breaks. the components I am…
akshat mittal
  • 11
  • 1
1
vote
0 answers

Why is the pinned content of my scrolltrigger disappearing (Locomotive Scroll)

My slider component disappears when it should pin to the page. I believe it is related to the page scroll with Locomotive scroll messing up with translating the page. However, this should be possible and I found a tutorial by Greensock. I cannot get…
inzn
  • 61
  • 8
1
vote
0 answers

Pinned h1 disappears after scrolling down (scroll trigger)

I am using gsap for the first time and am trying to make an h1 get pinned when scrolling down on a section. I am using gatsbyJs and tailwindCSS. I looked for all parent elements in the hierarchy and none of them has a transform set. The scroll…
Ken
  • 11
  • 1
1
vote
1 answer

Camera rotates 7 times around its axis THREE.JS GSAP

Im making online gallery and I need to move camera on scroll. The problem is when I trying to rotate it by Y axis its rotate 3 times around its axis and thats wrong! Im trying do somthing similar like this https://virtual.plus-ex.com/showroom when…
LM3ALLEM
  • 15
  • 3
1
vote
1 answer

GSAP ScrollTrigger - Pin animation not working correctly

I have an element called .listing__nav which I want to pin upon scroll. When the .listing__nav touches the top of the window, I want it to become fixed and to unpin only when the banner element comes into view. To achieve this, I've tried the…
Freddy
  • 683
  • 4
  • 35
  • 114
1
vote
1 answer

Run ScrollTrigger animation once (once: true not working)

I have an ScrollTrigger animation which I only want running once. As per the docs, "If true, the ScrollTrigger will kill() itself as soon as the end position is reached once." However, in my case, when I add once: true, I get the message "Invalid…
Freddy
  • 683
  • 4
  • 35
  • 114
1
vote
1 answer

Using GSAP to create horizontal scroll section

I'm trying to achieve a section which, when in view, becomes a horizontal scroller until the items in the scroller (in my case, images) are finished, at which point, it becomes a vertical scroller again. I've seen and adapted my approach on the…
Freddy
  • 683
  • 4
  • 35
  • 114
1
vote
2 answers

Using GSAP and ScrollTrigger to create a number counter (where numbers exist)

I have a section which showcases statistics. Some of these statistics are numbers (i.e. 145); Some are numbers, characters and symbols (i.e. 65K+ or $20.00) Some are just purely text (i.e. "text") When this section is in view, I want stats which…
Freddy
  • 683
  • 4
  • 35
  • 114
1
vote
1 answer

How to turn on and off the scroll trigger in Material UI useScrollTrigger module?

I'm trying to create a survey page using Material UI in React. I'd like my survey to turn on when the user scrolls over a question and turns off when the user scrolls out of a question. A behavior similar to this…
Iman Nekooeimehr
  • 101
  • 4
1
2
3 4 5 6 7 8