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

[dileepkp]

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

[ZachSaucier]

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  

[GreenSock]

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

[dileepkp]

http://sreejith.31its.com/

 

please check this link ,its shows proper behavior in large screen but shows alignment problem while in small size  

[Akshay Manoj]

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.

[ZachSaucier]

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. 

[Akshay Manoj]

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.

[dileepkp]

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

 

[ZachSaucier]

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?

[Akshay Manoj]

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?

[ZachSaucier]

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. 

[mikel]

Hey @Akshay Manoj,

 

A little help ...

 

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

 

More: 

 

Happy tweening ...

Mikel

 

 

[Akshay Manoj]

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

[dileepkp]

@mikelsweet, yes that's it. Thanks, cheers man!