Jump to content
Search Community

GSAP Animations will be accurate in responsive mode?

bootstrap007 test
Moderator Tag

Recommended Posts

Hi All,

I would like to know that GSAP Animations will be accurate in responsive mode? GSAP animations are based on pixel values and using absolute positions. So these pixel values may vary according to the different screen sizes and the result will be also different on screens (the starting point and the end point of animations)?

For example I am working on a MAC and if I have a ball which is falling down to the ground from top ( y: -500) and the ground height is 100px which is in the bottom. I have adjusted the ball's falling down measurement according to the MAC screen but if I'll check the same in a smaller screen or in mobile the bouncing point of the ball will be slightly different than from the ground? Do we have anything in GSAP to sort it out like In CSS we have media queries? Or any other solutions?

 

Link to comment
Share on other sites

Hey @bootstrap007,

 

this could be an option

 


function resizeCheck(){
  var progress = action.progress(); //record the progress so that we can match it with the new tween (jump to the same spot)
  action.kill(); //rewind and kill the original tween.
  bezier().progress(progress); //create a new tween based on the new size, and jump to the same progress value.
 
}

 

See the Pen poveLRo by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

  • Like 2
Link to comment
Share on other sites

7 hours ago, bootstrap007 said:

I have a ball which is falling down to the ground from top ( y: -500) and the ground height is 100px which is in the bottom. I have adjusted the ball's falling down measurement according to the MAC screen but if I'll check the same in a smaller screen or in mobile the bouncing point of the ball will be slightly different than from the ground? Do we have anything in GSAP to sort it out like In CSS we have media queries? Or any other solutions?

Keep in mind that you can use viewport units as of GSAP 3+. 

 

See the Pen jOEYZdW?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

  

Hi @mikel & @ZachSaucier

 

Hope you both are doing well. Thank you so much for the support. You both are awesome! :)

 

I have created a demo CodePen for what exactly I am trying to do here. Kindly check the below codepen. As you can see the ball is falling down from top to the ground correctly on my laptop screen but when I resize the window to a mac resolution then the bouncing point is different from the ground.  After the bouncing the ball is moving upwards and then coming back to the character's head and stay there which is correct in Laptop screen but not correct in other screens like MAC or Mobile. If you resize the window then you will see the ball's settling point keeps varying in different screens not exactly on head of the character. Any solutions for this?  

 

See the Pen ZEYvNeb by bootstrap007 (@bootstrap007) on CodePen

 

 

 

Link to comment
Share on other sites

Hi @ZachSaucier ,

 

Hope you are doing well.

 

Basically I am trying to create a small football juggling character animation here. If you check the below CodePen demo in a laptop then you will see the bouncing of the ball on the ground is correct or ball is pitching on Character's Head is also correct. But if you check this on a bigger screen Mac or in mobile the Pitching point of the ball is not exactly on ground or on the character's head. Kindly check the attached screenshot (character.jpg). I am looking for a solution that how to correct it for all the different screens? Is there anything in GSAP may be something like CSS Media Queries for different screens or any other solution? Hope this explanation, CodePen demo and screenshot will make you much more clear. I just wanna make the animation looks same for all the screens or devices.

 

 

See the Pen gObvbvR by bootstrap007 (@bootstrap007) on CodePen

 

 

 

character.jpg

Link to comment
Share on other sites

Again, use relative units. You will need to play with the values to get it looking the way that you like. You will need to size it and position it based on the viewport like the goalie is. Please try to do it yourself and ask if you have specific questions.

 

5 hours ago, bootstrap007 said:

Is there anything in GSAP may be something like CSS Media Queries for different screens or any other solution?

JavaScript has media queries. They're called matchMedia.

  • Like 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...