Flip animation

[RRDevs]

 

Hello everyone!

Could you, please, help me with a flip animation.
I was trying to make the hero section I have have a plus here, the contents will be removed when the section is pinned, only the plus will not be removed, the plus will be centered from the left and the center will be centered from the top, then it will be full screen and a section will come out of it.

See the Pen yyBxpZR by Rana-Ahmmed (@Rana-Ahmmed) on CodePen.

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[RRDevs]

Thank you. 
I've never posted before so I didn't understand it.
Now I'm adding some code, hopefully I'll get some good suggestions that will help me complete my task.

[mvaneijgen]

Hi @RRDevs welcome to the forum and thanks for being a club member 🎉

 

Yeah we love seeing a minimal demo, with what have you tried already.  That way thought process and see how we can better nudge you in the right direction.

 

Just pick any of the starter templates above and post back here! 

[RRDevs]

Thank you. 

I have added a demo, I hope you can understand from it what kind of problem I am having and how I can solve it.

[mvaneijgen]

Your demo layout does not represent your screenshot layout, so I'm not sure what it is you want to do completely.

 

You had a lot of CSS in your layout, but I could not see what this does in the demo, there were also a few errors in it, so I've removed it to keep the demo simple. 

 

In the current setup you've tried to add transforms to a <span> element, the CSS spec does not allow display: inline; elements to be transformed, that is just a weird gotcha you have to keep in mind when working with CSS/transforms/animations, I've made it display: block, see the CSS 

 

I've also removed ScrollTrigger for now, this because the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging.  Seen that you are a member now I've also installed GSDevTools a premium plugin you now have access to, to make it much easier to debug your animations!

 

I’ve placed some comments in your JS to better explain things, please be sure to read through them!

 

I hope this already gets you in the right direction, if you have more questions please post a new demo with what you've tried yourself. I also highly recommend forking your Codepens, so that you can keep versions and if anyone else jumps in they can see the progress of the pens easier. 

 

Hope it helps and happy tweening!   

 

See the Pen bNbZGxK?editors=1100 by mvaneijgen (@mvaneijgen) on CodePen.

[Rodrigo]

Hi,

 

Maybe this demo can get you on the right track:

See the Pen yLZMRZY by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[RRDevs]

Hi Rodrigo

I tried the one you gave and it worked very well. It did most of what I wanted but what I want now is the plus that I have after I top it. I want it to become full screen. Is there any way to do this?
If you want, you can see this demo of what I did.

See the Pen VYZNZWq by Rana-Ahmmed (@Rana-Ahmmed) on CodePen.

[Rodrigo]

Yeah, for that you have to create an extra Flip instance that takes care of that, maybe use this consecutive Flips demo:

See the Pen JjVPyxd by GreenSock (@GreenSock) on CodePen.

 

And the approach in this demo for the final state:

See the Pen zxOmZYW by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!