how to make gsap scroll stop for a sec then scroll next? w pin?
hi there.
there are 5 cards. when one is scrolled and finishing its animation, i want it to stay so ppl can read it. what parameter to use? thx!
import { useEffect, useRef, useState } from 'react';
import React, { useLayoutEffect } from 'react';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
const ProjectsCard = ({ projectTitle, thumbnail, brief, stacks, stacksInfo, isLast }) => {
let card_content = useRef();
useLayoutEffect(() => {
const ctx = gsap.context((self) => {
const card_sections = self.selector('div');
card_sections.forEach((card_section) => {
gsap.from(card_section, {
delay: 0.5,
duration: 1,
x: -50,
scrollTrigger: {
trigger: card_section,
scrub: true,
start: 'bottom bottom',
end: 'top 0%',
ease: "elastic.out(3, 0.5)"
},
});
});
}, card_content); // <- Scope!
return () => ctx.revert(); // <- Cleanup!
}, []);
import { useEffect, useRef, useState } from 'react';
import React, { useLayoutEffect } from 'react';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
const ProjectsCard = ({ projectTitle, thumbnail, brief, stacks, stacksInfo, isLast }) => {
let card_content = useRef();
useLayoutEffect(() => {
const ctx = gsap.context((self) => {
const card_sections = self.selector('div');
card_sections.forEach((card_section) => {
gsap.from(card_section, {
delay: 0.5,
duration: 1,
x: -50,
scrollTrigger: {
trigger: card_section,
scrub: true,
start: 'bottom bottom',
end: 'top 0%',
ease: "elastic.out(3, 0.5)"
},
});
});
}, card_content); // <- Scope!
return () => ctx.revert(); // <- Cleanup!
}, []);
0 Replies