HindBeast

Swapping Greensock animations with images whilst responsive

Recommended Posts

Hi guys.

 

I'm a newbie to the forums and would like some help with changing (or disabling) animations to static images whilst in responsive mode. I am currently in the process of finding a web host for my work so examples will be quite bleak, but should be up shortly.

 

Any help would be greatly appreciated.

 

M

Share this post


Link to post
Share on other sites

Not sure what you mean by changing/disabling animations to static images, can you elaborate?

Share this post


Link to post
Share on other sites

Basically, when an animation is active in desktop mode I'd like it to change into a static image when it changes to responsive mode. 

 

Or alternatively...

 

If you can resize the animation to fit inside a mobile browser (without changing to a static image).

Share this post


Link to post
Share on other sites

So you basically want to use animations but site should remain responsive right?

 

Following are couple of threads that show you how you can keep website responsive. You will find many other examples and different approaches but it always depends on how your animations are.

 

 

 

Share this post


Link to post
Share on other sites

Not to entirely remain responsive, but to remain to the values within. I recently came across this post as a possibility:

 

Also, Sarah Drasner's example of responsive animation:

 

My apologies if I can't quite explain it properly, but I what I am aiming for is to shrink the logo that I created with GSAP whilst in responsive mode, to fit to mobile browsers.

Share this post


Link to post
Share on other sites

If you remove all her JavaScript, you can see that her design is responsive anyway. Most probably you are creating logo using SVG which is vector graphics and is responsive by default. It will be best if you post a simple codepen demo showing your problem and expected behavior.

  • Like 3

Share this post


Link to post
Share on other sites

Hi @HindBeast,

 

I am not sure ...
But something like this could look like a solution:

 


Happy tweening!
Mikel

  • Like 3

Share this post


Link to post
Share on other sites
15 hours ago, mikel said:

Hi @HindBeast,

 

I am not sure ...
But something like this could look like a solution:

 


Happy tweening!
Mikel

That's the one @mikel! Many thanks and the same to you @Sahil I will get back to you if I have any problems.

  • Thanks 1

Share this post


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