How get counting number use for scrollTrigger ?

[moon999]

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;

 

[GSAP Helper]

Hi there! I see you're using React -

Proper cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.

 

Since GSAP 3.12, we have the useGSAP() hook (the NPM package is here) that simplifies creating and cleaning up animations in React (including Next, Remix, etc). It's a drop-in replacement for useEffect()/useLayoutEffect(). All the GSAP-related objects (animations, ScrollTriggers, etc.) created while the function executes get collected and then reverted when the hook gets torn down.

 

Here is how it works:

const container = useRef(); // the root level element of your component (for scoping selector text which is optional)

useGSAP(() => {
  // gsap code here...
}, { dependencies: [endX], scope: container }); // config object offers maximum flexibility

Or if you prefer, you can use the same method signature as useEffect():

useGSAP(() => {
  // gsap code here...
}, [endX]); // simple dependency Array setup like useEffect()

This pattern follows React's best practices.

 

We strongly recommend reading the React guide we've put together at https://gsap.com/resources/React/

 

If you still need help, here's a React starter template that you can fork to create a minimal demo illustrating whatever issue you're running into. Post a link to your fork back here and we'd be happy to take a peek and answer any GSAP-related questions you have. Just use simple colored <div> elements in your demo; no need to recreate your whole project with client artwork, etc. The simpler the better. 

[moon999]

See the Pen VwRObYB by moon5151 (@moon5151) on CodePen

 

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.

 

[GreenSock]

You had a typo: 

// bad
start: 'bottm bottom'

// good
start: 'bottom bottom'

You also were loading the GSAP/ScrollTrigger/React files from the CDN as UMD files **AND** importing them as ES Modules which you definitely shouldn't do. That's a bunch of redundancies. You also were defining "class" attributes in JSX which is invalid - you've gotta use className. That has nothing to do with GSAP; it's a React thing. 

 

And you can round the values with snap: 

See the Pen abMryMW?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help? 

[moon999]

It worked perfectly  Thank u!

[moon999]

@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 ?

[GreenSock]

Are you asking now to snap to the closest 0.1?

See the Pen ZEZzowP by GreenSock (@GreenSock) on CodePen

[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]

Just use conditional logic: 

See the Pen bGJGEKr?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Here's the snap info in the docs: 

https://gsap.com/docs/v3/GSAP/CorePlugins/Snap/