ice-frog
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by ice-frog
-
-
8 minutes ago, ZachSaucier said:
Why not adjust the CSS as necessary instead of rotating the container?
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
-
8 minutes ago, ZachSaucier said:
ScrollTrigger takes transforms into account when calculating positions for the start and end. So when the parent container is rotated the start and end positions differ.
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.
-
27 minutes ago, ZachSaucier said:
The main issue here is that you can't just rotate a scrollable element and expect it to scroll in the direction of the opposite axis. All the
rotationproperty does is change how an element is visualized, not how it functions (i.e. horizontal scroll rotated 90 degrees won't turn into vertical scrolling). ScrollTrigger has no way of knowing that you're actually trying to use scrolling in the opposite direction because the scroller is still on the same actual axis.If I'm understanding your end goal correction, you will need to change your entire layout to work with the opposite direction (meaning the CSS for your layout), kill off the old ScrollTriggers, and create a new ScrollTriggers with horizontal: false (adjusting the start and end values as necessary). You shouldn't be using
rotationat all.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?
-
2 hours ago, ZachSaucier said:
Hey ice-frog. How are you rotating your scroller element? Can you please try to create a minimal demo for us to take a look at?
Neat animation by the way. I love the visual style!
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:
See the Pen JYpreg?editors=011 by anon (@anon) on CodePen
-
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):
See the Pen ZbrWRq?editors=001 by anon (@anon) on CodePen
-
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 )
See the Pen pjaJRp by bbzz7 (@bbzz7) on CodePen
A simple test：
-
A 12kb Javascript motion engine. Use for animation, physics and input tracking.
Popmotion vs Velocity.js vs Greensock feature comparison：
-
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~
-
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:
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！See the Pen 2a53bbbcd47df627f25ed1b74beb407d by GreenSock (@GreenSock) on CodePen
-
-
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) ?
})
-
thanks jack，now,it works well for me~
-
It worked perfectly for me every time when I tried your code. I know that in one of your previous examples, you were loading a custom JS file that had an old version of TweenLite that was overrideing the one in the new TweenMax, thus it still had those issues that existed in prior versions. Are you sure you're testing it properly? Do I need to do something special to see the problem that you're seeing? I tried about 10 times and it worked perfectly every time.
I recorded the issue about call(),here is the video~
In the vast majority of the time, it( call() ) all worked perfectly in GSAP 1.16.0,
but sometimes there will be some small problems,when timeline reverse, the call() does not perform
I do not know what went wrong~~ here is my record,look at 00:07 and 00:25:
-
really cool tool~
Need help~The scrollTrigger does not work properly when the custom scroller is rotated by GSAP.
in GSAP
Posted
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~