Jump to content


  • Posts

  • Joined

  • Last visited


1 Newbie

Profile Information

  • Gender

Recent Profile Visitors

2,685 profile views
  1. 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:
  2. 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~
  3. 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~!
  4. 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!
  5. 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
  6. 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
  7. Acccent, thank you, I don't use GSAP‘s native syntax, because I found that I can't use GSAP for continuous transformation of an element, for example: "transform:'rotateY(30deg) translateZ(300px) rotateY(-30deg)" see the codepen (the card1 use the transform property, the card2 use the GSAP's native syntax): http://codepen.io/anon/pen/ZbrWRq?editors=001
  8. I found some 3d transform issue, about the set() method. when I use CSS transform, I got the desired results and when I use the GSAP set() method, the result difference is very big, especially 120 degrees, the elements turn over in the vertical direction I'm using GSAP to make a 3d carousel effect, But the results are not ideal, especially 120 degrees, the card will flip vertical my 3d carousel project: (you can swipe left or right,you will see some card(transform with 120deg) is flip vertical ) http://codepen.io/bbzz7/pen/pjaJRp A simple test: http://codepen.io/bbzz7/pen/NGyPZR
  9. A 12kb Javascript motion engine. Use for animation, physics and input tracking. — http://popmotion.io Popmotion vs Velocity.js vs Greensock feature comparison: http://popmotion.io/guides/feature-comparison
  10. hi,Jonathan,thank for your advices,and here is my answer to your some additional questions: 1.Was the test tested in fullscreen mode in codepen? yes 2.Have you tried exporting the GSAP performance test and running it locally or on a different server where results can not be skewed by codepen's server issues? in fact,I do my custom test demo locally first(not this official demo),I had a bad performance on Android device, And then I do this test(use the official demo) 3.Do you have an example demo of your custom code that you were having performance issues on? ye,this is my project,it's run perfect on iphone6(ios 8.4),bad on Android:http://gerberustour.com/USTour/index.html 4.Also when these test were done, did you have other apps or processes running in the background on your phone? there is no other apps running in the background on my test phone about lagSmoothing(), I use it,and there seems to be no too big effect on my project,thanks~
  11. Why do the test? Because like this guy(Greensock slow on mobile devices:http://greensock.com/forums/topic/7842-greensock-slow-on-mobile-devices/?hl=android#entry34635), I have a serious performance problems on mobile devices of Android,Even the ‘opacity’ animation. I searched the Forums,and readed all related topics, the given advice is basically set force3d and use of x, y,But this does not solve the problem。 Accidental circumstances I try to replace my project to CSS animations, I were found it to be smoother ,the same effect on Andriod device. I wonder whether my code has a problem?So I decided to find an example of the official, to do a test?[/b][/b][/b][/b] The official test: http://codepen.io/GreenSock/full/2a53bbbcd47df627f25ed1b74beb407d/ The Test devices and OS: iphone 6 : ios 8.4 smartisan U1 : Android 4.4.4 ASUS K00U : Android 4.2.2 The test environment: iphone6 : safari、ios webview ( in wechat ) smartisan U1 :chrome 、android webview ( in wechat ) ASUS K00U:chrome 、android webview ( in wechat ) The test result: iphone6 ------------------------------------------- safari (quantiy:300) css : 55~60fps gsap : 25~30fps test video: ----------------------------------------------------------- ios webview ( in wechat )(quantiy:300) css : 55~60fps gsap : 25~40fps test video: ----------------------------------------------------------- smartisan U1 ------------------------------------------- chrome(quantiy:300) css : 5~10fps (Although the FPS value is very low, but the fact is looks smooth,see the video) gsap : 15~20fps (Is not so smooth) test video: ----------------------------------------------------------- android webview ( in wechat )(quantiy:100) css : 60~65fps gsap : 40~45fps test video: ----------------------------------------------------------- ASUS K00U ------------------------------------------- chrome(quantiy:200) css : 7~9fps (Although the FPS value is very low, but the fact is looks smooth,see the video) gsap : 15~25fps (Is not so smooth) test video: ----------------------------------------------------------- android webview ( in wechat )(quantiy:100) css : 65fps gsap : 13~25fps test video: ----------------------------------------------------------- The PS: I am a big fan of GSAP,but I have a serious performance problems on mobile devices of Android, I hope anyone who see this topic, if you have android devices, also can test, and replay to the test results。 Of course, I more hope that the official team can test the android devices, and optimize the performance issues on android devices,thanks!
  12. i want get the dom's current Y value ,in every onUpdate TweenMax.fromTo( dom, 5 , { y:0 } , { y:400, onUpdate:function(){ console.log(this.vars.y) ? console.log(this.target.y) ? })