How to manage GSAP animation in mobile device

[hybreeder 0 Likes (Newbie)]

Hello,

 

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)"});
        }
        
    });

 

[PointC 8,599 Likes (Superhero)]

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.

 

[hybreeder 0 Likes (Newbie)]

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 ?

[PointC 8,599 Likes (Superhero)]

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});

 

[hybreeder 0 Likes (Newbie)]

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

[PointC 8,599 Likes (Superhero)]

Explain which part? The ternary operator?

 

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

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

 

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.

[hybreeder 0 Likes (Newbie)]

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?

[PointC 8,599 Likes (Superhero)]

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

 

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

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

 

A good article on CSS Tricks

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

 

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

[OSUblake 9,990 Likes (Superhero)]

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); });
  layoutChangedCallback(mql.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