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

Trouble finding the right plugin to animate text

For a new project I'm looking for a smooth scroll plugin that animates different elements with parallax effects and more. Right now I'm using locomotive scroll and it works really nice, but it doesn't work on mobile like I want too. The effect i'm…
Htothep
  • 1
0
votes
0 answers

GSAP ScrollTrigger Import

I am importing GSAP and ScrollTrigger to a local install of create-react-app. The GSAP import works fine but ScrollTrigger only works with the skypack import. See code below. I've tried with and without curly braces. According to docs and other…
Freja
  • 49
  • 1
  • 7
0
votes
0 answers

Update trigger after scrolltriger is trigged

I wrote this code that executes a function everytime the user reaches the bottom of the page. As some elements are appended, the page height changes, and looks like after the first time, its triged, the trigger is not updated to the bottom of the…
Fernando Souza
  • 1,748
  • 1
  • 20
  • 36
0
votes
1 answer

how to keep show last content with scrolltrigger

I use a pen with scrolltrigger but it does not show content at first(before scrolling).I mean the bright green area is blank at first but I want to show first content before section pinned and keep the last content after section continue scroll…
wertyu
  • 93
  • 1
  • 3
  • 17
0
votes
0 answers

how to keep last content with scrolltrigger

I saw a pen with scrolltrigger and wanna use it. But before first scroll content(I mean text in bright green area) is invisible and when I scroll to the bottom content became invisible. how to keep the last content? here is the pen and my own…
wertyu
  • 93
  • 1
  • 3
  • 17
0
votes
0 answers

Pin elements when on scroll

I'm using gsap (version 3.11.5) in reactjs project. Basically, I want to hide shapes when scroll to end of the first page. When scroll back to top, it will also tag along again (using scrub: true). For now, it still appear even though it ends of…
Denny
  • 167
  • 4
  • 8
0
votes
0 answers

Next JS does not identify GSAP plugin module added via cdn

I'm trying to use a gsap plugin module via cdn in my Next JS project. So i started adding Script tags inside the Head tag in my _document.js This is my code: import { Html, Head, Main, NextScript } from "next/document"; import Script from…
JonzzDev
  • 1
  • 1
0
votes
0 answers

How to make react-gsap responsive?

I'm working on a project with react-gsap and scrollTrigger and it needs to be responsive. Please find the example for your reference. In the example, I would like the blue block to always be 100vw. But it seems that the width is fixed at the first…
iris-yu17
  • 25
  • 5
0
votes
1 answer

muting/unmuting video with jquery doesn't seem to work

I'm trying to force all browsers, including Safari, to play video sound. So I set all videos to be muted. If the user clicks the "Begin" button, then all videos are NOT muted. When you scroll to the videos, they pin and play with ScrollTrigger.…
LauraNMS
  • 2,720
  • 7
  • 39
  • 73
0
votes
0 answers

Delay GSAP scroll animation for each element instead of all at once - GreenSock

For each div with the class of '.content-page-section-scroll-animation-component__values-div' I'm running a GSAP scrollAnimation for their child elements. Currently they all animate at the same time, but I want them to be delayed so that the…
rubyfrancesstack
  • 53
  • 4
0
votes
0 answers

In Intersection Observer how can I use my different refs of my items to check the visibility and animate it

How can I animate my items by checking each items in list is visible or not? function AnotherPrizeCard(props) { const myRef = useRef([]); const [myPrize, setMyPrize] = useState(false); const Next_Prize = NEXTPRIZE.Upcoming_Events; …
Akshay
  • 1
  • 1
0
votes
0 answers

Scroll effect like on codesandbox main page

I am looking to achieve an effect similar to the one on codesandbox.io where the elements, such as the big blue circle, become smaller and then show text as I scroll down the page. I have searched the internet and I am almost certain that it…
BBDev
  • 1
0
votes
0 answers

GSAP ScrollTrigger Jerk Issue

I've used the GSAP ScrollTrigger animation with ScrollTween to achieve the one page scrolll feature. There is one property called scrollTo: {y: i * window.innerHeight, autoKill: false}. If i used the autoKill as false then jerk issues happening if…
Javascript Hupp Technologies
  • 1,997
  • 2
  • 12
  • 27
0
votes
0 answers

GSAP ScrollTrigger triggers duplication simplify

I have to change scale of element (like box on codepen example) in the intersection of section to 0. In the center of section the element should scale to 1. Example:

Post Mgla
  • 1
  • 1
  • 1
0
votes
0 answers

gsap scrollTrigger with react not working

i'm trying to convert this codepen pen : https://codepen.io/designcourse/pen/gOjZKOO to react component but it not working for me this is my reactjs code i registred the plugin scrollTrigger and make useRef const App = () => { …
Wael Manai
  • 3
  • 2
1 2 3
4
5 6 7 8