Jump to content

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

How to manage GSAP animation in mobile device

Recommended Posts



I am using GSAP for animation, What I am going is when user scrolls the 300 from the top then .signup_header class will active with top:100 which is working in the desktop. Now I have to set top:50px in the mobile device then how can I set for it.? because in the mobile also it's talking 100px.


I mean can we change the animation or CSS for the mobile device?


$(window).bind('scroll', function () {
        if ($(window).scrollTop() > 300) {
            TweenMax.to(".signup_header", 0.1, {css:{display:"block",top:100}, ease: Power4.easeOut});
            TweenMax.set( $('.main_menu'), { boxShadow: "none"});
        } else {
            TweenMax.to(".signup_header", 0.1, {css:{display:"none",top:0}, ease: Power4.easeOut});
            TweenMax.set( $('.main_menu'), { boxShadow: "0px 0px 4px rgba(0,0,0,0.18)"});


Link to comment
Share on other sites

There are numerous threads about responsive animations and media queries. You can use the forum search feature to find them. Here are a few to get you started.


Happy tweening.


  • Like 2
Link to comment
Share on other sites

Thanks for the reply, I checked on google. I haven't found the solution. Even I don't understand where should I start. So I uploaded the question. Can you help me out ?

Link to comment
Share on other sites

I'd probably just set a variable depending on window width. Maybe something like this:


var topScroll = window.innerWidth < 737 ? 50 : 100;

// then add it to your tween
TweenMax.to(".signup_header", 0.1, {css:{display:"block", top:topScroll}, ease: Power4.easeOut});


  • Like 2
Link to comment
Share on other sites

Can you explain to me because, in future, I have to do more responsive

Link to comment
Share on other sites

Explain which part? The ternary operator?


It's a shorthand version of an if/else statement.



It gives you the same result as this:

if (window.innerWidth < 737) {
  topScroll = 50;
} else {
  topScroll = 100;


For more info about responsive design, I'd recommend an in depth reading of those threads I listed above.

  • Like 1
Link to comment
Share on other sites

if and else statement is for the condition?. how can we use the CSS like, margin, padding, position etc in the mobile device?  We can do for the desktop but how we use for the mobile device?

Link to comment
Share on other sites

Sorry, but I'm not really following your question.


It sounds like you may need to read some more about media queries.



A good article on CSS Tricks



If you have any GSAP specific problems or questions, we're happy to help.

  • Like 3
Link to comment
Share on other sites

Here's a helper function to respond to media queries.


function installMediaQueryWatcher(mediaQuery, layoutChangedCallback) {
  var mql = window.matchMedia(mediaQuery);
  mql.addListener(function (e) { return layoutChangedCallback(e.matches); });



Example usage...

installMediaQueryWatcher("(min-width: 600px)", function(matches) {
  if (matches) {
    TweenMax.to(".red", 1, { x: 200 });
    TweenMax.to(".blue", 1, { x: 0 });
  } else {
    TweenMax.to(".red", 1, { x: 0 });
    TweenMax.to(".blue", 1, { x: 200 });



See the Pen WKpmxN by osublake (@osublake) on CodePen


  • Like 5
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.