Jump to content

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

Fake physic with bouncing logic ?

Recommended Posts

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?
            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')
            .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.



Link to comment
Share on other sites

It would be great if you could start providing a simplified demo with your questions instead of a screen grab and wall of code. Thanks.


That being said, check out CustomWiggle and CustomBounce




Those are both Club GreenSock member perks.



Happy tweening.

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

ho thanks , CustomBounce and wiggle-bounce seem to be what am searching for , thanks for the fast answer i will study this !

I will also look if am able to make a simple demo with my customs API.

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.