Jump to content
GreenSock

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

How to manage GSAP animation in mobile device

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

 

Share this post


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

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites

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

Share this post


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

Share this post


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

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites

MANY THANKS ! 

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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×