GSAP Flip is not working

[momo12]

Hi guys

 

GSAP flip is not working as I expected. 

1- First there is an error around the line " imagewr.classList.toggle("reorder");" 

Uncaught TypeError: Cannot read properties of undefined (reading 'toggle')

2- Second why the changes to the .img-wr-2 are not being applied?

3- Why the the class name state changes without any aniamtion?

See the Pen ZEoVeyr by emdesigner-or (@emdesigner-or) on CodePen

[akapowl]

Hey there,

 

Flip appears to be working fine - you are just making some general JS mistakes; e.g. you're creating multiple arrays, and in your forEach loop you are then trying to toggle the class on an array (of arrays), which doesn't work like that. That's what the error that you're encountering is about.

 

Also, on line 11, you've got a comma that will still be causing an unexpected toke error in your console if you had resolved that first problem.

 

Here are some helpful ressources and your example working. Hope it will help.

 

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

 

See the Pen qBYwbZX by akapowl (@akapowl) on CodePen

 

 

[momo12]

19 minutes ago, akapowl said:

Hey there,

 

Flip appears to be working fine - you are just making some general JS mistakes; e.g. you're creating multiple arrays, and in your forEach loop you are then trying to toggle the class on an array (of arrays), which doesn't work like that. That's what the error that you're encountering is about.

 

Also, on line 11, you've got a comma that will still be causing an unexpected toke error in your console if you had resolved that first problem.

 

Here are some helpful ressources and your example working. Hope it will help.

 

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

 

 

 

 

 

Thanks a lot man!