pis.eu.com Posted December 15, 2020 Share Posted December 15, 2020 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", {}, { x:600, y:700, scrollTrigger: { trigger: ".laptop", scrub: 2, start: "350vh 350vh", end: "600vh 550vh", ease: "", duration: 2, toggleActions: "restart pause reverse pause", markers: false } } Link to comment Share on other sites More sharing options...
mikel Posted December 15, 2020 Share Posted December 15, 2020 Hey @pis.eu.com, Welcome to the GreenSock Forum. Your approach is a little cryptic. If I interpret your intention correctly, it could look like this See the Pen YzGZrbj?editors=0110 by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 4 Link to comment Share on other sites More sharing options...
pis.eu.com Posted December 16, 2020 Author Share Posted December 16, 2020 Thank you for welcome This is the test site: https://www.webmarketing.hr/test/PIS animated/index.html The cube needs to playfull fall from laptop to POS. bouncing up and down while falling down. (later it needs to fall to receipt and then on shelf... for a gsap new-guy - seems like a hard task to do :D) Link to comment Share on other sites More sharing options...
mikel Posted December 16, 2020 Share Posted December 16, 2020 Hey This is a simple static structure with simple logic. In the case of flexible positioning / responsive structure, a complex calculation is necessary, which must always be updated with resize. See the Pen 26878ad7bfb7b2f9350229ba669eb4cf?editors=0110 by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 3 Link to comment Share on other sites More sharing options...
pis.eu.com Posted December 17, 2020 Author Share Posted December 17, 2020 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 comment Share on other sites More sharing options...
mikel Posted December 17, 2020 Share Posted December 17, 2020 Hey, You could try an SVG. See the Pen e19fa3f9bd479c494f9a8552ce3dbbbb?editors=1010 by mikeK (@mikeK) on CodePen Happy bouncing ... Mikel 2 Link to comment Share on other sites More sharing options...
pis.eu.com Posted December 17, 2020 Author Share Posted December 17, 2020 So that is the way Thank you very much for help. Link to comment Share on other sites More sharing options...
mikel Posted December 17, 2020 Share Posted December 17, 2020 Hey, I almost forgot: GSAP has a fantastic wiggle function! See the Pen abmWaxg by mikeK (@mikeK) on CodePen Happy wiggling ... Mikel 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now