Jump to content
GreenSock

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

GSAP Animations will be accurate in responsive mode?

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?

 

Share this post


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

Share this post


Link to post
Share on other sites

Hi @mikel ,

 

Thanks for your support. 🙂

 

This is something interesting! You mean to say no need to use different codes like media queries for different screens. This code will automatically check and act as per the window screen?

 

 

 

 

Share this post


Link to post
Share on other sites

Hey @bootstrap007,

 

Its not a fake - just simple reality.

Try and check it changing screen size during the animation is running.

 

Happy testing ...

Mikel

 

Share this post


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

Share this post


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

 

 

 

Share this post


Link to post
Share on other sites

It's unclear how you want the ball to behave on various viewport sizes. Use responsive units like vh to animate it responsively.

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×