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

Implementing cards stacking animation on scroll with Gsap and ScrollTrigger

I have a module where 3 cards stack on top of each other and then, on scroll, the cards will unstack one by one. See GIF of desired effect here. I have tried to emulate the above effect using GSAP and ScrollTrigger, however, my animation is…
Freddy
  • 683
  • 4
  • 35
  • 114
4
votes
1 answer

Update links dynamically once user scrolls past div with ID

I have a nav menu which I want to update whenever a user scrolls past the section it's referencing. For example, if the user scrolls past #section-1, I want .configurator__menu-link with the href="#section-1" to become orange. However, my current…
Freddy
  • 683
  • 4
  • 35
  • 114
4
votes
1 answer

Animating child elements in ScrollTrigger GSAP horizontal scroll

I have an svg which forms the basis of my horizontal scroller. Within this svg, I have added the class .animate to the elements which I want to fade in up as the item comes into view. The .animate class for reference has been added to all the text…
Freddy
  • 683
  • 4
  • 35
  • 114
4
votes
1 answer

GSAP 3 ScrollTrigger not working with dynamically changing value (not refresh / recalculated)

I have a problem when using GSAP's ScrollTrigger. I set the height of a pinned element in different viewport widths, and it works fine when resizing the window. But now I want to change hight of the pinned element by clicking the button. I use…
Tiffany
  • 219
  • 7
  • 17
3
votes
2 answers

Using GSAP / ScrollTrigger to create card stacking effect on scroll

I'm trying to mimic the an effect where cards unstack on scroll. For visuals, please click here to view a GIF of the effect. The website the above GIF is from is this website. Now, I've tried to mimic the above using GSAP / ScrollTrigger. However,…
Freddy
  • 683
  • 4
  • 35
  • 114
3
votes
1 answer

Vue-Router and Gsap ScrollTrigger

I've some problems with vue-router and gsap's scrolltrigger plugin. I have some vue components using scroltrigger and when I go to a different page and came back to the page having the scrolltrigger effect it doesn't trigger, but work if I manualy…
bappla
  • 55
  • 1
  • 6
2
votes
1 answer

Stop overflow of an element while ScrollTrigger

I'm doing scaling on scroll trigger, the '.square' class when ScrollTriggered zooms in and overflows outside of the '.test' class, I want the scaling to be visible inside of the '.test' class and don't want it to overflow on other containers, what's…
betty_
  • 61
  • 10
2
votes
0 answers

Scrollmagic timeline fade-in-out text not working as expected

I've created a syncronized horizontal timeline slider which should also fade-in-out some text on top of another. Unfortunately I am unable to understand how I could fade out the last slide's text when the new one appears in a timeline logic - with…
user3615851
  • 999
  • 1
  • 15
  • 40
2
votes
1 answer

Trigger animation with GSAP ScrollTrigger

I've created a CSS3 Animation with a scroll trigger that I'd need in GSAP ScrollTrigger since AddEventListener('scroll'... is not compatible with GSAP because it uses some different mechanisms for scrolling. This is the current animation that I've…
0xef
  • 23
  • 8
2
votes
0 answers

GSAP sets scrollTrigger markers before images load and animation does not run on refresh Gatsby.js/React

The GSAP script runs before the page images have loaded so the scrollTrigger markers are in the wrong heights on the page like the following which causes the animation not to run as expected (the images should fade in and up when scrolled into the…
eoja
  • 1,642
  • 2
  • 12
  • 21
2
votes
1 answer

GSAP and ScrollTrigger sections overlapping and executing before previous section has finished

I have a problem that keeps popping up with GSAP and ScrollTrigger. I have multiple pinned sections where, as the user scrolls into a section, images slide in from the side. When I make these images slide in from the same side everything is fine,…
Rob Beaney
  • 23
  • 4
2
votes
1 answer

Parallax effect within pinned GSAP container

I have a block which becomes pinned and scrolls horizontally. Within this block, I have a vector which has a width of 3573px. When a user scrolls horizontally, I want the vector to scroll also, alongside the images in my demo. Have tried moving my…
Freddy
  • 683
  • 4
  • 35
  • 114
2
votes
2 answers

GSAP: Pin progress bar when it hits element + progress bar not accrate

I'm trying to create a progress bar that shows how much of a certain element the user still has left to view. Here are some details: .postProgressBar appears by default under .postHeroImage When the user scrolls, I want the .postProgressBar to…
Freddy
  • 683
  • 4
  • 35
  • 114
2
votes
1 answer

nuxt with locomotive-scroll and gsap issue on route change

I have been straggling to achieve a smooth scrolling effect on my Nuxtjs project using the locomotive scroll and gsap scrollTrigger and Scrollproxy. But having some wired issues on my halfway which I can't go back to. I am using Typescript and…
Raydoan Anik
  • 219
  • 2
  • 15
2
votes
0 answers

locomotive scroll - impossible to scroll need to resize window before

I have an issue on my project, I have a page with full image displayed with the library Locomotive scroll, but to scroll the page, I need to resize him before.. How can I fix that to avoid to resize my window before in order to scroll the page I use…
Kévin Wernet
  • 53
  • 4
1
2 3 4 5 6 7 8