Jump to content
GreenSock

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

Help on iOS with GSAP transforms

Go to solution Solved by retropunk,

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

Hey guys, I refactored a version of Chris Gannon's Cube Dial demo here

 

So far its working fantastic...Desktop (Chrome, Safari, FF) and Android (Chrome)

 

The problem is when I start to test on iOS only...

When the cubes start to rotate the get cutoff

 

I'm sure there is something I missed...hopefully a fresh pair of eyes can help me find the missing piece.

 

Thanks!

- Patrick

 

 

See the Pen jEgvKR by SnapToPixels (@SnapToPixels) on CodePen

Link to comment
Share on other sites

  • Solution

So I figured out the mistake

 

The culprit seems to be 2 things.

The first one I should know better, I forgot to add the CSS position :(

 

Something with the z property and possibly the z-index...hmm not sure but -100 seemed unnecessary and removing the z property didn't do anything else but seem to fix the issue.

 

Also, is it best practice to keep the values in quotes? Seems like it is. ;)

 

This causes an issue on iOS

TweenMax.set(container, {
  backgroundColor: "#002663",
  width: '300',
  height: '250',
  zIndex: -100,
  z: -400
});

This works great everywhere

TweenMax.set(container, {
  position: 'absolute',
  backgroundColor: "#002663",
  width: '300',
  height: '250',
  zIndex: '-1'
});

I need to make sure I understand this so I will do some more testing and come back with my findings.

5 stars to Chris Gannon for doing what I ALWAYS wanted to do with JS and CSS...no CSS file.

WOOT WOOT!

 

Thanks guys

- Patrick

 

 

 

 

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