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
1 answer

GSAP scrollTrigger - animating only the element that was triggered

I'm developping animations with GSAP. So what I want to do is animate a Team Member Card when it gets in the viewport. Easy enough when that section happens only once, but that card component happens 10 times in the page team. And with my current…
Fredy31
  • 2,660
  • 6
  • 29
  • 54
0
votes
1 answer

GSAP ScrollTrigger choppy with custom scroll value

I am experimenting with gsap's ScrollTrigger. I have a custom scroll container and want to use ScrollTiggers scroller proxy to hijack the scroll. The results are very choppy though. Am I doing something wrong? Here is an example of what I have so…
user3331344
  • 728
  • 8
  • 23
0
votes
1 answer

GSAP ScrollTrigger triggering on mount, not on scroll

I made an animation with a scrolltrigger in line with the example in this codepen. Trouble is, the animation plays when I load the page and not when I scroll past the intended trigger point. Does anyone know why that might be? I call the trigger…
crevulus
  • 1,658
  • 12
  • 42
0
votes
1 answer

GSAP ScrollTrigger not working as intended

I'm trying a simple ScrollTrigger animation where my text would move at the x-axis as I scroll. However, it just doesn't move at all. HTML:

Mountain

CSS: .mountain-text { position: relative; top: -200px; …
Hamza Khan
  • 67
  • 9
0
votes
1 answer

Can I use a span instead of a div with ScrollTrigger?

In my HTML code I have several tags inside a div, and I want to animate them using GSAP's plugin ScrollTrigger. But it doesn't seem to work when I use the span elements instead of several
tags. Here's the code: HTML:
Rafael Murta
  • 9
  • 1
0
votes
0 answers

GSAP [Timeline/ScrollTrigger/fromTo] starting value is not honoured until it has animated for the first time

I'm attempting to create a fade-in parallax effect on the text as you scroll the page. So far the effect is working quite well — barring a slight hiccup that occurs every time the page is visited for the first time (and when refreshed). The element…
Adam
  • 146
  • 1
  • 3
  • 11
0
votes
1 answer

Gatsby + GSAP and ScrollTrigger problem with using

I'm stuck on a strange issue in Gatsby and it occurs only when I want to animate elements with gsap and scrolltrigger plugin. Basically when I click element everything is ok, but immediately after I add in code gsap animation based on…
Piotr A
  • 51
  • 5
0
votes
1 answer

How to combine GreenSock's (GSAP) ScrollTrigger and TextPlugin

How can I combine ScrollTrigger with their different plugins, e.g. TextPlugin? Like tweening

That

to

This

when #tweenthat comes into view.
Daiaiai
  • 1,019
  • 3
  • 12
  • 28
0
votes
0 answers

GSAP 3 Scroll Trigger on leave animation reverse

I have used GSAP 3.0 ScrollTrigger in one of my websites everything is working fine but I want my animations to be reversed when leaving the section or div. I know there is a callback call onLeave but I am not able to figure out how to use it. I am…
Chandan Baruah
  • 23
  • 8
-1
votes
1 answer

Bind ion-content as scroller of GSAP Timeline

I am implementing GSAP in an Ionic application (v 6.18.1). I cannot create a ScrollTrigger that identifies the ion-content component as a scroller. I found a workaround that carries some glitches due to the fact that the start and end parameters set…
Nibia
  • 314
  • 1
  • 7
-1
votes
1 answer

Horizontal GSAP pinning with ScrollTrigger

I just created pen in CodePen for my demo. I try with different states but did not work. I want to add and remove class in middle section like this: https://codepen.io/Designer12/pen/qBryyrp Demo image:
Designerworldweb
  • 9
  • 3
1 2 3 4 5 6 7
8