Jump to content

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

Diagonal movement with bounce

Recommended Posts

So, I'm starting with GSAP and I am stuck at this problem for a long time.

I want the cube to go downwards (not sure if it can go towards a DIV - better for responsive site...), and I want the cube to bounce (dont want to use motionPath - so hard to edit path and to use it...). I know about ease: bounce - but it will "bounce" the cube on that straight line downwards).


gsap.fromTo("#cube", {}, {
      scrollTrigger: {
        trigger: ".laptop",
        scrub: 2,
        start: "350vh 350vh",
        end: "600vh 550vh",
        ease: "",
        duration: 2,
        toggleActions: "restart pause reverse pause",
        markers: false


Link to post
Share on other sites

Yes, i can get it to bounce that way - on the straight diagonal line. 
here, i drew "artistic" picture :)

This is what I have to make. Frist part is cube boucing up-down while going diagonal down (black line). Cube stand on POS. Scrolling down the receipt shows from POS and goes down (easy) and the cube falls on logo on receipt (orange line). And then, third part, cube falls from receipt onto shelf (also bouncing up-down) - orange line.
That is my problem, that bounce. Motion path is too complicated and fiddly to setup precisely...

Sorry to keep bothering you, I am googling and watching documentation and videos... but cant figure it out... 😕


Link to post
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.