anasuddin

Really cool @creativeocean

Thanks Zach, And will make sure to fork next time. Thanks

Hey @ZachSaucier Thanks for the above, and I will definitely checkout the article, I had to quickly whip up the example as it was part of a larger project. We are using the scrollTrigger plugin to trigger the animation. I have updated the codepen so that the each face of the cube keeps its original size of 300x250, however when i do the final rotation, the animation causes the cube to translate along with the rotation. Is there a reason for this behavior? https://codepen.io/auddin-the-reactor/pen/xxRpVZo Thanks

I created a 3D cube using Css transform. I am trying to flip between sides of the cube. When I do a rotation on the Y axis, it rotates correctly. However, a rotation on the X or Z axis causes the Y axis to rotate as well. The main goal is to have a 3D cube rotation from one face to another, and the rotation should only happen on one axis. Thanks in advance

Hey Zach, Unfortunately I can't get it to work properly in codepen as it won't let me inject a cross domain script into an iFrame. I did get it to work by modifying the ScrollTrigger plugin. When you pass in the 'scroller' option when initializing the plugin, if you pass in something like window.parent it still takes the current window object and not that of the parent. Therefore the scroll gets locked to the iframe window and now the parent window. Not sure if there is a proper workaround for this, but I just modified the plugin library and hardcoded it to look at the parent window. Not an ideal solution, but it works.

I am building out ads using GSAP and ScrollTrigger. The ads are rendered within an iframe (the iframe is not cross domain, it is programmatically generated so no cross domain issues) and I want the ScrollTrigger to use the Parent window to monitor the scrolling action. Is this possible? Here is an example snippet of the code. I have full access to the parent window. ScrollTrigger.create({ trigger: "#hideme", scroller: window.parent, start: "top top", scrub: 1, markers: true })