Jump to content
Search Community

Div -> flip and full screen

mechwd test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have been tasked with making multiple divs on click/tap, flip like a card, and then expand to full screen with different content in it.

I found this through my searching on how to do this:

See the Pen WwgQEV by osublake (@osublake) on CodePen

 

but seeing how it was made almost a 2 and a half years ago, I assume there were some changes to the GS libraries. Is there a better/more effecient way to do this effect than the code that is on the codepen?

  • Like 1
Link to comment
Share on other sites

Nah, @OSUblake tends to be at least 4 years ahead of the game, so if that code is 2.5 years old, it's still probably 1.5 years until the rest of the web catches up ;)

 

I don't notice anything in there that's particularly "outdated". Seems like a clever approach to me. Let us know if you run into any trouble. Good luck with the project!

  • Like 4
  • Haha 1
Link to comment
Share on other sites

I'll just have to convert it so it doesn't need babel. lol I'll come back if I need help (which is likely because I don't know how to use GS very well at all. Ive just been tasked with a whole lot of advanced animations, with not a lot of time to do them. Im kinda throwing mud at the wall and seeing what sticks.

Link to comment
Share on other sites

Well, you're in for a treat. Once you wrap your head around the basics of GSAP, you'll find yourself having fun. Don't stress out - it'll probably be easier than you think. Best place to start: https://greensock.com/get-started-js/ and if you wanna get a leg up on all the competition, check out https://css-tricks.com/writing-smarter-animation-code/

 

We're here to help with GSAP-related stuff for sure. 

  • Like 1
Link to comment
Share on other sites

40 minutes ago, mechwd said:

I'll just have to convert it so it doesn't need babel. 

 

That demo doesn't use Babel so you're good. A lot of my demos are configured that way just in case I need to use it.

 

If you find something that uses Babel or TypeScript, you can get the compiled code by adding .js to end of the url. If there is a ? in the url, delete that and anything that follows it.

 

So for a url like this.

See the Pen WwgQEV?editors=0010 by osublake (@osublake) on CodePen

 

Delete the ?editors=0010 part, and add .js.

See the Pen WwgQEV.js by osublake (@osublake) on CodePen

 

 

 

  • Like 5
Link to comment
Share on other sites

So I was able to get it close using the example... but the contents of the cloned is showing backwards (because of the flip). I tried to add a backface-visibility but that caused some animation issues on the close. Im not exactly sure how to solve this. Ideally nothing but the container would be shown, so maybe a quick fade on the .inner contents but for some reason Im having a brain fart on how to do that here. How do you select a objects child inside the tween?

 

Example.

 

See the Pen NLzOEx by cibgraphics (@cibgraphics) on CodePen

Link to comment
Share on other sites

I guess it is working the way I would expect it to work... but the issue now is that when it goes back to original (aka closes), the content just pops in. Trying to make it fade in, but struggling. 

tried 

TweenLite.to(toHero.children, 2, { autoAlpha: 1 });


on the onComplete, but that didn't work. Guess it's just my lack of knowledge about how it's working.

Link to comment
Share on other sites

Yeah, it is indeed tricky to understand what's happening because there are a lot of illusions. I think this is kinda what you're looking for, right?:

 

See the Pen QVBVNm?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Just remember that what LOOKS like it's spinning isn't actually all one piece (with a front and back). It's a clone of the "from" <div> that animates and then immediately gets removed from the DOM after forcing the "to" <div> to be set to visibility:visible. It's a slight-of-hand in a sense. So you can't be fading one in at the same time that the other is fading out because they're not both on the screen at the same time.  

  • Like 4
Link to comment
Share on other sites

  • 2 years later...
On 9/12/2018 at 3:07 PM, GreenSock said:

so if that code is 2.5 years old, it's still probably 1.5 years until the rest of the web catches up ;)

It been a while since this thread had any action.

I assume I should be using the FLIP plugin for this style of animation now?
 

Link to comment
Share on other sites

  • 3 months later...
On 2/18/2021 at 7:50 AM, ZachSaucier said:

That would make it a lot easier :) 

 

The docs for reference to others.

 

Hi there, complete Noob here still trying to learn how flip works. Would it be possible to have the above example rewritten using the Flip plugin? I can't for the life of me work out how to make the card rotate as well as scale

Link to comment
Share on other sites

Hey Stepheno and welcome to the GreenSock forums.

 

37 minutes ago, stepheno said:

I can't for the life of me work out how to make the card rotate as well as scale

The exact transition from up above isn't the most trivial with the Flip plugin because 3D transforms aren't directly supported by the Flip plugin (as stated in the docs for it). With that being said, Flip can handle the sizing and positioning changes for you and you could hook into the onStart callback to fire off a rotation animation as well.

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...