code stan

Ok thank you for your feedback, 1. when I said "align properly", I was referring to the start and end position not being tied to the element (the trigger element), I was trying to animate the content in it, to simply come from bottom to top. 2. I did eventually create a minimal demo, but it's working fine here and not in the project. 3. When I removed lenis scroll, the issue still persisted. 4. Here's a more simplified version of the code, I specified earlier, the "CONTACT COMPONENT" has the issue, sometimes it animates properly other times on refresh it doesn't

I was building a website while integrating scrollTrigger with lenis, the animation was not coming in right, when I added marker and set it to true to see the the start and end positions, I saw they where not aligned properly. But If I let's say change one of the animating properties in the code it aligns itself correctly to the actual start and end position. And also no this is not the same issue with ScrollTrigger and Lenis Issue, because some section seem not to have this issue and this particular one does. here is the code on codesanbox. Check the contact component. THANK YOU

Hmm, Thank you, yeah something like. Lots of loop holes in my code, not what I intended, the take from this is 3 and 4. Thank you so much

Thank you for the feedback, here's the minimal demo you requested

ScrollTrigger not animating the element ".profile__container", unless I add scrub. I want the scrollTrigger to element without the scrub. Is there something I'm doing wrong. useEffect(()=>{ const profileAboutTexts = document.querySelectorAll(".profile__about p"); // const profileContainer = document.querySelector(".profile__container") // const about = aboutRef.current profileAboutTexts.forEach(text=>{ new SplitType(text, { types: 'lines, char' }) }) const anim = { y: 130, transform: "rotateZ(25deg)", opacity: 0, stagger: { amount: .8 }, } const ctx = gsap.context(()=>{ tl.current = gsap.timeline(); tl.current.from(".profile__about p:first-child .char", {delay: 2, duration: 1.3, ...anim}) tl.current.from(".profile__about p:last-child .char", {...anim, scrollTrigger: { trigger: ".profile__container", start: "top 40%", end: "top 20%", markers: true, } } ) }, aboutRef) return ()=> { ctx.revert() } }, [])