Desginer123

I'm sorry that I don't have a demo because I don't even know how it sounds right. You are right, i trying to find a point in a scrollTriggered animation

Hello, I have a question. I would like to calculate the distance from the start of the page scroll to the moment the animation fires. For instance: const tl = gsap.timeline(); tl.to({}, {duration: 2}) tl.to({}, {duration: 2}) tl.to({}, {duration: 2}) -- calculate the distance from the start of the page to this animation tl.to({}, {duration: 2}) tl.to({}, {duration: 2}) tl.to({}, {duration: 2}) I want to get range from start page to the moment when that animation starts and use this here: gsap.to(window, {scrollTo: {y: 'this distanse in pixels'},

For example, I have a timeline that is triggered simultaneously with mouse scrolling. I would like an animation independent of the user's scrolling to be triggered between the first and second fromTo paire , and after its end, the timeline is again controlled by the user's scroll tl.fromTo('.mission-descr-1', {y: 500}, {y: 0}) tl.fromTo('.mission-descr-1', {y: 0}, {y: -100, opacity: 0}) tl.fromTo('.mission-descr-2', {y: 80}, {y: -470}) tl.fromTo('.mission-descr-2', {y: -470}, {y: -520, opacity: 0}) ScrollTrigger.create({ animation: tl, trigger: '.scene', start: 'top top', end: 'bottom', scrub: true, markers: true, pin: true });

Hello. Thanks for the reply. In that case, yes. I need to do everything with scrollTrigger. Could you answer a few questions for me? 1) Suppose I have a timeline where several animations go sequentially and are dependent on scrolling. For example: tl.from To('.about-descr-2', {y: 80}, {y: -540}) tl.from To('.about-descr-2', {y: -540}, {y: -620, opacity: 0,}) How can I "between them" insert a regular gsap.to () which will execute quickly and then continue the timeline? 2) How to make it work in 2 ways? In the direction of the scroll both up and down

Hello. I have a problem using GSAP ScrollTrigger inside React fullpage.js . I have several sections with the "section" class. Inside them there is content that is not thought of as immediately visible. I need that when loading my site and initializing fullpage.js I had the opportunity to scroll through my section and run GSAP timeline together with ScrollTrigger. I don't understand why scrollTrigger doesn't work inside a section with scrollOverflow = {true}. In my idea, it looks like this: the site loads, React fullpage initialization, then the section with animation scrolls (as in the codepen I attached). After gsap.timeline ends, fullpage.js sections are switched . How to implement this? I ask for help. Link to codepen: https://codepen.io/desginer123/pen/WNZLpQj Link to the current website with React fullpage.js: https://projectxmain48161.gtsb.io/ React fullpage settings.js: <ReactFullpage //fullpage options licenseKey = {'There is my license key'} scrollingSpeed = {1000} fixedElements = {'.grow, .logo, .pagination-wrapper, .cursor2'} menu = {'.pagination-wrapper'} anchors = {['about', 'mission']} scrollOverflow = {true} onLeave = {function(origin, destination, direction){ var loadedSection = this; changePagination(destination.index + 1) //using anchorLink if(destination.index == 1){ gsap.to('.about-1', {opacity: 0, duration: 1.2}) gsap.to('.mission', {opacity: 1, duration: 1.2}) gsap.to('.mission-title', {opacity: 1, duration: 1.2}) } if(destination.index == 0){ gsap.to('.about-1', {opacity: 1, duration: 1.2}) gsap.to('.mission', {opacity: 0, duration: 1.2}) } }} render={({ state, fullpageApi }) => { return ( <main className='pageStyles'> <Cursor/> <Btn/> <Pagination/> <ReactFullpage.Wrapper> <FirstScreen changePagination={changePagination}/> </ReactFullpage.Wrapper> </main> ); }} /> ); JSX: the same as codepen html