Jump to content
Search Community

Fake physic with bouncing logic ?

jonForum test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Am trying experiment fake physic correlation with math random and bouncing tween.
But am not realy satisfying from the result .
9pvMLgeT_o.gif

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

 

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

https://greensock.com/wiggle-bounce

https://greensock.com/?sub-product=js-custombounce

 

Those are both Club GreenSock member perks.

https://greensock.com/club

 

Happy tweening.

  • Like 2
  • Thanks 1
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.
×
×
  • Create New...