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
0
votes
0 answers

Basic pin GSAP ScrollTrigger

explain to me how to use ScrollTrigger correctly I just want to do simple pin the text. The problem is, when it reach the scroll-start mark, the text goes down. I don't understand how this thing works I tried playing with the start and end, still…
Irsyad Mhd Ilham
  • 101
  • 1
  • 5
0
votes
0 answers

Quasar composition API - GSAP Scroll Snapping with ScrollTrigger

I'm trying to integrate GSAP Scroll Snapping & ScrollTrigger on my Quasar App home page. I am using composition API. I use gsap.to() and use ref element as target I am following this Codepen: Pair with CSS Scroll Snapping - ScrollTrigger Component…
Evan
  • 2,327
  • 5
  • 31
  • 63
0
votes
0 answers

Connect Chart.js animation progress with GSAP ScrollTrigger progress

Is it possible to connect Chart.js animation progress with GSAP ScrollTrigger progress? In Chart.js documentation there's a callback progress: I was wondering can we set chart.js animation progress depending on a ScrollTrigger progress? So inside…
Serge Markeloff
  • 21
  • 4
0
votes
0 answers

Layered pinning with ScrollTrigger and sticky element

I want to use a scroll trigger for my landing page. When scrolling down, the next section comes from the bottom. All is ok. But I want some element, in this example, the deer stay in front of other sections. Absolute positioning? Sticky? No way...…
angelilo_
  • 143
  • 9
0
votes
0 answers

How can I set the start and duration of animation with ScrollTrigger (scrubbing enabled)?

I just started learning GSAP and have a problem setting the desired start and duration of the animation when scrubbing from ScrollTrigger is enabled. First, here is a link to the codepen project. Here is a demo of how the animation should look…
philale
  • 437
  • 4
  • 15
0
votes
0 answers

How to setup my JS Scrolltrigger code in order to make it work after a page transition (HighwayJS)

I'm having 1 issue with the combination of HighwayJS + Scrolltrigger. On a homepage I have a carousel. Carousel functions with ScrollTrigger. It's pinned once it hits the top of the viewport. This all works fine when you land directly on the…
Colin Duet
  • 1
  • 1
0
votes
0 answers

ScrollTrigger match media

I have the following match media code, and for some reason, it's being stricken off in JS. Why is it so? enter image description here
Harshavardhan
  • 1
0
votes
1 answer

Scroll Trigger: How to play the whole animation not by every page scroll once it enters the trigger element?

I have this animation that plays on every page scrolling. What I want to achieve is to play the whole animation when it triggers the id section of the pinned element. So when it enters the pinned element, it should play the whole animation, not by…
laurence keith albano
  • 1,409
  • 4
  • 27
  • 59
0
votes
1 answer

The camera moves around the scene when scrolling THREE.JS GSAP SCROLLTRIGGER

My problem is when I scroll camera works good but closer to the end its stopping moving smoothly. At this video I will show how its should work. I was inspired by this web-site :) And as I said, I have some little problems.. My glitch code:…
LM3ALLEM
  • 15
  • 3
0
votes
1 answer

Update variable inside gsap matchMedia on every resize

I have a basic gsap animation set up with matchMedia. ScrollTrigger.matchMedia({ "(min-width: 700px)": function () { let containerWidth = parseInt(getComputedStyle(document.querySelector(".see-through")).width); let tl =…
Praneet Dixit
  • 1,393
  • 9
  • 25
0
votes
1 answer

more than one elements with same class gsap

I'm working on GSAP and I have two elements on different pages that have the same class and I want to apply their animation using scrollTrigger when I reach the element. Is there a way I can do this with a function instead of giving them a specific…
Nora
  • 77
  • 6
0
votes
1 answer

Scroll specific div without having to hover over it

I have a section which essentially contains an image and some text. I'm using GSAP to pin the section on scroll and now I'm looking to scroll the text, without making the user hover over it. Key points: .configurator is 100vh When the .configurator…
Freddy
  • 683
  • 4
  • 35
  • 114
0
votes
1 answer

How to reproduce the 4 callbacks of gsap's ScrollTrigger with IntersectionObserver?

I would like to implement the 4 callbacks of gsap's ScrollTrigger: onEnter, onEnterBack, onLeave, and onLeaveBack, with IntersectionObserver. https://greensock.com/docs/v3/Plugins/ScrollTrigger (ScrollTrigger notifies 4 events because it takes into…
Ichitaro Masuda
  • 31
  • 4
0
votes
1 answer

Nextjs Routing - Is there a way to START at the top when switching pages? GSAP-related

Here's the scenario I'm coming across that's affecting my GSAP ScrollTrigger animations: I have a home page that loads and animates. When I scroll down the home page, scroll trigger behaves normally. When I get to the bottom and decide to use the…
kvncnls
  • 261
  • 2
  • 9
1 2 3 4 5
6
7 8