Why are the "duration" and "ease" properties not working?

[AlexanderGS]

Why are the "duration" and "ease" properties not working?
I checked, the element exists, but the properties are not added to it.

I commented out one line in the styles.scss file, I recommend uncommenting it to see how the element should behave. 

I would be glad to hear your tips!

DEMO

[mvaneijgen]

Your demo link states "Sandbox not found"

[AlexanderGS]

10 minutes ago, mvaneijgen said:

Your demo link states "Sandbox not found"

Changed access

[mvaneijgen]

I think you want us to look at App.js right? (it is always good to include the file that contains your code, someone doesn't have to hunt for the file before they can help) 

 

Your are not tweening anything you're just providing a duration and an ease, but that doesn't do much if there isn't a property that changes. Somehow I can't fork your Codesanbox, but I've added rotation: 360 to the tween and when I click all the 'stars' rotate 360 degrees with your ease and duration. 

 

https://codesandbox.io/p/sandbox/gsap-forked-wwczxg?file=%2Fsrc%2FApp.js

 

Hope it helps and happy tweening! 

 

 

Edited March 12, 2024 by mvaneijgen
Edit codesanbox lik

[AlexanderGS]

20 minutes ago, mvaneijgen said:

I think you want us to look at App.js right? (it is always good to include the file that contains your code, someone doesn't have to hunt for the file before they can help) 

 

Your are not tweening anything you're just providing a duration and an ease, but that doesn't do much if there isn't a property that changes. Somehow I can't fork your Codesanbox, but I've added rotation: 360 to the tween and when I click all the 'stars' rotate 360 degrees with your ease and duration. 

 

Hope it helps and happy tweening! 

 

 

If you look at the App.js file, you will see the nextStep function there. It is designed to change the class name each time the button is pressed (active-1, active-2, active-3, active-4).

In the styles.scss file, I set the "scale" properties under each class.

 &.active-1 {

    transform: scale(1);

  }

  &.active-2 {

    transform: scale(1.24);

  }

  &.active-3 {

    transform: scale(1.68);

  }

  &.active-4 {

    transform: scale(2.015);

  }

Yes, you are correct that the "duration" and "ease" properties shouldn't do anything, but I want to use these properties to make the element smooth.
 

I tried adding the "space" property, but it doesn't work as correctly as I would like it to. Each time the button is clicked, the "space" property starts changing not from the previous value, but from the very beginning, i.e. from the "transform: space(1)" property. But I need to achieve a smooth zooming of the element when clicked, without abrupt clipping.
 

I hope I was able to get my point across.

[mvaneijgen]

There is no half adding a class to an element, it either has the class or it doesn't. Adding classes also seems a bit convoluted to me, just change the scale property directly in the tween. 

 

I don't know how React wants things, so this seemed simpler to me. You can just keep calling a tween and feed it a new number. If in your setup you refresh a tween or have multiple that need to wait to get their values, check out the JS comments I've placed. Hope it helps and happy tweening! 

 

See the Pen ExJybPp?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

Edited March 12, 2024 by mvaneijgen
Updated Codepen url

[AlexanderGS]

I don't know why, but unfortunately this approach doesn't work in React, because there is no smooth "revert" to the original position, but an abrupt cliff occurs
But I'll mark your option as a solution.