Jump to content


Scroll Magic animation but only on mobile

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

You can see from my codepen that I have a logo on my website that fades out as you scroll down the page. I only want to do this on mobile and mobile screen sizes.


I'm using scrollmagic with this also.


Does anyone know how to set this up so the effect will only work on mobile and screen sizes < 768px.


I'm fairly new to JS and so would appreciate baby steps.



See the Pen gLPdBM by i-am-niall (@i-am-niall) on CodePen

Link to comment
Share on other sites



Unfortunately we have to keep our support limited to the GSAP API.

But using this technique from stack overflow  http://stackoverflow.com/a/6850319


you can do something like:


  var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
  var tween;
  if(width < 768) {
      // Create Animation for small screen
    tween = TweenMax.to('#animation', 0.5, {opacity: 0});
  } else {
    tween = TweenMax.to("#animation", 0.5, {rotation:360, transformOrigin:"50px 50px", opacity:1});



Load the page really wide and scroll to make the logo spin


Load the page really small and scroll to make the logo fade out

Link to comment
Share on other sites

  • 2 years later...

ScrollMagic is not optimized to work on mobiles. How are you using it there? The good practice is to turn off complex scroll animation on mobile, not the opposite.

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.