Jump to content
Search Community

Swapping Greensock animations with images whilst responsive

HindBeast test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

Link to comment
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).

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

 

 

 

Link to comment
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:

 

See the Pen waXKPw by sdras (@sdras) on CodePen

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.

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