Jump to content
GreenSock

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

Scroll Magic animation but only on mobile

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.

 

thanks

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

Link to comment
Share on other sites

Hi, 

 

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;
  console.log(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});
  }

http://codepen.io/GreenSock/pen/GNoaLQ?editors=0011

 

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