hello,
I've been working on react project, The issue is the 'end' property on scrollTigger does not change when the state changes. How can I solve this ? thankyou
here is the code:
useGSAP(
() => {
gsap.registerPlugin(ScrollTrigger);
const tl = gsap.timeline({
scrollTrigger: {
trigger: '.daily-wrapper',
scrub: true,
start: 'bottom 34%',
end: 'bottom 5%',
pin: '.info-text',
markers: {
startColor: 'purple',
endColor: 'green',
fontSize: '2rem',
},
},
});
tl.to('.info-text', {
x: -400,
// y: -50,
duration: 5,
onComplete: () => {
// poinRef.current.style.backgroundColor = 'red';
console.log('finish');
},
// onUpdate: () => {
// poinRef.current.style.backgroundColor = 'white';
// },
});
gsap.to('.daily-wrapper', {
scrollTrigger: {
trigger: '.daily-wrapper',
scrub: true,
start: '280px 40%',
end: `${1700 + sizeChange}px 5%`,
pin: '.info-text',
markers: {
startColor: 'blue',
endColor: 'orange',
fontSize: '1rem',
},
},
});
},
{ dependencies: [sizeChange] }
);
