ice-frog

Finally, I solved this requirement, I checked and read the source code of ScrollTrigger and found that ScrollTrigger is using getBoundingClientRect ( ) to get the coordinates of the trigger element, I found the key point, I added some code to the _getBounds() function to determine if the scroller parent container is rotating, by reassigning the correct coordinate values and returning them, everything works fine~ I would like to thank gsap, and ScrollTrigger, for making my project a pleasant experience, thanks~

Because lock the phone screen and then landscape view the page (actually still vertical, the page will not rotate, although visually horizontal, I do not know if I have made it clear), all the sub-elements have to rotate 90 degrees, or use photoshop to pre-rotate the picture and other elements, and then re-arrange with css, very tedious. Well, there is certainly no such need on the PC

Thanks, it would be nice if ScrollTrigger could add a parameter for scroller container rotation, because when users browse landscape content on the phone, we can't guarantee that their phone has auto-rotation turned on, it may be locked, in that case, the most convenient way is to rotate the scroller container directly, otherwise we still have to prompt the user to turn on auto-rotation first, and then browse landscape.

Thank you for your reply and explanation, but I have some small questions, although I rotated the scroller, but the actual axial direction of the scroller did not change, only visually, as you said, "scrollTrigger" corresponding to the direction also did not change, but I also did not change the "horizontal" parameter of "scrollTrigger" (always true), then why the "start" and "end" position of the trigger will change it, it will always maintain the horizontal direction corresponding to it?

Thank you very much for your enthusiasm, ZachSaucier~ Here's my minimal demo. When your window is landscape (window.innerWidth>window.innerHeight), everything works fine. Try to resize your window, when your window is vertical (window.innerWidth<window.innerHeight), the error occurs, you can see that the position of "markers" is also misplaced.

Thank you very much for your enthusiasm, ZachSaucier~ Here's my minimal demo. When your window is landscape (window.innerWidth>window.innerHeight), everything works fine. Try to resize your window, when your window is vertical (window.innerWidth<window.innerHeight), the error occurs, you can see that the position of "markers" is also misplaced.

I turned on the "markers" option and found that the "start" and "end" positions of the elements were normal in landscape, but when I rotated the scroller, they are not positioned properly and seem to be squeezed together. Here is my screenshot normal: abnormal,with the "scroller"element rotated 90 degree~

My project is landscape, 1624x750. But in my project, I have to rotate my scroller depending on whether the phone has auto-rotate enabled or not, e.g., if the user does not have auto-rotate enabled, I have to force the scroller to rotate 90 degrees. Is there any way I can solve this problem? need help~

I found that the latest version (GSAP 2.0.1) of the Draggable(0.16.4) has some compatibility issues with the old ios device (my test device is iphone6 ios 8.4 ): GSAP 1.20.0—2.0.1 ，can not swipe the carousel with ios8: GSAP 1.19.1，Draggable(0.15.0) is working perfect with ios8：

Although there are already many official plugins available, you will still encounter situations where you want to integrate other third-party libraries such as: three.js, p5.js, and other webgl, canvas libraries. So I don’t know if the official can provide a guide to developing a gsap plugin? Thanks~

Hi jack, exactly like you thought, I actually hope GSAP can also add this function, it is indeed a very useful feature, Than to write the custom easing functions, it should be a lot easier，and it also very Useful for character animation , very glad to hear that there are plans to add this feature to GSAP，great~！

I found a new animation library: mo.js http://mojs.io/tutorials/easing/path-easing/ motion graphics toolbelt for the web Fortunately mo· js has the most comprehensive set of easing functions available on the modern web. Besides Base Easing Functions, Bezier Curves and Springs which you can find in other web animation libraries, mo· js has a super precise easing function type - path easing. It allows you to draw your own timing functions. That's what this tutorial is dedicated to, hang tight!

I found on some low-end Android devices, when an element first animation, performance is not good, it will Caton. But when the second run was repeated on more fluent. is this the reason GSAP cached animation data it? If so, whether at the outset it first animation data cache, the cache if the device itself, have any better suggestions, let me in the first run of the animation is relatively smooth some

thanks,jack it's very helpful to me

Hi，jonathan,Thank you very much for you give me some information In fact my purpose is very simple, but I can't find the way to use GSAP to get it, I want to achieve the following effects by using GSAP: CSS effect: <div class='card' style="transform:rotateY(30deg) translateZ(300px) rotateY(-30deg)"></div> and I've tried the following these methods use GSAP: 1: TweenMax.set('.card',{ transform:"rotateY(30deg) translateZ(300px) rotateY(-30deg)" }) in this way，it works perfect in almost time,except '120deg',the card is flip vertical,and I can't use DirectionalRotationPlugin here 2: TweenMax.set('.card',{ rotationY:30, z:300, rotationY:-30 }) in this way the result is Different from the CSS effect 3: TweenMax.set('.card',{ rotationY:'+=30', z:300, rotationY:'-=30' }) in this way the result is Different from the CSS effect too 4: TweenMax.set('.card',{ rotationY:'+=30_cw', z:300, rotationY:'-=30_cw' }) in this way the result is Different from the CSS effect too 5: TweenMax.set('.card',{ rotationY:'+=30_ccw', z:300, rotationY:'-=30_ccw' }) in this way the result is Different from the CSS effect too this is the codepen: http://codepen.io/anon/pen/JYpreg?editors=011