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
2 answers

Gsap scrolltrigger with timeline

I'm making react app using gsap. I use scrolltrigger in timeline but it's not working. The scrolltrigger couldn't work.Can someone help me? Here is my code gsap.registerPlugin(ScrollTrigger); const el = useRef(null); const q =…
Agtha
  • 1
  • 2
0
votes
0 answers

gsap scrolltrigger animation pinspacing a false

I would like to have the same effect but with pinSpacing: false, the panel must freeze and run the internal animation and then go to the next one. ScrollTrigger.create({ trigger: panel, start: "top top", pin: true, end: "bottom…
AldoZumaran
  • 547
  • 5
  • 23
0
votes
0 answers

horizontal and vertical smooth scroll snap

I'm just wondering if I can get a horizontal smooth scroll snap in somewhere between the vertical scroll snap? This one is what I'm working with so far - https://codepen.io/tarunpatnayak/pen/rNYvvQb I'm trying to include something like this in…
Tarun
  • 17
  • 7
0
votes
1 answer

GSAP stagger animation

If an element has the class .stagger then I'm trying to execute an animation which shows the cards one by one. In my current demo, the cards all fade in together. Even though I've specified a delay? How can I the cards to appear one by one? …
Freddy
  • 683
  • 4
  • 35
  • 114
0
votes
1 answer

GSAP ScrollTrigger animations not working with Locomotive JS (until window is resized)

I have sections across my site which are using ScrollTrigger. Once I implemented Locomotive JS, all of my ScrollTrigger animations stopped working. I read through the forums and saw that you need to update() ScrollTrigger when Locomotive is…
Freddy
  • 683
  • 4
  • 35
  • 114
0
votes
0 answers

Bulma & scrollTrigger changing/breaking when mobile responsive view set to touch simulation & on actual mobile

So I'm using multiple plugins and am having an issue that's prevailed all the way down to stripping everything back to Bulma. When using responsive design mode in Firefox, everything looks exactly as I want it to. When enabling 'touch simulation' or…
GlassWolf
  • 1
  • 1
0
votes
1 answer

Prevent absolute div (moved with ScrollTrigger) from lengthening the page

I wanted to make a simple parallax effect using ScrollTrigger. The problem is the absolute div containing the "images" (currently red boxes) have a greater height than the page itself. So there is a big gap after the footer since the images have…
Xavier Godbout
  • 33
  • 7
0
votes
0 answers

ScrollTrigger toggles function when bottom of viewport is reached

Sup, I am using gsap with ScrollTrigger to toggle dark/light mode on my site. I wrote a function to detect when a trigger become visible: ScrollTrigger.create({ trigger: ".js__trigger-dark", start: "bottom bottom", end: "+=300", onLeave: self…
Valentine
  • 161
  • 1
  • 12
0
votes
1 answer

Problem with width in horizontal scrolltrigger

I have a problem in my code with container's width, when I scrolling. For example, I don't see my las item in the list. I can't understand why there is this problem. I use ScrollTrigger and GSAP for this horizontal scroll. Also active element is…
Vladyslav Afonin
  • 1
0
votes
1 answer

Why does Scrolltrigger not update my dynamically x value on window resize?

First things first. I absolutely love GSAP and their Scrolltrigger. Everything works fine, but unfortunately, the object I move on the x-axis based on scroll does not update when the user resizes his browser window.' The x value is based on a…
Andreas Markl
  • 11
  • 3
0
votes
2 answers

onMount doesn't get called a second time

I am building a simple website in SvelteKit and Gsap + scrollTrigger. The structure is something like this: Startpage / About / Services / Contact Throughout the site, I use many simple animations on SVG, texts and other elements. Everything seemed…
Zofija
  • 1
  • 2
0
votes
1 answer

Zoom image on scroll with GSAP scrollTrigger

I built a zoom effect that is triggered with GSAP's ScrollTrigger, it works fine but I want to slowly (scrub) zoom the image on scroll and not animate the zoom on scroll when entering the trigger. I found a javascript solution in the comments here…
Erwin van Ekeren
  • 710
  • 4
  • 13
  • 36
0
votes
0 answers

Gsap scrolltrigger combine timelines?

I currently have a scrolltrigger setup with GSAP that pins at a point and then scrolls through some slides vertically. All is working as expected. However I'm not sure how to setup an inner timeline inside each of the slides before moving on to the…
hendy0817
  • 979
  • 2
  • 20
  • 47
0
votes
0 answers

GSAP ScrollTrigger animation fade in fade out opacity issue

I'm trying to create a timeline section using GSAP ScrollTrigger animation. I've five text blocks (5 timeline elements) with five different images. By default, there will be only one text block visible but after scrolling the hidden text block(2nd…
Alok Paul.
  • 76
  • 2
  • 9
1 2 3 4 5 6
7
8