eggroll

I've been utilizing ScrollTrigger and it has truly impressed me. I'm curious to know if there's a way to configure ScrollTrigger to activate when the user is within specific pixel ranges of the start function. For example, setting it to trigger between the top 25% and 35%. The idea is that when the user is in close proximity to the trigger line, the animation should initiate. Appreciate your insights. Thank you!

Hey Gsap Helper, I appreciate your thoughtful message, and I want to express my understanding and respect for your decision. It's essential to acknowledge that the animations perform seamlessly when the page is reloaded in the specific location where they are intended to play. However, I've noticed that in the scenario where a hard reload takes place on a different page, and the user navigates to the page with animations afterward, the animations do not function as expected. It appears that the ScrollTrigger line position may be incorrect, causing this issue. I've tested this without the SplitType library and the problem persists. I can try and get a running demo of the problem up soon.

Hi there! Thanks for the replies. I have gone ahead and created a small demo here. The code has changed a little since writing this post. This is how I currently have my ScrollTrigger set up with my components. Do you see any problems with my code? Unfortunately it's difficult to replicate the same issue on StackBlitz since I am not able to hard reload and load into the components with ScrollTrigger. Thanks in advance!

Hi there. I recently came across a problem and I can't seem to figure out what is causing the issue. My animations do not work unless a hard reload occurs and the component of the page is mounted. For whatever reason, this particular animation does not work but my other animations do. One animation contains ScrollTrigger and it works completely fine unlike the one I am having issues with. I've posted a snippet of my code below and would appreciate any help given. The positioning of the markers are wrong when the component has mounted and when the window resizes it snaps to the right location. Although, when this occurs, the animation does not function. All my animations go into one single component file and are initialized with an import and a call function. Thanks so much. No codepen because this problem seems hard to replicate without having set up multiple pages with unmounting and remounting. export const SplitWord = () => { useEffect(() => { const ctx = gsap.context(() => { const animateIn = (element) => { const textsplit = new SplitType(element, { types: 'words' }); const words = textsplit.words; const staggerValue = element.classList.contains('long') ? 0.04 : 0.02; gsap.set(words, { opacity: 0 }); return gsap.fromTo( words, { x: -10, rotationX: 45, opacity: 0 }, { x: 0, rotationX: 0, opacity: 1, duration: 2, stagger: staggerValue, ease: 'power3.out', overwrite: true, } ); }; gsap.utils.toArray('.splitword').forEach((element) => { let animation; ScrollTrigger.create({ trigger: element, start: 'top top', onEnter: () => { if (!animation || !animation.isActive()) { animation = animateIn(element); } }, scrub: true, markers: true, }); }); }); return () => ctx.revert(); }, []); };

It's fantastic! However, I've noticed that if animations have different durations, they reset independently based on their respective durations. How can I ensure that if two animations are triggered simultaneously on the same trigger line, they will reset and start playing at the same time? I've created a demo of the problem here.

Yes correct! If a user scrolls up and down super fast where the animation begins it causes a flicker issue. I want to prevent the animation from being run if it is currently being animated.

Yes thank you so much! Is there a way I could have the animation timeout that way a user cannot reset the animation too quickly? I'm not seeing any GSAP property that allows me to do this. What comes to mind is setTimeout. Thanks in advance!

I've gone ahead and updated the demo to showcase the retrigger animation problem that is more evident.

Hi GreenSock! I apologize for any confusion. To clarify, when I refer to an animation potentially retriggering too rapidly, I mean that it occurs while the current animation is still in progress, causing it to reset. My objective is to ensure that once an animation is triggered, it should complete before ScrollTrigger reactivates it. If you scroll down to the section where ExpandDivider is featured in the demo, you'll notice a momentary interruption in the animation. This happens as the user scrolls up and down activating the ScrollTrigger start line.

Hey GSAP Helper! Thanks a bunch for getting back to me! I've whipped up a quick demo of my site using StackBlitz. You can check it out here! Let me know if you can view the code. Going to take a deeper look into gsap.context() as well. Looking forward to hearing your thoughts!

Greetings everyone! I'm thrilled to be part of this community, and it's my first foray into using GSAP for animations. While it's proving to be a bit of a challenge, I'm making steady progress thanks to the documentation. I'm just about wrapping up my animations. In my current React project, I'm employing GSAP's ScrollTrigger to animate a component nested within a wrapper, which I've imported into my main JSX file. I've run into a small snag. When a user is scrolling and they hit the ScrollTrigger start line, the animation can retrigger too rapidly, resulting in a less-than-ideal visual experience. I'm wondering if there's a way to introduce some kind of buffer, perhaps in the form of margins, to prevent users from quickly toggling the animation on and off. I've posted a snippet of my code below. I'm eager to optimize my code for the best user experience possible. Your insights would be greatly appreciated! Looking forward to diving deeper into GSAP and learning more. Thank you in advance! Inside my animations.jsx export const SlideUp = ({ children, y }) => { const elementRef = useRef(null); useEffect(() => { const element = elementRef.current; gsap.set(element, { opacity: 0 }); const animateIn = () => { gsap.fromTo( element, { opacity: 0, y: y || 50 }, { opacity: 1, y: 0, duration: 1, ease: 'power3.out' } ); }; const scrollTrigger = ScrollTrigger.create({ trigger: element, start: 'top bottom', onEnter: () => { animateIn(); }, scrub: true, }); return () => { scrollTrigger.kill(); }; }, []); }; Inside my main page <SlideUp> <div className="image-row"> <div className="content-container"> <img className="project-image" src="images/img1.webp" alt="" draggable="false" /> </div> <div className="content-container"> <img className="project-image" src="images/img2.webp" alt="" draggable="false" /> </div> </div> </SlideUp>