The "scale" property is not working correctly in React

[AlexanderGS]

In the React version, the "scale" property is not working correctly.
When index(activeIndex) is changed, the "scale" property changes its size, but it happens abruptly and intermittently.
I need to achieve a smooth change in the size of the element depending on the "scale" property.
Why does this happen and how can it be solved?

I will be glad to any help  

See the Pen yLrJpXr by AlexanderOkhotnichenko (@AlexanderOkhotnichenko) on CodePen

[mvaneijgen]

A view notes

• The wrap function doesn't care about the index not being correct. There are only 4 items, but if you feed it index = 5 it will wrap back to the first one. 
  • There is a logic issue in your activeIndex === 4, there are 4 items but javascript counts from 0 so this should be 3, or don't bother at all and just keep incrementing the number and let the wrap function handle it for you https://gsap.com/docs/v3/GSAP/UtilityMethods/wrap()
• scale 1 will do nothing, because the scale is 1 on page load. 
• Again no React expert, but you can just call a new tween in your on click function now it will create a new tween on each click. 
  • GSAP calculates tweens records values on page load, so that it only has to do the animation part and not the calculation part when things should animatie. If you're having trouble with this you can set immediateRender: false, then it will wait until it is called to record the values, not pessary in this case 
• I thought in your previous demo you'd used the useGSAP hook which is a replacement for useEffect when working with React, please read our React guide!

 

Hope it helps and happy tweening! 

 

See the Pen ZEZOmrR?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen