danissimo
danissimo's Achievements
1
Reputation
-
Got it, thank you.
-
Here's the screen:
-
Hi Zach, ok, I will create a pen a little later (I'm trying to create a 3d carousel with boots always facing the screen). In the meantime, I have a couple of other questions: if I animate the transform directly is it possible to use a relative construction like this: gsap.to (".carouselBase", {duration:1, transform:"rotateY(-=72deg) translateZ(50vh) rotateY(-=72deg)", ease:"power2.inOut"}); I tried it but it doesn't seem to work. Also I'm wondering is it possible to keep relative units work during animation in this case: gsap.to (".carouselItem", {duration:1, rotationY:"-=72deg", ease:"power2.inOut"}); with CSS: transform: rotateY(144deg) translateZ(60vh) rotateY(-144deg); I mean is it possible to retain this 60vh during animation and while resizing the browser viewport?
-
Hello, is it possible to animate first (or second in CSS tranform paradigm) rotateY in situation like this: transform: rotateY(72deg) translateZ(50vh) rotateY(-72deg);
-
danissimo changed their profile photo -
Thank you, Zach! I'll try.
-
And if you F5 a couple of times?
-
Btw, does my page work on your browsers (turning blue)? And if you reload it a couple of times?
-
I meant my test page loads external css without errors. But my script (now it's in the bottom of the page, as Zach proposed) with CSSRulePlugin still doesn't work. http://digitalcases.ru/2020/ek/Volvo/01/_Test/
-
In that case a page loads with errors only from a local drive, but it does work from a server (web or local). At least I don't see any errors in the Console.
-
Hello Zach, thank you for the answer. Tried that, but unfortunately it didn't help. http://digitalcases.ru/2020/ek/Volvo/01/_Test/
-
I see strange behavior in Chrome: almost every time the script doesn't work. But sometimes, on 1/20, 1/30 reload it does. At the same time it works in the latest Edge (no extensions there except AdBlock). And the percent of working reloads is almost the same in Opera as in Chrome. Could it be any extension that interferes with GSAP? Here's my test files (sorry for not Codepen): html: <!-- Begin Stylesheets --> <!-- Reset --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <!-- Layout --> <link rel="stylesheet" href="styles/layout.css"> <!-- End Stylesheets --> <!-- Begin JavaScript --> <!-- jQuery --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- GreenSock --> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/CSSRulePlugin.min.js"></script> <!-- PrefixFree --> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <!-- Main --> <script src="scripts/main.js"></script> <!-- End JavaScript --> <body> <div class="wrapper"> <div class="pic"></div> <div class="picOverlay"></div> <div class="textWrapper"> <img src="images/1_2.svg" alt="" class="text_1"> <img src="images/3.svg" alt="" class="text_2"> <img src="images/volvo_1.svg" alt="" class="logo"> </div> <div class="overlay"></div> </div> </body> Main.js: $(function(){ gsap.to (CSSRulePlugin.getRule (".overlay"), {duration:3, cssRule:{backgroundColor:"blue"}, delay:0.5}); }); And here's the test link: http://digitalcases.ru/2020/ek/Volvo/01/_Test/
-
Is there any way to disable matrix transformation in the engine? Percentage is a must-have in adaptive design (adaptive banners in my case). Yes, I can change x/y with left/top properties, but when I need to tween rotation or scale and I already have some transforms assigned to my div through css, that transforms become overridden with the tween matrix.
-
ohem: Yep, that's much better, thank you.
-
Sorry for the late reply. Even with Linear Ease there is jitter (and sometimes trash pixels) in animation in Chrome. Here's the video: https://youtu.be/EDjYEzBNHNk And here is the updated (simplified) pen: https://codepen.io/eliio/pen/NdVebJ I've checked other topics and found this is a long story bug in Chrome. https://greensock.com/forums/topic/13875-chrome-49-janky-gsap/page-4
-
Thank you, Classikd, things get really better in FF, but in Chrome and Opera the flickering remains. I tried both css and js approach: CSS: backface-visibility: hidden, transform: translateZ(0); JS: force3D:true, z:0.01 And if I get it right enabling 3d properties increases CPU usage which is vital for banners. Updated Codepen: https://codepen.io/eliio/pen/NdVebJ
