Jump to content

Search the Community

Showing results for tags 'flip'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. Having some trouble getting a Scrolltrigger animation adapting to screen size changes. There are four icons equally spaced across the top of the page using flexbox, which are part of the site's nav. When the page loads, these icons start out scaled up and placed at four corners of the viewport. As the user scrolls down, each icon scales down and moves into place where flexbox has positioned them. This demo I've put together is only a part of the full animation (which also includes photos scrolling by), but is pretty much doing what it should...except that it breaks on viewport resize. I had originally built this with just Scrolltrigger and a regular GSAP timeline, but was struggling with getting the positioning right, due to needing the final position to be dictated by flexbox. So when I learned about Flip, it seemed like a good solution. And I think I'm on the right track, but willing to accept that I'm going about it all wrong. I've tried solutions like this one but just couldn't get it worked out. Appreciate any thoughts anyone has! -- Andrew PS: There is also an animatic that shows what the final animation should do, just to help visualize it.
  2. Hey everyone! I'm currently developing a filter system with GSAP Flip using layers as a transition. I have a problem with the appearance delay, my onEnter appear before the onLeave. https://codepen.io/damienmontastier/pen/vYVWoge Using an official GSAP codepen, I have reproduced the effect I would like: https://codepen.io/damienmontastier/pen/OJBOKOo I think I made a lot of mistakes and lot of stuff impossible, do you have any suggestions? For information, my final version (not the both codepen) is under Nuxt.js and I use nextTick to use the changes related to FLIP. Thanks in advance !
  3. Hi everyone! I'm really enjoying gsap so far, its capabilities are truly spectacular! I'm trying to create an effect of a <div> rotated in the 3d space rotates back to the XY plane while simultaneously slides down to match the position of another <div>. The effect I aim to replicate can be found here, more precisely the image on the computer screen rotating and sliding down. I want to avoid having to use fixed values for the translation and thought about using Flip.fit() for moving the target element into place together with a scrollTrigger. Alas, it seems as if the 3D rotation is not being considered by the function, resulting in an awkward final state for the sliding element. Does anybody have any ideas on what's going wrong and how I could implement this?
  4. Clicking on a button triggers the number of item elements in a container div. I am animating the item elements using gsap flip. When the number of item elements reduces, the container div resizes to become smaller. However this resize happens too quick. While the item elements are animating they appear to be outside the container div which I don't want. I want the container div to resize slowly such that they always contain the item elements inside. I want to green box to always be around the items. I do not want the items over the text as shown in the attached pic.
  5. Thank you for making this great plugin! 🙏 I'm trying to recreate the Shuffle and FLIP example in Svelte but I have run into a problem where it doesn't work when you reparent elements. gsap-flip.mp4 🔗 Svelte REPL https://svelte.dev/repl/0ebcbfc6eacb457f954cee131cc2075c?version=3.49.0 I understand how declarative JavaScript frameworks like Svelte recreate those elements when you change them but I assumed when it came to the FLIP technique that it only cared about the before and after changes based on some identifier like data-flip-id. I made another example using Flipping.js where it works as expected. flip.mp4 🔗 Svelte REPL https://svelte.dev/repl/9f36c3b2a6504f9c9522cc8cf54e10fa?version=3.49.0 Thank you for your help! 😄
  6. Hi, i tried to use, Gsap Flip to filter a grid of elements. The filter is inserted in the page in a fixed position so I can filter the grid from any position of the scroll. The strange thing that happens is that if I filter the grid with the scroll positioned at the bottom of it, the page will be scrolled up. I also tried to give a fixed height to the grid container, to avoid the bug, but the same thing happens. Is it a problem with Flip or am I using it wrong? https://codesandbox.io/s/shy-fire-3j0xc5
  7. Hello! I'm trying to make an accordion for a FAQ with some interesting border decorations. Animating it with pure CSS transitions technically works, but I wanted a smoother animation. Thus, I tried using Flip. However, if you will try going through different elements in codepen example you will notice that the accordion doesn't act as it should - the items jump around, even though it should be just an element height animation. In this case I used max-height to change the item size because it's the only way it can be animated via pure CSS transitions since height alone can't animate between size in pixels and auto (I tried height with Flip, same result). To see how it works with pure css (which is my desired way of movement) just comment out the Flip line from the JavaScript portion and uncomment the transition in .faq-item-container in CSS. This is what I'm getting with Flip when trying to jump between the items. Any advice would be appreciated
  8. Hi all, I am new to gsap and this library has been fantastic so far. I was looking to recreate the following effect where you click an image, and it flips to the corresponding page. https://dribbble.com/shots/17535054-Homepage-Animation-for-Melbourne-Wooden-Showroom After doing a bit of digging, I thought I could use the following demo below as a base to toggle between component states. https://codepen.io/GreenSock/pen/OJzRdBj To start, I thought it would be best to observe how the component would behave when used multiple times within another component, like a list. Here is where I'm at: https://codesandbox.io/s/gsap-flip-react-test-t3odk8?file=/src/App.js I expected there to be some problem with the states, but I'm not too sure why clicking on any of the three list items only triggers a flip from the last item in the list. It would be super helpful if someone could help me with this, or point me in any direction if this is not the ideal way to approach this. Please let me know if I can provide any additional information. Thank you in advance.
  9. I've got a svg-file that I placed (due to responsive reasons) this way: <svg width="100%" height="100%" viewBox="0 0 1000 500" preserveAspectRatio="xMaxYMax slice" class="MAIN">My super duper svg</svg> I want to animate this svg with some kind of event to <svg width="100%" height="100%" viewBox="0 0 1000 500" preserveAspectRatio="xMidYMax slice" class="MAIN">My super duper svg</svg> In other words, the position of the svg changes from "xMaxYMax slice" to "xMidYMax slice" (depending on the aspect ratio of the browser). Is there a way to achieve this? Maybe with FLIP?
  10. Hi everyone, First of all, no need to tell you that the library is just amazing. I just discovered it and was going through the examples. I viewed the vido about the FLIP plugin and I have a question regarding the implementation in React. in Js, it is pretty simple to move element through the dom but i tried to make something similar in React and to be honest, I have no idea on how to move a component from 1 div to another. What I tried is to put the components 2 imes in the code and use a toggle state to show it in one place and remove it in the other but the Flip do not work. I suppose that GSAP consider that they are 2 different components Any guidelines on how to use Flip with React ? In all the samples that I have seen, the elements are moved within a common parent and it works just well For example, how to convert the flip example in this codepen to React? https://codepen.io/GreenSock/pen/ExyzePZ Thanks a lot for your advices. Best regards.
  11. Hi everyone ! I'm having a hard time simply moving a slider into a lightbox with the Flip plugin. All the examples given seem so easy but I must be missing something because the result if somewhat pecular... Thanks for your help
  12. I have an intro animation timeline that works great. The onComplete of this timeline then calls a function that uses Flip.from() to animate my header and brand from fullscreen to a normal top nav bar. After I use Flip.getState() I remove my ".big" class from my header, then use Flip.from(). When I remove the ".big" class from my header, it causes a jump in the animation. Is there a better way for me to accomplish this? I can't figure out how to get rid of the jump.
  13. Selecting a list-item works but doesn’t animate, because GSAP thinks that div._selected has left the DOM as onLeave() indicates. It’s still there, but in a new position. The beforeUpdate() and updated() lifecycle hooks are where I'm getting the state and performing the flip. As an aside, the animation works correctly when the List.vue data changes. 🤷‍♂️ Any idea how to approach this? --- Places.vue <template> <list> <list-item class="place" v-for="place in places" :key="place.id" @click="selectPlace(place)" :selected="place.id === $store.state.places.selected_record_id"> <div class="name">{{ place.name }}</div> </list-item> </list> </template> <script> export default { name: 'places-page', methods: { selectRecord ({ id }) { this.selected_record = id; } } } </script> ListItem.vue <template> <li class="_item" @click="$emit('click')"> <slot></slot> <!-- This is what moves around --> <div class="_selected" data-flip-id="selected" v-if="selected"> </div> </li> </template> <script> export default { name: 'list-item', props: { selected: { type: Boolean, default: false } } } </script> List.vue <template> <ul class="list-control"> <slot></slot> </ul> </template> <script> export default { name: 'list-control', data () { return { state: null }; }, beforeUpdate () { this.$data.state = Flip.getState(gsap.utils.toArray('.list-control [data-flip-id]')); }, updated () { Flip.from(this.$data.state, { duration: 0.8, ease: 'expo.out', simple: true, nested: true, onEnter: elements => { console.log('*** onEnter', elements); }, // When clicking on an item, this thinks that `div._selected` // has left the DOM and didn’t come back. Seems like // a race condition, but unsure how to proceed since the DOM // should be fully `updated` at this point onLeave: elements => { console.log('*** onLeave', elements); } }); } } </script>
  14. Hello there, I'm trying to animate grid items. I have a grid with big items and small items. What I try to achieve : when I click on small items, they will grow with a transition and push other items away to the next space available in the grid. The others items should also have an animation when beeing pushed away. If an item is at the end of a row, it should jump to next row with a animation. What I have so far (see codepen) : I used GSAP to make items grow by changing their grid-column-end and grid-colum-row but for now there's no animation and the others items are jumping to their next position. I've also noticed a small delay when clicking on a small box, why is there this delay? My question : I know it's a complexe animation/behavior to create. Before I dive deeper in this direction, I'd like to know if it's possible to achieve this with GSAP? I've seen some others posts with grid animation questions and @ZachSaucier often redirect people to use FLIP and it's helper function. Is that something that I can achieve with FLIP? Thanks for your help Alex
  15. Hello I'm going to make a digital book like a flipbook. By looking at the tutorials, I was able to make a typical right-to-left example, but the pages are not as soft as the pages of a real book. https://codesandbox.io/s/flipbook-rtl-k8w8f?file=/src/App.js:845-849
  16. GreenSock

    GSAP 3.9 Released

    See the Pen box by GreenSock (@GreenSock) on CodePen. Highlights: Flip Plugin is no longer for members-only! - consider it an early Christmas present from us to you. 💚 CustomEase is now in the public downloads as well (and on the CDN)! 'Tis the season to be jolly. 🎁 Brand new Keyframe options that can drastically reduce the amount of code you must write. If you're used to CSS keyframes, you'll love this. Flip Plugin got a major overhaul and new features including batch() for complex scenarios. FLIP animations for everyone! 🥳 Flip plugin can give you some serious animation superpowers once you learn to think in terms of "FLIP" ("First", "Last", "Invert", "Play"). Here's a demo that explains the technique: See the Pen How GSAP&#39;s Flip Plugin Works by GreenSock ( @GreenSock) on CodePen. Sometimes you'll need to deal with state changes that you can't control, or reparenting of elements. Maybe a thumbnail image needs to transition to fill the viewport with position: fixed, or a grid of elements must get smoothly re-ordered within a flexbox container. This is where Flip Plugin shines! And now it's included in the public downloads and CDN! That's right, Flip Plugin isn't just for Club GreenSock members anymore (but seriously, if you haven't joined yet, what are you waiting for?). And for those who are members, don't worry - we've got something fun coming just for you in the future. Here's an example where a video that's in the flow of text seamlessly transitions into position: fixed in the corner when you scroll far enough: See the Pen Flip Video by GreenSock (@GreenSock) on CodePen. Even when the original position of elements could change - like in this spinning container, FLIP will handle the transition with ease. See the Pen Spinny flipz by GreenSock (@GreenSock) on CodePen. And here's a fan-favorite showing a grid of tiles you can filter by color and Flip smooths everything out: See the Pen Tiles by GreenSock (@GreenSock) on CodePen. Wanna learn about all the nitty-gritty details? Watch this video: New additions to the keyframe syntaxNew additions to the keyframe syntax Keyframes are a great way to animate a target through multiple steps while keeping your code nice and concise. You can think of them as a sub-timeline nested inside a tween Here's a reminder of the existing syntax. gsap.to(".elem", { keyframes: [ {x: 100, duration: 1}, {y: 200, duration: 1, delay: 0.5}, //create a 0.5 second gap {rotation: 360, duration: 2, delay: -0.25} //overlap by 0.25 seconds ] }); New options Percent-based keyframes This familiar syntax will make porting animations over from CSS a breeze! Instead of using delays and duration in the keyframes themselves, you specify the styles you want at certain waypoints during the animation, and just like CSS, if you omit a property from one of the keyframes the value will interpolate across that gap. gsap.to(".elem", { keyframes: { "0%": { x: 100, y: 100}, "75%": { x: 0 }, "100%": { x: 50, y: 50 } }, duration: 2, }) Array-of-values Just define an Array of values and they'll get equally distributed. So simple! And you don't need to make sure the Arrays are equal in length. Plenty of flexibility. gsap.to(".elem", { keyframes: { x: [100, 0, 50], y: [100, 0, 50] }, duration: 2 }) Demos With Object keyframes and Percentage keyframes you can drill down and add different eases into individual keyframes. See the Pen Bounce Party with GSAP keyframes, by GreenSock (@GreenSock) on CodePen. You can even combine multiple easing properties, keyframes and normal tween values. 🤯 gsap.to(".box", { keyframes: { y: [0, 80, -10, 30, 0], ease: "none", // <- ease across the entire set of keyframes (defaults to the one defined in the tween, or "none" if one isn't defined there) easeEach: "power2.inOut" // <- ease between each keyframe (defaults to "power1.inOut") }, rotate: 180, ease: "elastic", // <- the "normal" part of the tween. In this case, it affects "rotate" because it's outside the keyframes duration: 5, stagger: 0.2 }); See the Pen keyframe easing by GreenSock (@GreenSock) on CodePen. And more... GSAP 3.9 also delivers various bug fixes, so we'd highly recommend installing the latest version today. There are many ways to get GSAP - see the Installation page for all the options (download, NPM, zip, Github, etc.). Resources Full release notes on Github Full documentation Getting started with GSAP Learning resources Community forums FLIP Plugin docs More information about keyframes Happy tweening!
  17. Hello! Ill get straight to the point. When flipping first item, it freezes for a split sec, the rest are flipping smooth afterwards. I bet you guys know what's going on there. I also have a side question about overflow. Is it possible to preserve overflow:hidden on container(img-wrap) wile flipping? At the moment image(child of the container being flipped) is visible full height when flipping and at the end of animation overflowing parts is hidden again. Ill explain my end goal so it's more clear what's going on. Clicking on small image it goes to the right column and becomes a big image, current big image moves to the left column. Overflow is important, because the big image will be looping/sliding from bottom to top. Made the pen just to isolate the problem.
  18. First of all love the new Plugin. Have a question tho. In the demo "Smoothly change flex direction" the animation is very fluid. If there is more content after the container on which flip animation was used, there will be significant layout shift, because of the absolute positioning applyed in the Flip options. What is worse the content after goes behind the content of the flipped container. https://codepen.io/martinboykov/pen/JjNXMbg The question is can this be prevented? There are probably few flip techniques posted in this forum prior the release of the plugin. Two of them, not as fluid as the plugin, but nonetheless are getting the job done. https://codepen.io/martinboykov/pen/gOWrjEa
  19. Greetings Everyone, hope you are fine. Please I'm faced with a difficulty. I just created a basic sveltekit typescript template project. Immediately installed gsap with flip plugin. opened index.svelte and imported flip plugin as follows import { Flip } from 'gsap/Flip'; and compiled the application and it's failing with the error as shown in the image. I've been unable to resolve it for close to a day now. Please, can anyone help me on how to import gsap flip plugin in sveltekit properly. if I import gsap it functions fine but not the flip plugin. I've tried the solutions outlined here to no avail.
  20. I'm playing around with the GreenSock F.L.I.P plugin and Vue.Js and i stumble on an issue I tried changing the layout with a data property in VueJs instead of a class toggle But I don't know if it could works and why what I have done doesn't Could someone explain why is it so ?
  21. GreenSock

    GSAP 3.7 Released

    GSAP 3.7 is here! Here are some of our favorite bits... Percentage based position parameter options for timelines Better support for SVG elements with Flip plugin. Easily scope animations to your components! New scoped selector - gsap.utils.selector() Optional scope parameter added to gsap.utils.toArray() Percentage based position parameter. The position parameter is small but mighty. It's the key to building sequenced animations with precise control over timings, and now it's even more powerful! This update gives us the ability to position animations using percentage values - either relative to the previous tween or animation, or relative to the duration of the animation being inserted. The percent is based on the totalDuration(), so repeats, yoyos and staggers will be factored in. This is such an exciting one because it allows us to tweak durations without affecting positioning! Say we wanted to overlap a tween by half of it's own duration. Until now we would do a little mental math, divide the duration in half and add it to the position parameter as a relative position. tl.to(..., {duration: 2}, "-=1"); But if we were to change the duration, we would also have to update the position parameter Now, with the addition of percentages, we can do this instead: // overlap by half of the inserted tweens duration, -1s: tl.to(..., {duration: 2}, "-=50%"); Alternately, we can position a tween or timeline in relation to the most recently-added animation. tl.to(".other", {x: 100, duration: 2}); // insert 25% of the way through the most recently added animation. // In this case - 0.5s into the 2s duration. tl.to(".class", {x: 100}, "<25%"); Or at a percentage from the end of the most recently-added animation, like ">-25%". >-25% is equivalent to <75% tl.to(".other", {x: 100, duration: 2}); // insert 25% of the way from the end of the most recently added animation. // In this case - 0.5s from the end of the 2s duration. tl.to(".class", {x: 100}, ">-25%"); As '+=' and '-=' are always based on the inserting animations total duration, we can even use a pointer to reference the starting point of the previous tween, whilst using the inserting tweens duration as the percentage offset. tl.to(".other", {x: 100, duration: 2}); // insert 50% of the inserting tweens duration from the beginning of the most recently added animation. // In this case - 0.5s from the start of the previous tween. tl.to(".class", {x: 100, duration: 1},"<+=50%"); Powerful stuff! If you want to dig in a bit more, here's a video explainer and some demos to play around with. You'll be a positioning pro in no time! Check it out in action in these demos. Interactive Position Parameter Demo Better support for SVG elements with Flip plugin. Flip plugin has been extended with better support for SVG elements. SVG already has a great coordinate system to work within - but we think this could assist transitions in live data-vis or when animating between states in generative SVG. We'd love to see what you do with this so don't forget to share your demos with us! In the meantime, here's a simple example Easily scope your animations Modern front end dev is all about encapsulated components, but scoping animations to each individual component can be tricky. React devs, for example, often find themselves in "ref Hell" creating a ref for each and every element they want to animate. Wouldn't it be nice to just use classes and selector text that's limited to your component instance? gsap.utils.selector() With gsap.utils.selector() you can grab descendant elements from the selected element. It's similar to jQuery.find() This is great for components because you can create a scoped selector for that component's main container element and then use that to select descendants. It's similar to calling .querySelectorAll() on that element – rather than on the document – except with a few added benefits: It returns an Array rather than a NodeList, so you get access to convenient array methods like .filter() and .map(). You can pass a React ref or Angular ElementRef to gsap.utils.selector(). Then when you use the resulting function, it will automatically check for the .current/.nativeElement in case it was re-rendered since creation. // Vanilla let q = gsap.utils.selector(myElement); // or use selector text like ".class" let boxes = q(".box"); // finds only elements with the class "box" that are INSIDE myElement // or plug directly into animations gsap.to(q(".circle"), {x: 100}); // React let el = useRef(); let q = gsap.utils.selector(el); useEffect(() => { // uses el.current.querySelectorAll() internally gsap.to(q(".box"), {x: 100}); }, []); // Angular @Component({ ... }) class MyComponent implements OnInit { constructor(public el: ElementRef) { this.q = gsap.utils.selector(el); } ngOnInit() { // uses this.el.nativeElement.querySelectorAll() internally gsap.to(this.q(".box"), { x: 100 }); } } A common pattern in React is to declare a ref for every element you want to animate, but that can make your code very verbose and hard to read. By using a scoped selector, we only need to use a single ref. Then we can simply select the descendants. gsap.utils.toArray() We've also added an optional, second scope parameter to gsap.utils.toArray() This will find all the descendant elements of myElement with the class of "box": gsap.utils.toArray(".box", myElement) And more... GSAP 3.7 also delivers various bug fixes, so we'd highly recommend installing the latest version today. There are many ways to get GSAP - see the Installation page for all the options (download, NPM, zip, Github, etc.). Resources Full release notes on Github Position parameter article Full documentation Getting started with GSAP Learning resources Community forums Happy tweening!
  22. Okay - because I am so new to GreenSock, I am actually proud of my first little victory here! Thanks for the help with the FLIPPING TUTORIAL to JACK@Greensock (Not sure how to tag someone yet, but Jack posted the Flip tutorial codepen in another thread I was commenting in and it was amazing!) So now my questions remain: OF course there has to be a better way for what I am doing here! What are the better ways to do what I am trying to do with the scroll functionality?? (You will see my "doodoo" variable counting the number of times the function fires, and I am sure there is a much better way than that surely?) **Forgive the use of the "var doodoo" as this is my way of marking my own code with things I know intuitively are not being done "the best way" but are, in fact, doing what I hoped to accomplish, even if it's lucky! 😃 Everything I tried as an alternative, kept running the functions over and over again while I was scrolling so it would reset the animations in a very undesirable way. I am sure there is an elegant solution once I see it, but my experience with .onScroll functionality is novice at best. Is there a better way to detect the NEW HEIGHT that the "must-read-this" div needs to know in order to "move down enough to be seen under the animation?" I assumed that it would have to be calculated in the onComplete function since the height won't be calculated until that animation is complete, right? I would much prefer it all happen at the same time instead of incrementally like it is now, but I can certainly live with what I have created here!! There is always one little flash of it not quite working then presto it works!! I am sure that is my coding CAUSING that somewhere but I couldn't figure it out. Cool points to whoever does see where I have doubled-up something and or omitted something. I bet it's related to number 4 EDIT: added number 6 -- Also the CodePen at the CP site doesn't overlap the newly floated fixed boxes at the top. I would prefer the WWW and YYY boxes wrap their text and just fit together properly whether at codepen or on the forum. Any ideas there? I thought flex: 1 0 auto would do that... maybe I needed flex: 1 1 auto so it would shrink? THANKS FOR ALL THE HELP -- LOVING GREENSOCK!!
  23. Introducing Flip Plugin Flip Plugin lets you seamlessly transition between two states even if there are sweeping changes to the structure of the DOM like re-parenting of elements which would normally cause them to jump to a new position/size. UI transitions that would normally be a nightmare just got remarkably simple to code. Watch the visual walk through video and you'll see why this is not your typical FLIP library. It's called "Flip" because it uses the FLIP (First, Last, Invert, Play) animation technique (coined by Paul Lewis). Resources Full documentation Showcase How-to demos DrawSVG Values Beyond 0-100% DrawSVG now allows you to animate to values beyond the 0-100% range. That means that creating looping/wrapping effects with DrawSVG is even easier! Check out this collection of demos by Craig, a GreenSock moderator and the creator of MotionTricks.com. See the Pen Infinity Symbol Looping by Craig Roblewsky (@PointC) on CodePen. See the Pen Multicolor/target Looping (New DrawSVG) by Craig Roblewsky (@PointC) on CodePen. DrawSVG is one of many Club GreenSock plugins (not in the public downloads or repos). ScrollTrigger snap: "labelsDirectional" When you've got a timeline hooked up to a ScrollTrigger, you've always been able to set snap: "labels" to have it dynamically snap to the closest label, but the new snap: "labelsDirectional" option will take into consideration the direction of scrolling and force it to go to the next label in that direction. So, for example, users aren't forced to drag past the halfway point of sections to have it snap to the next one. It may sound like a small thing, but it can make things feel so much more delightfully intuitive. In the demo below, try changing snap: "labels" for a comparison - notice it'll only snap once you go past halfway? But "labelsDirectional" snaps based on the direction of playhead movement. See the Pen "labelsDirectional" Demo by GreenSock (@GreenSock) on CodePen. Other Improvements and Bug Fixes GSAP 3.6 also has a slew of other improvements and bug fixes so make sure to grab the latest files today!
  24. Hello and apologizing up front, first time posting here ?. Also my first foray into GSAP keep that all in mind. Trying to animate a shape path in an svg logo; attached pen is not the actual logo but it does include a triangle in the real wild I'm wanting to use GSAP3 to just slowly 'spin' the triangle; not rotate it. I included more below if you scroll down to what I'm hoping I can make it look like with a regular just css animation as a demo. THANK YOU ahead of time for any help!
  25. I've been working on reproducing one of my favorite card games in JavaScript and I'm having some problems getting the 3d rotations to work the way I'd like. I'm using TweenLite to flip the cards' divs with rotationX and rotationY, but I can't figure out how to tell when I need to swap out the front and back of the card. Is there a way to detect which side of the card is visible? I've seen it done with CSS like this: http://davidwalsh.name/css-flip, but 'backface-visibility: hidden' doesn't seem to affect objects that are rotated with TweenLite.