Jump to content
Search Community

How to manage GSAP animation in mobile device

Narendra Verma 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

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

 

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

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.

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

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.

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

 

  • Like 6
  • Thanks 1
Link to comment
Share on other sites

  • 1 year later...

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...