TheVesta Posted March 28, 2021 Share Posted March 28, 2021 Hello! Please help me. I have a sample code on Codepen I have the following problem: 1) I clean the Google Chrome browser cache on Android. 2) I open the page and move to the end of the page. 3) All the effects that I applied through GSAP are updated in the visible area. The effect of blinking is created. Please help solve it. P.S. If I just refreshed this page without cleaning the cache, then there will be no problems. See the Pen vYgKmwM by victor_trunov_ (@victor_trunov_) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted March 29, 2021 Solution Share Posted March 29, 2021 Welcome to the forums, @TheVesta. I'm not sure I understand what you're saying - do you have a video? My guess is that you have your code running BEFORE the images download, and since you don't have the sizes set in the HTML or CSS (width/height), the page renders with a zero height/width for those initially and then as they load they populate and alter the layout/position of everything else. I'd recommend setting explicit width/height for your elements to avoid that layout change onload. The main problem may actually be that you're fading in elements BEFORE the images actually load, thus by the time the images load, the elements are already at an opacity of 1, meaning they suddenly appear instead of fading in. Again, the solution would be to wait for those images to load BEFORE you do the fading in. None of this has anything to do with GSAP, just so you know. I hope that helps! 1 Link to comment Share on other sites More sharing options...
GreenSock Posted March 29, 2021 Share Posted March 29, 2021 Oh, and a side note: I strongly recommend avoiding string-based transforms, but instead you should tap into the components for transforms: // not as good transform: "scale(1.2)" // better scale: 1.2 1 Link to comment Share on other sites More sharing options...
TheVesta Posted March 29, 2021 Author Share Posted March 29, 2021 24 minutes ago, GreenSock said: Welcome to the forums, @TheVesta. I'm not sure I understand what you're saying - do you have a video? My guess is that you have your code running BEFORE the images download, and since you don't have the sizes set in the HTML or CSS (width/height), the page renders with a zero height/width for those initially and then as they load they populate and alter the layout/position of everything else. I'd recommend setting explicit width/height for your elements to avoid that layout change onload. The main problem may actually be that you're fading in elements BEFORE the images actually load, thus by the time the images load, the elements are already at an opacity of 1, meaning they suddenly appear instead of fading in. Again, the solution would be to wait for those images to load BEFORE you do the fading in. None of this has anything to do with GSAP, just so you know. I hope that helps! Thank you! You helped me very much! I recently use GSAP, I have difficulty, but it is very interesting for me. Link to comment Share on other sites More sharing options...
TheVesta Posted March 29, 2021 Author Share Posted March 29, 2021 28 minutes ago, GreenSock said: Oh, and a side note: I strongly recommend avoiding string-based transforms, but instead you should tap into the components for transforms: // not as good transform: "scale(1.2)" // better scale: 1.2 Oh, thank you! let transform3d = gsap.utils.toArray('.transform3d') transform3d.forEach((itemTransform3d, index) => { let elemstrokeLight = gsap.to(itemTransform3d, { scrollTrigger: { trigger: itemTransform3d, start: "top 100%", scrub: true, }, transform: 'translate3d(0, 550px, 0) scale(1)' }); }); But how can I be if I have such a code? Link to comment Share on other sites More sharing options...
GreenSock Posted March 29, 2021 Share Posted March 29, 2021 25 minutes ago, TheVesta said: But how can I be if I have such a code? x: 0, y: 550, scale: 1 Is that what you mean? 1 Link to comment Share on other sites More sharing options...
TheVesta Posted March 29, 2021 Author Share Posted March 29, 2021 5 hours ago, GreenSock said: x: 0, y: 550, scale: 1 Is that what you mean? Yes, it's great! Thank you! Link to comment Share on other sites More sharing options...
TheVesta Posted March 29, 2021 Author Share Posted March 29, 2021 But why is it better not to write? transform: 'translate3d (0, 550px, 0) scale (1) Link to comment Share on other sites More sharing options...
GreenSock Posted March 29, 2021 Share Posted March 29, 2021 6 hours ago, TheVesta said: But why is it better not to write? transform: 'translate3d (0, 550px, 0) scale (1) Performance - when you use a string like that, it could contain ANY number of transforms all mashed into one long string, so GSAP must apply that to the element and then ask the browser to report the combined transforms as a matrix() or matrix3d() which it then must parse and pull out each component (x, y, scaleX, scaleY, rotation, skewX, skewY, etc.). When you use the components individually, GSAP can skip a lot of that work. Accuracy - matrix decomposition is inherently ambiguous, especially when it comes to rotational values. The same matrix can represent an infinite number of combinations of components, like rotation: 180 is the same as scaleX: -1, scaleY: -1 or rotation: 540 or many others. When you use GSAP's individual components, there are ZERO ambiguities. The values are cached, accurate, and very fast. 2 Link to comment Share on other sites More sharing options...
TheVesta Posted March 29, 2021 Author Share Posted March 29, 2021 Thank you for explained to me. These are very valuable knowledge. I am glad that I use GSAP and there is good support ? 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now