rotating a rect through 360° without using splitText

[Will Simons]

hey all

 

I'm trying to figure out how get a rectangle to do a back- or forward-flip and rotate through 360°. I've come up with a solution but it involves the splitText utility and since I have just the one rectangle/character, I'm wondering if there is a simpler solution. Any thoughts?

See the Pen vYrKGmv by willsi (@willsi) on CodePen

[mvaneijgen]

I see no difference just tweening the .rect directly, am I missing something? If not, hope it helps and happy tweening! 

 

Hold that thought I do see a difference. 

 

See the Pen abKQoMR?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

 

My bad. I could wrap the element in the extra div (this is what the SplitText plugin is also doing) and animate that div 

 

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

[Will Simons]

Cheers, mvaneijgen, really appreciate your speedy and thorough reply.

 

And no, you're not missing anything -- I was overthinking the problem.

 

Will