Jump to content

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

Search the Community

Showing results for tags 'bounce'.

More search options

  • 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



Found 11 results

  1. Hi guys, I built a page with multiple animations using GSAP and ScrollTrigger, this is the page Open Screenplay. The animations are very good but I need to add transitions between the sections but I don't how I can do it. The transitions that I need to apply are bounce transition like this https://connect-homes.com/process and overlap transition like this http://www.espn.com/espn/eticket/story?page=Dock-Ellis. Thanks in advance.
  2. Hey folks. ? Having a bit of trouble with how to approach this. A client's asked for some x-mas baubles to "drop in all dangly" from the top of the screen, I've made a rough SVG of the structure of the bauble. The 'string' is made of circles (and other shapes, like little ribbons and bells and stuff) instead of a path. I was looking at the physics plugin, (in the attached codepen) But it kinda needs a bit of a bounce ease? And you can't mix physics and eases... Has anyone done anything like this? Any ideas of a good approach?
  3. 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
  4. I was wondering if there should be a config available for Bounce ease as well like the ones that are available in Elastic as well as Back eases. The use-case for example is to control the number of bounces as well as the amplitude, for lack of a better word i.e. the force with which it bounces back everytime it hits the floor. Example: jsFiddle. Thoughts?
  5. Hello, I want to know are there ways to do something similar to this (url below), i wish to use greensock as it need to be on touch device. http://subprotocol.com/system/tree.html Things i want to mimic is dragging the "green leaves" which will also pull the rest(other leaves and branches) along with it, the branches have this pull effect. - if yes, then where should i look at. - if no, can you suggest where else can i look at, definitely not verletjs. and then when u release, the "greens" bounce back to where it is (which i think can be done like https://greensock.com/draggable) thank you!
  6. In my bounce codepen, I am using a `Timeline` to tween `y`. These durations are all different as the bounce distance changes, as the ball loses momentum. I am also tweening `x`, which is a single duration so that the ball travels. I want the `x` duration to be the same as the sum of all the `y` durations. Currently, if I add another bounce to my `y` sequence, it will throw off the `x` duration. Is there a nice way to do this so that my `x` duration just works without me having to manually tightly couple it to the sum of the `y` durations?
  7. Hello GreenSock community, This is my 1,000th post here on the forum so I thought I’d say thank you to all of you. You’re such a fantastic group of friendly, creative people. Your code, questions and demos inspire me every day. I learn just as much by answering questions as I do by asking them so the first thousand has been a wonderful education for me. Thank you all for your participation here in GreenSockLand. Special thanks to Jack and Carl for letting me hang out and talk through 1,000 posts. You guys rock! To commemorate the occasion, I made a new little demo. I’ve been having so much fun lately with CustomEase, CustomBounce and CustomWiggle that I thought they should be the focus of the 1,000 post commemorative demo. Commemorative 1,000 Post Demo: http://codepen.io/PointC/pen/PpqyaO/ Speaking of the new CustomWiggle feature - (shameless self-promotion) – if anyone missed my Wiggle World demo, be sure to check it out. It allows you to interactively play with some of the new wiggle settings. Wiggle World: http://codepen.io/PointC/pen/ZLPdoY/ Thanks again everyone for my first 1,000 posts. I’m looking forward to another thousand. You’re an awesome community. As always, happy tweening to all. - Craig PS If there are any forum lurkers out there who are a little nervous about jumping in, please give it a shot. The GreenSock neighborhood houses a truly special group of people on the web.
  8. Am using gsap inside createjs/canvas if I have a ball, for example, tweening in diagonally, from top left to bottom right, say, with an easing bounce when it hits the bottom of the canvas, the bounce goes up and down, as I want, but also bounces backwards towards the left, when what I want in this case is for the bounce to go to the right. Is there a simple way to achieve that? Thanks
  9. First of all let me say it's a pleasure finding out about GreenSock and I am looking forward integrating your products (Blitmask and TweenMax) to my projects. THE SITUATION IS AS FOLLOWS: I am making a video slot machine games. 4 rows x 5 columns. Each column represents a Blipmask object. I have 5 BIG elements strips (about 42 elements on the strip) and I use Blitmask(blitmask has dimensions width of element x (4 x height of element) and TweenMax to scroll them. 1st column stops after it traveled the distance of 12 elements, 2nd column stops after it traveled the distance of 17 elements and each column after that, 5 elements added. The last column stop after it travelled 32 elements MY PROBLEM: 1) I want as soon as SPIN button is pressed, the 5 blitmasks to start spinning at the same speed 2) At the end of each tween I want a bouce effect that uses only a few frames for it (regardless of the duration of the tween). I am using frames in my tween as duration parameter. So for example the 1st column runs for 100 frames, I want the bounce effect to be the last 10 frames. For the last column that runs let's say X frames I still want the bounce effect to be 10 frames. So easing out to be irrelevant of duration. 3) I want the bouncing/easeOut to be sudden and not smooth. I prefer minimal deacelleration in the end (Imagine a real world slot machine - it stops very sudden) 4) Finally, I want the sliding speed to be the same for all columns. I adjust the duration accordingly to make sure that the stopping of columns will happen at regular intervals. I tried many easing out techniques but nothing seems to work and satisfy ALL the above requirements. If anyone has some suggestions please feel free to help. Thank you for reading this and trying to help
  10. I'm trying to ease an element that is being translated to the left by a percentage amount. Easing doesn't seem nearly as effective as when I'm translating by a pixel amount. Any ideas on what I should do?
  11. Perhaps I'm implementing this wrong, but I'm having issue getting easing animations, such as Bounce, to actually...bounce! Instead, it just slides open. I'm probably implementing it wrong, so if anyone can help, that'd be greatly appreciated $(topArea).animate( { top: "-40px" }, 250, "bounceInOut" );