Jump to content
Search Community

Scroll Magic animation but only on mobile

niallmckenna 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

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

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