Jump to content

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

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.



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



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.