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 not detected

Hi for some reason gsap doesn't execute scroll trigger at all ( doesn't show markers ) instead goes str8 for the " y animation", any idea what can be wrong? gsap.registerPlugin(ScrollTrigger); const fixedMenu = () => { let m =…
Paweł Czekaj
  • 33
  • 6
0
votes
0 answers

scrolltrigger with locomotive scroll and nuxt 3, proxy not working preoperly

I'm currently building a website with nuxt 3 gsap scrolltrigger and locomotive scroll. I created a composable to load locomotive and set up a proxy for Scrolltrigger, here is the code for this import LocomotiveScroll from "locomotive-scroll"; import…
teo-goulois
  • 1
0
votes
1 answer

trigger each element individually on scroll with GSAP Scrolltrigger

I am working with GSAP/Scrolltrigger and I want to change the border-radius of a div on scroll (scrub). It works but somehow it resets and loops when the next element with the same trigger class enters and I can't find the solution, what am I…
Erwin van Ekeren
  • 710
  • 4
  • 13
  • 36
0
votes
0 answers

Triggerscroll GSAP stacking images

I'm using gsap and scrolltrigger and what I'm trying to accomplish is to make the images stack over each other when i scroll Is this possible and how ? I've accomplished the image sequence and am now able to scroll to show new images, however i want…
Kevin
  • 3
  • 2
0
votes
1 answer

SVG - Draw scrolling issue with multiple instances

I am trying to create a page (in Wordpress), which is essentially a timeline. As the user scrolls to the next sections, I have a vertical line that "connects" to the next content section. After a LOT of trial and error, I was able to create a line…
Willjamin
  • 21
  • 1
0
votes
0 answers

Play/Pause Css animation with GSAP Scroll trigger

There are many CSS animations on this website, resulting in a slow page performance. As a solution, I am integrating GSAP scroll-trigger to play these only when in view. I have the same thing for videos and I have basically adapted the code to…
Diced Mango
  • 11
  • 2
0
votes
0 answers

onscroll section reveal animation in gsap

I have three sections on my site, I want to reveal sections one by one by scrolling. Now the issue is that when I trigger animation with section 2 it's fine for the first two sections while when I trigger animation with section result is not…
Muhammad Tehsin
  • 57
  • 3
0
votes
0 answers

NextJS + ScrollTrigger (Locomotive)

I'm using NextJS, react-locomotive-scroll and ScrollTrigger’s pin function to pin a testimonial, scroll through it horizontally and then move further down. However, due to react-locomotive-scroll, I need to use the data-scroll-container attribute on…
inzn
  • 61
  • 8
0
votes
0 answers

TweenMax: cancel animation if element is not in view of browser window

How to set TweenMax and ScrollTrigger compatibility so that the animation happens when the element is visible in the browser window? demo code
* { box-sizing:…
Alexsander
  • 55
  • 6
0
votes
0 answers

gsap and scroll trigger glitch while scrolling

while scrolling it is working but there is come glitch while scrolling I know where problem is coming with the text it is going smooth but when I put image in second section it start glitching but it is working I tried to fixed it but it is…
Nikhil Verma
  • 13
  • 6
0
votes
0 answers

(Angular) Scrolltrigger works in localhost but not after build on server

I am using gsap for the first time in Angular and was trying the Scrolltrigger. In my localhost all works fine with this code: The boxes faded in nicely but now we come to my problem. I use "ng build --prod" to generate my project and loaded it on…
Rajat Saraswat
  • 33
  • 6
0
votes
0 answers

Best way to update gsap scrolltrigger when page resize

What's the best way to update gsap scrolltriggers if the page has size changes? Problem: I have a site in nuxt.js 2 and animations with gsap scrolltrigger. The problem is that on the site there is an "FAQ" section with collapsing bootstrap cards…
Dimitri
  • 45
  • 6
0
votes
0 answers

How to clone elements with JS and append them once scrolled by so that you can never scroll or reach the bottom of a page? The elements just repeat

Been trying to find the right solution to create the illusion that you are constantly cycling/scrolling through the same content/images and can never hit the bottom of the page to stop scrolling - it just repeats. Here's a beautiful example of what…
reginald.beep
  • 1
0
votes
0 answers

Iphone Safari browser scrolling to top website automatically

When using Safari on an iOS device, a website I'm working on scrolls to top automatically whenever I tried to scroll down. I found the issue was due to ScrollTrigger.js which I have used to add scroll animation to a svg in HOW? section. The website…
Rakesh R. Jena
  • 1
  • 2
0
votes
0 answers

I have a question about gasp scrollTrigger resposive

I am currently creating a page using Slick Slider and GSAP. However, in the responsive mobile size, the GSAP next to the slick slider fails to capture the area and becomes invisible on the screen. However, it appears on the screen again when…
YINO
  • 1
1 2 3 4
5
6 7 8