Jump to content
GreenSock

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

i am trying to put gsap animation to my Images but it doesn't since to be responsive

Recommended Posts

Hi

we have started by creating a landing page for our client,So when the page loads in normal Desktop, everything works perfectly the alignments are as per our requirements. but when opened from a small screen resolution the contents get wrongly aligned. 

 

Please provide your support, Thank you.

See the Pen eqZgpM by dileepkp (@dileepkp) on CodePen

Link to comment
Share on other sites

Hello dileepkp and welcome to the forums!

 

I'm not understanding what you're saying exactly and having trouble with. Are you saying that only one of these images is shown based on the client's browser's window size? And you need only the animation that corresponds with that window size to play?

 

If so, I would detect the client's window size and use a series of if statements or a switch statement to determine which animation to play. 

 

If not, please be more clear in describing your situation. A minimal demo exemplifying your issue would be even more helpful :) 

  • Like 1
Link to comment
Share on other sites

I wonder if you forgot to load CSSPlugin? Or just load TweenMax because that has it included. 

  • Like 2
Link to comment
Share on other sites

Hi Guys, Dileep Kp is part of our team, we are new to GSAP. we are having major issues in terms of Website responsiveness. 

 

we have started by creating a landing page for our client (http://sreejith.31its.com/), So when the page loads in normal Desktop, everything works perfectly the alighnments are as per our requirements. but when opened from a small screen resolution the contents get wrongly aligned. 

 

If you could let us know hoe we can adjust responsivness in GSAP it would be helpful, we tried using Bootstrap and using media queries but still its not getting properly aligned.

 

Please provide your support, Thank you.

Link to comment
Share on other sites

Welcome to the forums. I think this has more to do with your understanding of positioning in CSS than it does issues with GSAP. Maybe reading an article like "Scaling Responsive Animations" can help you even though the article doesn't mention GSAP specifically. 

 

It would be very helpful to us if you reproduced a minimal version of your positioning issues in a CodePen so that we can see the code more easily and it didn't get constantly updated like your live site likely will. You can read about doing so here:

 

 

But from looking at your code, it seems that you have a mix of using top, left, x, y, and xPercent and yPercent. It's generally a good idea to try and stick to animating only one of these pairs because otherwise it can get confusing. 

  • Like 2
Link to comment
Share on other sites

Thank you ZachSaucier For your response, let us check the link. if we were not able to solve the issue from the given document, we will import the miniature model of the issue in the project in Codepen and update you 

 

the code in the live environment is an updated version to show case the client temporarily. will sent the original Code through code pen. thank you & Have a great day.

Link to comment
Share on other sites

Hii guys i have edited the code in codepen window. and you can see to above

 

Link to comment
Share on other sites

I see you have edited it, but it has a lot going on in it. Unfortunately we don't have the time to do it for you. Is there a particular aspect about it that you're wanting to get help with or direction for?

Link to comment
Share on other sites

Hi Zach,

 

We are actually new to this technology(GSAP), it would be great if you could share us some documentation or any Informations related to GSAP.

 

our main concern right now  is regarding responsiveness. if you can give a breif or let usk know  how we can work on responsiveness using GSAP, it would be really helpful at this time. like if using boostrsap we have xs,md,lg, xl. we tried combining it with gsap but its not working out. Does GSAP has any other tools to overcome this alignment issue?

Link to comment
Share on other sites

You can find the GSAP documentation at https://greensock.com/docs

 

As the link I provided before says, I would recommend that you animate your logo based on its container sizing. There are multiple ways to do that and the best way depends on how you need it to behave. There's no special trick to make it automatically responsive. You need to code it the right way, but as I said I don't have time to do it for you. 

  • Like 2
Link to comment
Share on other sites

Hi @mikel

 

Thank you so much for your help, we are clear with the responsive issue, and we were able to solve the issue. Thanks a Lot.

 

@ZachSaucier Thank you for Helping us out, we are going through the documents, thank you guys for all your support.

 

Happy Tweening... 

 

Regards,

Akshay Manoj

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