Jump to content
GreenSock

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

Search the Community

Showing results for tags 'physics'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Product Groups

  • Club GreenSock
  • TransformManager

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 18 results

  1. Hi! I'm trying to build an interactive balancing scale where the user can drag and drop 12 coins in the bowls in order to have the scale tilt left or right (this is for a puzzle for which I will apply the logic/math at a latter stage). The svg-image has a hidden rectangle - a "drop area" - just above each bowl. I register which "drop area"/bowl a coin is dropped into. If a coin is dropped outside of the "drop areas"/bowls, it goes back to it's initial position. The parts/requirements I need help with: When a coin is dropped in a "drop area" I want it to fall down and land on top of the bowl below (not keep falling out of bounds like it does at the moment). Each bowl should be able to contain anywhere from 0 to 12 coins and the coins should somehow stack/pile up in the bowl (coins cannot overlap because the user needs to see each coin's number). A stack should some "unstack" or "unpile" when the user drags a coin away from it. Any ideas or suggestions on how to solve this would be highly appreciated!
  2. GreenSock

    Physics2DPlugin

    Provides simple physics functionality for tweening an object's x and y coordinates (or "left" and "top") based on a combination of velocity, angle, gravity, acceleration, accelerationAngle, and/or friction. It is not intended to replace a full-blown physics engine and does not offer collision detection, but serves as a way to easily create interesting physics-based effects with the GreenSock animation platform. Parameters are not intended to be dynamically updateable, but one unique convenience is that everything is reverseable. So if you spawn a bunch of particle tweens, for example, and throw them into a timeline, you could simply call reverse() on the timeline to watch the particles retrace their steps right back to the beginning. Keep in mind that any easing equation you define for your tween will be completely ignored for these properties. USAGE gsap.to(element, {duration: 2, physics2D: {velocity: 300, angle: -60, acceleration: 50, accelerationAngle: 180}}); See the Pen Physics2D Demo by GreenSock (@GreenSock) on CodePen. Learn more in the Physics2DPlugin documentation.
  3. Sometimes it's useful to tween a value at a particular velocity and/or acceleration without a specific end value in mind. PhysicsPropsPlugin allows you to tween any numeric property of any object based on these concepts. Keep in mind that any easing equation you define for your tween will be completely ignored for these properties. Instead, the physics parameters will determine the movement/easing. These parameters, by the way, are not intended to be dynamically updateable, but one unique convenience is that everything is reverseable. So if you create several physics-based tweens, for example, and throw them into a timeline, you could simply call reverse() on the timeline to watch the objects retrace their steps right back to the beginning. Here are the parameters you can define (note that friction and acceleration are both completely optional): velocity : Number - The initial velocity of the object measured in units per second (or for tweens where useFrames is true, it would be measured per frame). (Default: 0) acceleration : Number - The amount of acceleration applied to the object, measured in units per second (or for tweens where useFrames is true, it would be measured per frame). (Default: 0) friction : Number - A value between 0 and 1 where 0 is no friction, 0.08 is a small amount of friction, and 1 will completely prevent any movement. This is not meant to be precise or scientific in any way, but it serves as an easy way to apply a friction-like physics effect to your tween. Generally it is best to experiment with this number a bit, starting at a very low value like 0.02. Also note that friction requires more processing than physics tweens without any friction. (Default: 0) gsap.to(elem, { duration: 2, physicsProps: { x: {velocity: 100, acceleration: 200}, y: {velocity: -200, friction: 0.1} } });
  4. GreenSock

    Draggable

    #container { margin:0; padding:0; font-family: Signika Negative, Asap, sans-serif; font-weight: 300; font-size: 17px; line-height: 150%; } #container h1 { font-family: Signika Negative, Asap, sans-serif; font-weight: 300; font-size: 48px; margin: 10px 0 0 0; padding: 0; line-height: 115%; text-shadow: 1px 1px 0 white; } #container h2 { font-family: Signika Negative, Asap, sans-serif; font-weight: normal; font-size:30px; color: #111; margin: 18px 0 0 0; padding: 0; line-height:115%; } #container p { line-height: 150%; color:#555; margin: 0 0 10px 0; } #container a { color:#71b200; } #container .normalBullets code { font-size: inherit; color: inherit; font-weight: normal; line-height: inherit; font-family: inherit; } #container .normalBullets li strong { font-size: 110%; } #container .normalBullets li { margin-bottom:8px; } #container .blackBG h1, #container .darkBG h1 { color: #ddd; text-shadow: none; } #container .blackBG p { color: #999; } #container .section { width: 100%; text-align: center; position: relative; padding: 20px; } /* .block was causing conflict with wp theme --- renamed below */ #container .customblock { padding: 10px; text-align: left; position: relative; } #container .blackBG { background-color: black; } #container .lightBG { background-color: #e4e4e4; } #container .subtleDark { color: #999; text-shadow: none; } #container .blackBG p strong { color:#ddd; font-weight: normal; } #container .controls { background-color: #222; border: 1px solid #555; color: #bbb; font-size: 18px; } #container .controls ul { list-style: none; padding: 0; margin: 0; } #container .controls li { display: inline-block; padding: 8px 0 8px 10px; margin:0; } /** CODE **/ #container .code { width: 100%; border: 1px solid #555; padding: 0; margin: 20px 0; } #container .code pre.prettyprint { margin:0; overflow: auto; } #container .codeTitle { color: #aaa; background-color: #111; padding: 8px; font-size:18px; border-bottom: 1px solid #555; } #container code, #scroller code { color: black; font-size: 16px; } #container .blackBG code, #container .darkBG code { /* carl removed color: #ccc; */ } #container pre { font-size: 1.1em; padding:8px; background-color:#333; color:white; border: 1px solid #777; } /** TOSS **/ #container .box { background-color: #91e600; text-align: center; font-family: Asap, Avenir, Arial, sans-serif; width: 196px; height: 100px; line-height: 100px; overflow: hidden; color: black; position: absolute; top:0; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } /** BUTTONS **/ #container .button { display:inline-block; border-radius:8px; border-bottom-width: 2px; box-shadow: inset 0px 1px 0px rgba(255,255,255,0.6), 0px 3px 6px 0px rgba(0, 0, 0, 0.6); cursor:pointer; text-align: center; font-family: Signika Negative, Asap, Avenir, Arial, sans-serif; position:relative; margin: 4px; color:black; } #container .largeButton { padding: 12px 24px; font-size: 20px; margin: 12px 8px; min-width:110px; } .greenGradient { border: 1px solid #6d9a22; background-color: #699a18; background: linear-gradient(to bottom, #8cce1e 0%,#699a18 52%,#639314 53%,#76b016 100%); /* W3C */ text-shadow: 1px 1px 2px #384d16; color:#fff; text-decoration: none; } /** EXPANDABLE POINTS (FAQ) **/ .expPoint, .expList li { list-style: none; line-height: normal; margin: 0 0 0 8px; padding: 6px 4px 4px 24px; position:relative; border: 1px solid rgba(204,204,204,0); font-size: 110%; color: #111; font-weight: normal; } .expPoint, .expContent { font-family: Signika Negative, Asap, sans-serif; font-weight: 300; line-height: 140%; } .expPoint:hover, .expList li:hover { background-color:white; border: 1px solid rgb(216,216,216); } .expContent { height: 0; overflow: hidden; color: #444; margin: 2px 0 0 0; padding-top: 0; font-size:16px; } .expMore { color: #71b200; text-decoration: underline; font-size:0.8em; } .arrow-right { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 6px solid #999; display:inline-block; margin: -4px 8px 0 -14px; vertical-align: middle; opacity:0.8; } .tableCellDesktop { display: table-cell; } .tableCellDesktop img { left: 120px; } @media screen and (max-width: 860px) { .tableCellDesktop { display: block; } .tableCellDesktop img { left: 0px; } } Features Touch enabled - works great on tablets, phones, and desktop browsers. Incredibly smooth - GPU-accelerated and requestAnimationFrame-driven for ultimate performance. Compared to other options out there, Draggable just feels far more natural and fluid, particularly when imposing bounds and momentum. Momentum-based animation - if you have InertiaPlugin loaded, you can simply set inertia: true in the config object and it'll automatically apply natural, momentum-based movement after the mouse/touch is released, causing the object to glide gracefully to a stop. You can even control the amount of resistance, maximum or minimum duration, etc. Complex snapping made easy - snap to points within a certain radius (see example), or feed in an array of values and it'll select the closest one, or implement your own custom logic in a function. Ultimate flexibility. You can have things live-snap (while dragging) or only on release (even with momentum applied, thanks to InertiaPlugin)! Impose bounds - tell a draggable element to stay within the bounds of another DOM element (a container) as in bounds:"#container" or define bounds as coordinates like bounds:{top:100, left:0, width:1000, height:800} or specific maximum/minimum values like bounds:{minRotation:0, maxRotation:270}. Sense overlaps with hitTest() - see if one element is overlapping another and even set a tolerance threshold (like at least 20 pixels or 25% of either element's total surface area) using the super-flexible Draggable.hitTest() method. Feed it a mouse event and it'll tell you if the mouse is over the element. See http://codepen.io/GreenSock/pen/GFBvn for a simple example. Define a trigger element - maybe you want only a certain area to trigger the dragging (like the top bar of a window) - it's as simple as trigger:"#topBar", for example. Drag position, rotation, or scroll - lots of drag types to choose from: "x,y" | "top,left" | "rotation" | "scroll" | "x" | "y" | "top" | "left" | "scrollTop" | "scrollLeft" Lock movement along a certain axis - set lockAxis:true and Draggable will watch the direction the user starts to drag and then restrict it to that axis. Or if you only want to allow vertical or horizontal movement, that's easy too using the type ("top", "y" or "scrollTop" only allow vertical movement; "x", "left", or "scrollLeft" only allow horizontal movement). Rotation honors transform origin - by default, spinnable elements will rotate around their center, but you can set transformOrigin to something else to make the pivot point be elsewhere. For example, if you call gsap.set(yourElement, {transformOrigin:"top left"}) before dragging, it will rotate around its top left corner. Or use % or px. Whatever is set in the element's css will be honored. Rich callback system and event dispatching - you can use any of the following callbacks: onPress, onDragStart, onDrag, onDragEnd, onRelease,, onLockAxis, and onClick. Inside the callbacks, "this" refers to the Draggable instance itself, so you can easily access its "target" or bounds, etc. If you prefer event listeners instead, Draggable dispatches events too so you can do things likeyourDraggable.addEventListener("dragend", yourFunc); Works great with SVG Even works in transformed containers! Got a Draggable inside a rotated/scaled container? No problem. No other tool handles this properly that we've seen. Auto-scrolling, even in multiple containers - set autoScroll:1 for normal-speed auto scrolling, or autoScroll:2 would scroll twice as fast, etc. The closer you move toward the edge, the faster scrolling gets. See a demo here (added in version 0.12.0) Sense clicks when the element moves less than 3 pixels - a common challenge is figuring out when a user is trying to click/tap an object rather than drag it, so if the mouse/touch moves less than 3 pixels from its starting position, it will be interpreted as a "click" and the onClick callback will be called (and a "click" event dispatched) without actually moving the element. You can define a different threshold using minimumMovement config property, like minimumMovement:6 for 6 pixels. All major browsers are supported including IE9+. IE8 lacks hitTest() support. See full documentation here. See our Codepen Draggable Collection here. To get InertiaPlugin (for the momentum-based features), join Club GreenSock today. You'll be glad you did. If not, we'll gladly issue a full refund.
  5. Hi, am trying to tween little bit physic inertia when the mouse move. I don't know if is the good word in english. "inertness" ? My target it when mouse are move, the sprite follow the mouse with inertia on rotation values. But when mouse stop, call a elastic tween to give a physic feeling. The result are not optimal here , and maybe no very performance friendly. If any tweener or math pro can help me on this ? A made a codePen if you try Move mouse and stop it very fast , you will see the feeling am targeting. It not work all time this is also weird, maybe bad code or math logics here. Am no a pro in physic sorry. thanks a lot for any help guys https://codepen.io/djmisterjon/pen/EJzBzV .
  6. Am trying experiment fake physic correlation with math random and bouncing tween. But am not realy satisfying from the result . Do existe some codePen example where poeple emulate fake physic bouncing on ground with timeLine ? I can not get a dynamic result that will more naturally lead to the percussion of the ground. this is how i approche the timeline animation for now. const tl = new TimelineLite({paused:true}); const speed = 1; //? need sync with spine2d need study? if(items){ const ih = 75; // constante items height from size : help math performance tl.addLabel('#itemFocus', 0 ) // start item move and focus to source .addLabel( '#HitItem', 0.6 ) // source hit items and project to target .addLabel( '#TargetHitItem', 0.7 ) // target Hit by items .addLabel( '#ItemFall', 1 ) // items start falling .addLabel( '#ItemHitGround', 2 ) // items hits grounds and bouncing tl.call(() => { source.s.state.setAnimation(1, "atk2", false) }) .to(items.map(it => it.position), 0.5, {x:'+=150', y:(i,it)=>`-=${100+ih*i}`, ease: Back.easeOut.config(1.4) },'#itemFocus') .to(items.map(it => it.scale), 0.5, {x:'+=1', y:'+=1', ease: Back.easeOut.config(1.4) },'#itemFocus') .to(items.map(it => it.scale), 0.3, {x:1, y:1, ease: Back.easeOut.config(4) }) .fromTo(items, 1, {rotation:Math.PI*2},{rotation:()=>Math.randomFrom(0,2,2), ease: Back.easeOut.config(1.4) },'#itemFocus') //HitItem .to(items.map(it => it.position), 0.1, {x:target.p.x ,y:target.p.y-(target.p.height/2), ease: Back.easeIn.config(1) },'#HitItem' ) .to(items.map(it => it.scale), 1, {x:'+=1' ,y:'+=1', ease: Elastic.easeOut.config(1, 0.3) },'#TargetHitItem' ) .to(items.map(it => it.position), 1, {x:(i,it)=>`-=${ih*i}`, y:`-=${target.p.height}`, ease: Expo.easeOut },'#TargetHitItem+=0.1' ) .to(items.map(it => it.scale), 1, {x:1 ,y:1, ease: Expo.easeIn },'#ItemFall' ) .to(items.map(it => it.position), 1, {y:target.p.y, ease: Expo.easeIn },'#ItemFall' ) // fall down // bouncing ground items.forEach(it => { const rx = Math.randomFrom(-20,50); tl.to(it.position, 0.3, {x:(i)=>`+=${rx}`, y:'-=50', ease: Power2.easeOut } ,'#ItemHitGround' ) // items hit gound and start fake Physic .to(it.position, 0.6, {y:target.p.y, ease: Bounce.easeOut },'#ItemHitGround+=0.3' ) // Y .to(it.position, 0.6, {x:`+=${rx*0.6}`,ease: Power2.easeInOut },'#ItemHitGround+=0.3' ) // X }); The physic bouncing start at label `#ItemHitGround`. Maybe i do something wrong with math ? note: am not using any physics engine in my projet, i just want simulate fake physic with easing when i need. thanks
  7. Hey i'm trying to figure out something Say 2 objects are colliding and I'm doing something like TweenLite.to(tiles[0], 2, {physics2D:{velocity:400, angle:0}, onUpdate:checkCollision}); function checkCollision(){ var colliding = Draggable.hitTest(this.target, tiles[5]); if(colliding){ TweenMax.killTweensOf(this.target); } } What i want instead is to update the original tween's velocity/angle to be smaller and not kill the tween. Is that possible or do i have to make a new tween? Thanks!
  8. Hello I'm using Greensock to drag a stack of cards as seen in the code pen, simply drag the top card in the stack and you'll see the rest come along for the ride. My goal however is to have the stack rotate/flop back and forth like it appears to in this screenshot: So basically while dragging around, the stack should move around a bit, as if it were heavy. My guess is the Greensock Physics2D package might come in handy here, but I'm not exactly sure how I would approach using it while a stack is being dragged when the user could drag it in any direction at any time. Any ideas? Thanks!
  9. Hi, Greenies! I'm trying to use Physics2D to do a Sideral Space effect, with this wonderful plugin as stars (small round bubbles). But I don't even know how to get started on using the Plugin. Do I have to define a CSS bubble? Could I do it from starting at the center of the banner to outside? (300x250.) Help me! P.S.: Sorry for the bad English, i`m from Brazil.
  10. Hi every one. What do you think about snow animation into a wheels? See attached picture. Which library can i use?
  11. Hi there, I'm not an animator by trade, but have been tasked with positioning a series of 7 elements across a "canvas" - in this case a bootstrap container (.blob-container). I've recently worked with GSAP, implementing buttons based on http://tympanus.net/codrops/2016/05/11/distorted-button-effects-with-svg-filters/ and have very limited knowledge of it. From the codepen url below would it be possible to position elements from a center position at an angle with GSAP? As such: With a few requirements: - All elements must be keep within the bounds of the container. - On resize it should readjust if needed - If space is not enough, all elements should be scaled accordingly I'm not even sure where to begin to be honest, have tried all sorts of examples from the forum and the webs, but neither is positioning elements on an angle. Thank you so much in advance, if anyone could shed some light on where to start that would be great. Cheers, P.
  12. Hi guys, I'm about to make a game with at catapult/rubberband, somewhat like Angry Birds, but only vertical and not horizontal. You need to hit flying objects that "rains" down. I'm in the research phase right now, and I am thinking about using GSAP with it's Physics 2d, instead of going all out physics and using something like Matter.js. Do any of you have experience in using GSAP for games with Physics? I still haven't decided if I want to use DOM notes or Canvas.
  13. Hey everyone, I recently put together a nifty little site for a local event in town and (of course) I utilized Greensock in my project. I took a demo that I had found and tweaked it so I could create the snowfall effect seen in the hero/background. However, I've noticed that it seems like its slow (performance wise) on certain devices and its gotten me thinking that maybe I can optimized the performance to insure a steady 60fps framerate (as consistently as possible). The codepen URL I provided shows the original fork example I created. http://codepen.io/iansvo/pen/NNVPPj Here is the live website where this code was implemented (sans the transform: scale() on the <div id="snow"></div> element): http://jacksonvillechristmas.com Any and all feedback would be most appreciated. Thanks!
  14. Hey everyone, I was interested in learning more about how to create a physics animation effect, similar to those that I've seen in demos or in live sites (like kairoswatches.com). Specifically, I'm interested in learning more about what goes into the creation of say....a field of star-esque lights that just link and float about behind other things (for instance). I'm not trying to have someone make something for me, but while I am an experienced front-end developer, I find the physics stuff slightly intimidating. In summary, if anyone can recommend some resources/methodologies that would best help me with what I'm trying to achieve I'd appreciate it. If I need to add/provide any other info, just let me know. Thanks!
  15. I was looking if it was possible to animate a curved line between two points so that if one point is dragged the line follows in a natural way. Like pulling a plug from your audio system and place it another place. I know there are possibilities with bezier curves used as path and there is something like 2dphysics. But I want to know if such a thing is possible with GSAP. After long time Google I found an example at http://www.jasondavies.com/animated-bezier/which is pretty much what I mean. If it's possible using GSAP, what are roughly the steps to take? Just found another example: http://codepen.io/ayamflow/pen/HrbKqmight be good start
  16. Hey guys, Im building a product listing page that looks like the product is hanging off a hook on a rail, and its using a carousel plugin to scroll left to right (as if the items were sliding along the rack). What i'm trying to achieve with Tweenmax is a real life type swinging effect. So each item would be very slowly swaying from wind movements, and then if you hover over it the item would swing or sway more. As well as this when you drag the carousel or click next / prev buttons, the items would slide across and "drag" as they would in real life, being anchored at the top of the hook. I've done a simple prototype with css3 but it's just not cutting it! It needs to be better! I'm very new to TweenMax so i'm not even sure if its possible, but if anyone can help or let me know if what I want to achieve is possible that would be awesome! The other thing is that I want it to be kind of dynamic... so each item sways at its own speed or direction so they don't all look the same... Prototype CSS3 example: http://kulas-hagenes-and-kutch8587.myshopify.com/ I've done some searching and found a few examples that are close to what I'm after: http://pieterbraam.nl/swing/ http://codepen.io/jamiejefferson/pen/zjsCl http://jsfiddle.net/rhernando/qTSnC/3/ - missing the image Cheers!
  17. Hello, I would be interested to know if there is a way to dynamically know the rotation that is applied with Physics2D accelerationAngle, or angle in order to rotate the object and seem like its pointing along the animation path. e.x if we have a rocket and we want it to be pointed towards the end of the animation point each each (second/frame) I have set an example here: http://codepen.io/netgfx/pen/nfdBJ What I want to achieve is to be able to rotate the rocket depending on the angle of the animation path. Thanks in advance.
  18. Hi All, I have a pretty specific question in which I have an Object moving along a vector that will eventually end up at a destination point and stop moving. The object in question is an asset that has a 'fly' animation sequence, a 'landing' animation sequence and an 'idle' animation sequence. The Object must move along a straight line coming from a random point on the stage at a fixed velocity. The object will begin to ease when it is exactly 30 frames away from the end point in which it will change into the landing sequence(which takes 30 frames). Once the landing sequence is complete the easing should be rounding down to 0 in which the object has completed its journey and now switches to the 'idle' sequence indefinitely. I have provided a screenshot below demonstrating my issue. Any help will be much appreciated as the math and when to play the landing sequence is giving me the most problems. I am trying to have the process of flying -> landing -> idling be very smooth and natural. The swf is running at 30 fps btw.
×