Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







Found 10 results

  1. GreenSock

    Flip Plugin

    The Flip Plugin seamlessly animates between states dynamically with minimal code. The video explains more... VIDEO All you need to do is get the initial state using Flip.getState(targets), make whatever changes you'd like to the DOM or styling, and then call Flip.from(state). GSAP handles the rest! Of course like all GreenSock tools, there's a rich API for finessing things and getting exactly the look you want. "FLIP" is an animation technique that stands for "First", "Last", "Invert", "Play" and was coined by Paul Lewis. Here's a demo of how it works: See the Pen How GSAP's Flip Plugin Works by GreenSock ( @GreenSock) on CodePen. Feature highlights Nested transforms? No problem! Most FLIP libraries only calculate basic offsets assuming no transforms beyond x/y, so a scaled parent breaks things. Rotations certainly aren't allowed. GSAP's Flip plugin just works. Set absolute: true to make elements use position: absolute during the flip. This solves layout challenges with things like flexbox and grid. One flip can handle multiple elements and even stagger them. Resize via width/height properties (default) or scaleX/scaleY (scale: true) You get the full power of GSAP under the hood, so you can use any ease, define special properties like onComplete, onUpdate, repeat, yoyo, and even add() other animations with total control of timing, etc. Apply a CSS class during the flip with toggleClass. It'll be removed at the end of the flip. Flip.fit() repositions/resizes one element to fit perfectly on top another (or even a previous state of the same element). It's as easy as Flip.fit(".box1", ".box2"). Add tween properties to make it animate over time, likeFlip.fit(".box1", ".box2", {duration: 1, ease: "power2.inOut", absolute: true}). Compensate for nested offsets, like if a container element is getting flipped along with some of its children and you don't want the offsets to compound (nested: true) Smoothly handles interruptions. Flip one element to another and have them cross-fade (fade: true). For example, a thumbnail image flips to the full-resolution, full-screen image that's a different element completely, but the user just sees the thumbnail seamlessly transition into the full-screen one. Simply set the same data-flip-id attribute on both to match them up. onEnter and onLeave callbacks for when elements enter or leave (like if the flip senses a display: none toggle and there's no matching target to swap), making it easy to elegantly animate on/off elements. Simple example See the Pen FLIP swap element positions by GreenSock ( @GreenSock) on CodePen. Flex example See the Pen Flipping Flexbox by GreenSock ( @GreenSock) on CodePen. Advanced example See the Pen Grid item view with FLIP plugin by GreenSock ( @GreenSock) on CodePen. Learn and see more Want to learn more? the Flip docs are the best place to go. View the Flip showcase View all of the Flip how-to demos Get your hands on the FlipPlugin The FlipPlugin is a bonus plugin for Club GreenSock members ("Shockingly Green" and "Business Green" levels). It's our way of showing our gratitude to those who are fueling innovation at GreenSock. To download the FlipPlugin, just log into your account dashboard and grab the latest version of GSAP. Don't have Club GreenSock? Try the FlipPlugin for free on CodePen! There's a special but fully-functional version of the FlipPluginthat we link to in our demos in our FlipPlugin Collection on CodePen, so feel free to fork any of them and take the FlipPlugin for a spin. Note: the special version of the plugin will only work on the CodePen domain. To find out more about the many benefits of being a Club GreenSock member swing on by the club page and be sure to check out the other premium plugins.
  2. Hey guys, I'm having some weird stacking order issues in Firefox and Safari, maybe someone can put me in the right direction towards fixing it. I have 2 cards to flip, that are inline-block, side by side and have the corners overlapped (on purpose). While they are rotating, one card gets behind the other one for a brief moment until it gets the correct order. This happens in Firefox. Chrome is fine. Also, I can see a different issue in Safari that appeared recently, where rotation is not even visible. This did work a couple months ago and still works in my production code, but not on Codepen now. The stacking issue in Firefox is what really matters to me right now. I tried setting z-indexes, but that didn't help, so I understand it's rendering issue? How can I go around it? Thank you!
  3. Hi there , i want to animate an svg rectangle so it flips one time. Back and front have the same color. when i execute this.Timeline.to(square, 4, { fill: "red", rotationY:180} ) it does the fill, but not the rotation what am i doing wrong ?
  4. Hello ! I'm new using TweenMax. I try to make a slider that flip the image instead of just "sliding". The animation works great, but in order to have some realism, I add perspective on my cards, but the animation is totally broken with it. You can try my CodePen example, and remove/add the perspective to see what I mean. Does someone have an idea ? Thanks !
  5. I'm still very new to flash and greensock. I came across this 3d flip effect with front content and back content. What I wish to achieve is: (1) few images with contents at the back (2) mouseover effect rather than clicking to flip the object/image (3) object will flip back to the original state on mouse leave rather than sticking with back content. AND I have tried creating the 2nd object/image, but whenever I click on any of the object, they got affected and flipped together. Truly have no idea how to edit and fix it. Your helps are much appreciated!! import com.greensock.TimelineLite; import com.greensock.TweenLite; import com.greensock.easing.*; flip1.z = 30; flip1.getChildAt(0).visible = false; flip1.getChildAt(0).rotationY = 180; flip1.addEventListener(MouseEvent.MOUSE_DOWN,cardDown); flip2.z = 30; flip2.getChildAt(0).visible = false; flip2.getChildAt(0).rotationY = 180; flip2.addEventListener(MouseEvent.MOUSE_DOWN,cardDown); function cardDown(e){ flipSelf(e.currentTarget); } function flipSelf(self){ var toRot; if(self.rotationY > 89){ toRot = 0; }else{ toRot = 180; } var timeline = new TimelineLite(); timeline.insert(TweenLite.to(self,0.5,{z:30,ease:Back.easeOut })); timeline.insert(TweenLite.to(self,1.5,{rotationY:toRot,ease:Strong.easeInOut,onUpdate:setFlipSide, onUpdateParams:[self] })); timeline.insert(TweenLite.to(self,0.5,{z:30,ease:Back.easeIn }),0.75); } function setFlipSide(self){ if(self.rotationY > 89){ flip1.getChildAt(1).visible = false; flip1.getChildAt(0).visible = true; }else{ flip1.getChildAt(0).visible = false; flip1.getChildAt(1).visible = true; } if(self.rotationY > 89){ flip2.getChildAt(1).visible = false; flip2.getChildAt(0).visible = true; }else{ flip2.getChildAt(0).visible = false; flip2.getChildAt(1).visible = true; } }
  6. I am trying to use card flipping as part of an animation, and I am following the cool-looking example in the GSAP codepen. However, I noticed that it does not work on IE 10. On IE 10, the cards do flip, but instead of seeing the "back" card you see the backface of the front card. It appears as though there is a problem with the backface-visibility in IE 10. What can I do to make this also work in IE 10? Thanks! http://codepen.io/GreenSock/pen/yzahJ
  7. I have css3/jquery demo( codepen is attached ) which I want to convert to gsap platform. I have built this demo long ago( maybe an year ago ), so it's not very clean and has been built with not the best practices. But until recently worked fine in all major browsers. But after last update, it doesn't work in FF ( v. 35.0.1 ). So maybe I can somehow convert it to gsap. But I do not know even where to start. Maybe somebody can help me? Or even you can point me where to start? Any help would be greatly appreciated! Thank you!
  8. Hello there, As a beginner I'm i went into an issue early and I'm still unable to solve it. Maybe can you help me with it. I'm trying to achieve a card flip effect with my navigation bar, here's a small example of what I try to achieve but I'm unable to make this working. It seems to be a z-index related issue. I really hope you can help me achieving this effect. Kind regards. EDIT /// I tried at one point to achieve this effect with 2 menu div with all my buttons one over the second and it was working fine, but I needed to animate both object directly at the same time, which caused a lot of complicated handling of the animation.
  9. I am attempting to create more 'depth' in a 3d transform to match a CSS transform I currently use. The current greensock transform renders more as a flat card flip than a cube rotate. I have set up a CodePen sample of both the CSS transform and corresponding GreenSock transform side by side. I'm looking to make the greensock version have the same depth as the css version. I'm thinking I need to get some 'skew' properties involved but I am getting no where. Any ideas? Thanks in advance.. (note: I've only have this pen set up for FF to simplify the code) http://codepen.io/stevenmross/pen/jkwHq
  10. 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.