moon999

@GreenSock YES ! This is what I'm talking about. But the first and second also show up to decimals when the numbers increase, but what I'm saying is can you let only the third array increase to decimals? I'd like to read a document about that option, but I couldn't find it on the official site. Where can I find a document on decimals?

@GreenSock Hi, Thank you for solving many problems. But I want to ask you one thing. Above, there is an array among the sources of codepen, which should be represented by a decimal point with the last array of 4.9. How can I represent only the last arrangement in decimal ?

It worked perfectly Thank u!

https://codepen.io/moon5151/pen/VwRObYB Here my codepen @GSAP Helper As shown in the codepen, when the number is counted Up, it looks like an unnecessary decimal point. And the animation runs even before the 'countContainer' start point is reached. The above is the majority of the problems I am experiencing.

I want the numbers to count Up when I reach a certain DOM when scrolling. But I can't.. I know there's a problem with my code, but I don't know how to fix it. [problem] 1. I don't see the start, end marker of the DOM set as a tracker. Even if it is seen, it is seen a place the is not related to the area. 2. The animation runs before the trigger element is even reached Here my code (And I'm using react base) I need your help import { useRef, useEffect } from 'react'; import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; import { reviewList } from './reviewList'; import RadiusInText from '../common/RadiusInText'; import style from './index.module.css'; gsap.registerPlugin(ScrollTrigger); function ClientReview() { const countEls = useRef([]); const countContainer = useRef(); useEffect(() => { reviewList.forEach((item, index) => { const countEl = countEls.current[index]; gsap.to(countEl, { innerHTML: Math.ceil(Number(item.count)), duration: 4, scrollTrigger: { trigger: countContainer.current, start: 'bottm bottom ', end: 'bottom 50%', markers: true, }, }); }); }, []); return ( <div className={style.container} ref={countContainer}> <RadiusInText content="미니빔에서 작업한 결과들을 데이터로 확인해 보세요!" /> <h3 className={style.title}> 미니빔 서비스를 추천하는 <br /> 고객의 목소리를 들어보세요 </h3> <ul className={style.review_list}> {reviewList.map((item, index) => ( <li className={style.review} key={item.id}> <h3 ref={(el) => (countEls.current[index] = el)} className={style.length}> 0 </h3> <span className={style.title}>{item.title}</span> <p className={style.explain}>{item.explain}</p> </li> ))} </ul> </div> ); } export default ClientReview;