3mo

Thank you very much, that's exactly what I needed

Sorry, I hope this new version will be easier to understand : GSAP Starter Template (codepen.io) My aim is to launch an animation on the text of each <div class="sheet"> when the latter is in the viewport. When rewriting my code in CodePen, I noticed that isInViewport(element) returned true if element was in the viewport horizontally (as if the viewport were 100vh high but 100% of the body wide instead of 100vw). So I'd like a way for isInViewport(element) to return true only if (element) is "really" visible. I hope this description is clearer.

Hello, I've edited my 1st post with a CodePen link. Sorry for the delay, I hope it's clear enough.

Excuse me, I've run into some trouble with CodePen, if I can sort it out I'll share a link. In the meantime, I've noticed something with the isInViewport() function. As soon as I scroll a bit, all my pages are considered in the viewport even if they're not yet visible. My project is quite complex, consisting of several sections each 100% the size of the viewport. Here's a scheme that might clarify things for you : https://www.tldraw.com/r/v27csguvzfDD-U9eSBNrVf_ As soon as I have time, I'll try to solve this problem without using getBoundingClientRect() if possible.

Alright, I will try.

Hello, I'm new to GSAP, so I apologize in advance if my problem could have been solved simply. I have an HTML structure that looks like this: <div class="chapter chapter-1"> <div class="page page-1"> <div class="sheet"> <p class="storyline">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci commodi optio fugiat eum porro provident necessitatibus vitae. Quis, doloremque inventore recusandae aperiam dolore adipisci blanditiis est dolorum architecto dicta quasi?</p> <i class="fa-solid fa-circle-left reading-btn previous-chapter"></i> <i class="fa-solid fa-circle-chevron-right reading-btn next-page"></i> </div> </div> Of course, there are several chapters (chapter-1, chapter-2, ...) which themselves have several pages (page-1, page-2, ...). I'd like to run a SplitType animation on my <p class="storyline"> each time it or its parent <div class="sheet"> enters the viewport. To achieve this, I wrote the following code: for (let indexPage = 0; indexPage < storyLines.length; indexPage++) { const numPage = indexPage + 1; console.log('Chapter ' + numChapter); console.log('Page ' + numPage); // I used this console.log only to make sure I had the right chapter and page number const line = new SplitType(`.chapter-${numChapter} .page-${numPage} .storyline`, { types: 'chars' }); gsap.fromTo(`.chapter-${numChapter} .page-${numPage} .char`, { y: 100, opacity: 0 }, { y: 0, opacity: 1, stagger: 0.1, duration: 3, delay: 3, ease: 'power4.out', scrollTrigger: { trigger: `.chapter-${numChapter} .page-${numPage} .storyline`, toggleActions: "play none reverse none" } } ) } This loop is itself in another loop: for (let indexChapter = 0; indexChapter < chapters.length; indexChapter++) { const numChapter = indexChapter + 1; I've encountered two main problems: either the animations don't trigger, or they trigger at the same time, so by the time I got to the next page, the animation had already begun. Thank you in advance, my code is not clean, I apologize.