Ajapro

While scrolling images going top to down for 3d scrolling not centre fixed scroll images . how to fix at centre of the page div UI

how to display selected image in detailimg from other componant using ngif ngfor <div class="gsapani"> <div id="scrollDist"></div> <div id="timeline2-app"> <div id="imgGroup" > <div class="cardsGrp" id="cardsGrp" *ngFor="let row of timeline; index as i;"> <div class="timeline-2 {{row.position}}" data-aos="fade-in"> <div class="card tl-card"> <div *ngIf="row.year" class="card-header p-0 m-0"> <h1 class="year-header">{{row.year}}</h1> </div> <div *ngIf="row.img" class="img-container"> <img class="card-img-top color-effect" src={{row.img}} > </div> <div class="ac-card-body"> <div id="accordion"> <div class="ac-card"> <div class="ac-card-header" > <button class="btn-block text-center ac-button collapsed" data-toggle="collapse" [attr.data-target]="'#collapse'+i" aria-expanded="true">{{row.title}} </button> </div> <div *ngIf="row.description" [id]="'collapse'+i" class="collapse" data-parent="#accordion"> <p class="ac-card-text">{{row.description}}</p> <a *ngIf="row.source" class="nav-link text-right p-5" href={{row.source}} target="_blank">Source</a> </div> </div> </div> </div> </div> </div> </div> </div> <div id="detail" *ngIf="selectedDetail"> <div id="detailImg"> <div *ngIf="selectedDetail.img"> <img src="selectedDetail.img"> </div> </div> <div id="detailTxt"> <div class="detail-text-card"> <div> <button >{{selectedDetail.title}}</button> </div> <div *ngIf="selectedDetail.description"> <p>{{selectedDetail.description}}</p> <a *ngIf="selectedDetail.source" href="selectedDetail.source" target="_blank">Source</a> </div> </div> </div> </div> <svg width="100%" height="100%" fill="black" stroke="#fff"> <g id="cursor"> <circle id="cursorCircle" cx="0" cy="0" r="12" stroke-width="3"/> <path id="cursorClose" d="M-25,-25 L25,25 M-25,25 L25,-25" opacity="0" stroke-width="3.5"/> </g> </svg> <!-- <svg width="100%" height="100%" fill="black" stroke="#fff"> <g id="cursor"> <circle id="cursorCircle" cx="0" cy="0" r="12" stroke-width="3"/> <text x="0" y="0" text-anchor="middle" alignment-baseline="middle" font-size="12" fill="black">Open</text> <path id="cursorClose" d="M-25,-25 L25,25 M-25,25 L25,-25" opacity="0" stroke-width="3.5"/> </g> </svg> --> </div> </div> const targetElement = this.el.nativeElement.querySelector('#timeline2-app'); gsap.registerPlugin(ScrollTrigger); const imageSpacing = 100; window.onload = () => { gsap.set('#scrollDist', { width: '100%', height: gsap.getProperty('.cardsGrp', 'height'), onComplete: () => { gsap.set('#timeline2-app, #imgGroup', { opacity: 1, position: 'fixed', width: '100%', height: '100%', top: 0, left: 0, perspective: 1000, }); gsap.set('#timeline2-app .cardsGrp', { position: '', y: (i) => i * imageSpacing, attr: { id: (i: number, t: HTMLElement) => { initImg(i, t); return '.cardsGrp' + i; } } }); gsap.timeline({ defaults: { duration: 1 }, onUpdate: () => { if (gsap.getProperty('#cursorClose', 'opacity') === 1) closeDetail(); }, scrollTrigger: { trigger: '.gsapani', start: 'top -100', end: 'bottom bottom', // start: 'top', // end: 'buttom', scrub: 1, // toggleActions: 'play pause reverse pause', } }) .fromTo('.imgBox', { z: -4000 }, { z: 350, stagger: -0.2, ease: 'none' }, 0) .fromTo('.imgBox .cardsGrp', { scale: 3 }, { scale: 1.15, stagger: -0.2, ease: 'none' }, 0) .to('.imgBox', { duration: 0, pointerEvents: 'auto', stagger: -0.2 }, 0.5) .from('.imgBox .cardsGrp', { duration: 0.5, opacity: 0, stagger: -0.2, ease: 'power1.inOut' }, 0.3) .to('.imgBox .cardsGrp', { duration: 0.3, opacity: 0, stagger: -0.2, ease: 'expo.inOut' }, 0.7) .to('.imgBox', { duration: 0, pointerEvents: 'none', stagger: -0.2 }, 0.72) .add('end'); // .fromTo('.imgBox', { z: -3000 }, { z: 150, stagger: -0.2, ease: 'none' }, 0) // .fromTo('.imgBox .cardsGrp', { scale: 3 }, { scale: 0.5, stagger: -0.2, ease: 'none' }, 0) // .to('.imgBox', { duration: 0, pointerEvents: 'auto', stagger: -0.2 }, 0) // Increased duration // .from('.imgBox .cardsGrp', { duration: 0.4, opacity: 0, stagger: -0.2, ease: 'power1.inOut' }, 0.36) // Increased duration // .to('.imgBox .cardsGrp', { duration: 0.3, opacity: 0, stagger: -0.2, ease: 'expo.inOut' }, 0.6) // Increased duration // .to('.imgBox', { duration: 0, pointerEvents: 'none', stagger: -0.2 }, 0.85) // .add('start'); } }); function initImg(i: number, t: HTMLElement) { const box = document.createElement('div'); box.appendChild(t); const imgBox = document.getElementById('imgGroup'); if (imgBox) { imgBox.appendChild(box); } const tImg = t as HTMLImageElement; gsap.set(box, { pointerEvents: 'none', position: 'absolute', attr: { id: 'box' + i, class: 'imgBox' }, width: tImg.width, height: tImg.height, // overflow: 'hidden', top: '50%', left: '50%', borderRadius: '5%', x: t.dataset['x'], y: t.dataset['y'], xPercent: -50, yPercent: -50, perspective: 500 }); t.onmouseover = () => gsap.to('#cursorCircle', { duration: 0.2, attr: { r: 40, 'stroke-width': 4 } }); t.onmousedown = () => { gsap.to(t, { z: -25, ease: 'power2' }); gsap.to('#cursorCircle', { attr: { r: 40 }, ease: 'power3' }); }; t.onmouseup = () => gsap.to(t, { z: 0, ease: 'power1.inOut' }); t.onmouseout = () => gsap.to('#cursorCircle', { duration: 0.2, attr: { r: 11, 'stroke-width': 3 } }); t.onclick = () => showDetail(t); } function showDetail(t: HTMLElement) { gsap.timeline() .set('#detailTxt', { textContent: t.getAttribute('alt') }, 0) .set('#detailImg', { background: 'url(' + (t as HTMLImageElement).src + ') center no-repeat' }, 0) .fromTo('#detail', { top: '100%' }, { top: 0, ease: 'expo.inOut' }, 0) .fromTo('#detailImg', { y: '100%' }, { y: '0%', ease: 'expo', duration: 0.5 }, 0.2) .fromTo('#detailTxt', { opacity: 0 }, { opacity: 1, ease: 'power2.inOut' }, 0.3) .to('#cursorCircle', { duration: 0.2, opacity: 0 }, 0.2) .to('#cursorClose', { duration: 0.2, opacity: 1 }, 0.4); } function closeDetail() { gsap.timeline() .to('#detailTxt', {duration:0.3, opacity:0}, 0) .to('#detailImg', {duration:0.3, y:'-100%', ease:'power1.in'}, 0) .to('#detail', {duration:0.3, top:'-100%', ease:'expo.in'}, 0.1) .to('#cursorClose', {duration:0.1, opacity:0}, 0) .to('#cursorCircle', {duration:0.2, opacity:1}, 0.1) } document.getElementById('detail')!.onclick = closeDetail; if (ScrollTrigger.isTouch === 1) { gsap.set('#cursor', { opacity: 0 }); gsap.set('.imgBox', { x: 0, y: 0 }); } else { let cursorX = gsap.quickTo('#cursor', 'x', { duration: 0.3, ease: 'power2' }); let cursorY = gsap.quickTo('#cursor', 'y', { duration: 0.3, ease: 'power2' }); targetElement.onmouseenter = function(){ //section.addEventListener("mousemove", mousemoveFunction); //gsap.ticker.add(tickerUpdate) gsap.to('#cursor', { opacity: 1 }) } targetElement.onmouseleave = function(){ //section.removeEventListener("mousemove", mousemoveFunction); //gsap.ticker.remove(tickerUpdate) gsap.to('#cursor', { opacity: 0 }) } targetElement.onmousemove = (e: MouseEvent) => { gsap.to('.imgBox', { rotateX: 8 - e.clientY / innerHeight * 16, rotateY: -8 + e.clientX / innerWidth * 16 }); gsap.to('.imgBox img', { xPercent: -e.clientX / innerWidth * 15, yPercent: 2 - e.clientY / innerHeight * 15 }); cursorX(e.clientX); cursorY(e.clientY); // curser moves on UI }; } };

Cursor working on whole page . i want only one section(class or id ) in page not required whole page for curser