Paper fold effect with GSAP

[namisuki]

Hi there!

 

I'm trying to achieve the paper folding effect with greensock. in which when the div is clicked it starts animation like a folded paper. I was able to get the animation happen but i'm having problems making the backside of the paper to be animating with the front which makes it look like as if the image is being folded front and the backside of the image is white. Please help me achieve that effect with the attached pen.

 

Thank you,

Nami

See the Pen ebJXxK by namisukichin (@namisukichin) on CodePen

[mikel]

Hi @namisuki,

 

This could be a version ...

 

See the Pen ZVWrGg by mikeK (@mikeK) on CodePen

 

Happy folding ...

Mikel

 

 

[namisuki]

Hi @mikel

 

Thank you for your version. i fiddled around with it sometimes and i got to the below effect (haven't achieved the desired effect yet but this is something i got).

 

Is there a way to set css properties at the middle of an animation? like an onComplete callback function on completion of the first fold? I almost got the desired effect but the front 3 and front 4 was overlapping to the front after the first fold. so what i wanted to do was to set teh background of the front 3 and 4 to white on completion of the first fold so that it looks smoother.

 

See the Pen QzNXGj by anon (@anon) on CodePen

 

Thank you for your help

[mikel]

Hi @namisuki,

 

I'm not sure what you want to achieve.

Try for example a .set with a position parameter: more info here

 

Nice weekend ...

Mikel

 

 

[namisuki]

I'm trying to achieve this example in codedrops: (same exact effect)

 

https://tympanus.net/Development/PFold/index2.html

 

Thank you

[mikel]

Hi @namisuki,

 

A GSAP fork of your reference may look something like this

 

See the Pen NerGPQ by mikeK (@mikeK) on CodePen

 

Happy weekend ...

Mikel

 

 

[namisuki]

8 hours ago, mikel said:

A GSAP fork of your reference may look something like this

 

That looks awesome!! really appreciate your skills!!

 

Great!! Thank you, you too have a great weekend :D