Jump to content
GreenSock

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

Please help me fix this code

Recommended Posts

Can someone please help me fix this code that I found, I would like to use it in my assignment:

 the problem: on zoom in (ctrl+) and zoom out (ctrl-) the carousel goes crazy

 

the code can be found at this address

See the Pen KdxJbP by anon (@anon) on CodePen

 

Any assistance would be greatly appreciated

 

PS post responses here

Link to comment
Share on other sites

Hello zaramarsh, and Welcome to the GreenSock Forum!

 

Im not seeing the issue you seeing. i tested in latest Firefox and Chrome on Windows 7 (64-bit)

  • What browser are you seeing this on?
  • What browser version are you seeing this on?
  • What OS are you seeing this on?

Also zoom is mostly used on mobile or tablet devices. The zoom in the desktop browsers is different from the zoom that is on mobile browsers on tablets and mobile phones.

 

I don't see an instance where desktop users would use the zoom controls on their desktop browser. The desktop browser zoom could make your elements not align right due to teh zooming of the pixels. Each desktop browser like Firefox and Chrome will zoom differently. But again desktop browser zoom is different than mobile pinch and zoom on mobile and tablet devices.

 

In your CSS, there is no need for your .trans3d class since GSAP already has a property called force3D which is automatically set to auto. force3D is part of the CSSPlugin:

 

GSAP CSSPlugin Docs: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

 

force3D

  • As of 1.15.0, force3D defaults to "auto" mode which means transforms are automatically optimized for speed by using matrix3d() instead of matrix(), or translate3d() instead of translate(). This typically results in the browser putting that element onto its own compositor layer, making animation updates more efficient. In "auto" mode, GSAP will automatically switch back to 2D when the tween is done (if 3D isn't necessary) to free up more GPU memory. If you'd prefer to keep it in 3D mode, you can set force3D:true. Or, to stay in 2D mode whenever possible, set force3D:false. See http://css-tricks.com/myth-busting-css-animations-vs-javascript/ for more details about performance.

If you really want to you can just add force3D:true on your tweens. But again force3D us set to auto by default, so you don't need your CSS .trans3d class. You really shouldn't mix transform in your CSS with GSAP. Its best to let GSAP handle your CSS transforms since it will do all the cross browser heavy lifting.

 

Also if you dont want to allow zooming on mobile you can always disable user zoom via the viewport meta tag.

 

:)

Link to comment
Share on other sites

Hey,

 

Just butting in. I did see a funky behavior on Firefox when testing on a Mac. I did not have the time to look into it but, might be platform specific.

 

I'll see if the missus will lend me her Mac over the weekend and have a tinker. No promises, though.

Link to comment
Share on other sites

That codepen uses a VERY old version of TweenMax too - I'd definitely recommend updating. 

  • Like 1
Link to comment
Share on other sites

Removing the trans3d property disrupts the entire code...

Link to comment
Share on other sites

Then just set force3D: true on your elements with the trans3d class, which are also the same elements with the .item class. You don't need that trans3d class, since its best to allow GSAP to control the CSS 2D and 3D transforms properties.

TweenMax.set($item, {force3D:true, transformStyle: "preserve-3d", rotationY:rY * i, z:radius, transformOrigin:"50% 50% " + -radius + "px"});

You add force3D: true and transformStyle: "preserve-3d" to your tween. Then GSAP handles the right prefix to add depending on the browser.

I'm still not seeing that page zoom issue on Desktop, either when I increase or decrease page zoom in latest Firefox or Chrome on PC Windows 7 (64-bit)

 

Also you didn't answer any of the questions above. We need more information on what browser and OS to better help you! :D And like Jack advised to make sure you are using the latest version if GSAP which currently is at 1.18.0

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>

:)

Link to comment
Share on other sites

That Codepen does not work at all in IE 11, the images just line up horizontally stacked on top of each other, then rotate as a group. 

Link to comment
Share on other sites

Just to be clear, GreenSock didn't have anything to do with building that codepen demo. We're not in a position to dissect it, figure out all the inner-workings as well as how to fix it. Perhaps you could contact the author? 

 

If you have a reduced test case and a specific GSAP-related question, we'd be happy to help. 

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