danissimo
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by danissimo
-
-
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 CSStranformparadigm)rotateYin situation like this:transform: rotateY(72deg) translateZ(50vh) rotateY(-72deg); -
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?
-
37 minutes ago, GreenSock said:
I didn't quite understand your response. Are you saying you resolved the issue by using a server to avoid the browser's security restrictions?
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.
-
6 minutes ago, GreenSock said:
If I remember correctly, the styles can't be in external files (security restrictions imposed by the browser). In other words, <style>...</style> NOT <link rel="stylesheet" href="styles/layout.css">
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. -
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:
-
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:
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:
-
Here's the Codepen (yeah, easy and fun 😀)
See the Pen NdVebJ by eliio (@eliio) on CodePen
Plane ease is so unnatural in most cases. I think these jumps are because of svg, will try to change them to bitmaps.
And I suppose these antialiasing problems are due browser rendering. Is there any way to change these settings from script?
-
Here's my example:
http://artquest.ru/temp/avon/container.html (sorry for non-Codepen, learning it yet)
Notice the 1px jump at the end of the text animations (Chrome, FF), also note the antialiasing change (and similar jump) of all the text after "big V" animation starts (most noticeable in FF). Additionally there is a barely visible pulsing of the middle petal lower border.
I think it's all antialiasing problems. Is there any method to avoid it?
If pure css animation is used there's no such problems.
-
Is anyone of you, guys, using GSAP for creating ad templates for sale (for example for Codecanyon)?
Is it possible, any tips or pitfalls?
-
Are there any shortcuts in TransformAroundPointPlugin? Something like TOP_RIGHT or BOTTOM_CENTER as in LiquidStage.
-
Got it. Thank You!
-
I'm trying to pause nested timeline:
prezStartTimeline.call (buttonsHomeOff) .to ([_rootRef.overlay, _rootRef.bottomPlate], 0.5, {autoAlpha:1, ease:Linear.easeNone, onComplete:function():void {backdropLoader.pauseVideo(); _rootRef.backdrop.visible = false;}}) .staggerFromTo ([_rootRef.buttonHome, _rootRef.buttonBack, _rootRef.buttonForward], 0.5, {y:"+=20"}, {y:"-=20", autoAlpha:1, ease:Cubic.easeOut, onComplete:buttonsPrezOn}, 0.1) .add (RAOTimeline); RAOTimeline.addLabel ("slide_01") .staggerFrom ([_rootRef.prezRAO.item_01, _rootRef.prezRAO.item_02, _rootRef.prezRAO.item_03], 0.5, {y:"+=20", alpha:0, ease:Cubic.easeOut, onComplete:buttonsPrezOn}, 0.1) .addLabel ("slide_02") .addPause ("slide_02") .to ([_rootRef.prezRAO.item_01, _rootRef.prezRAO.item_02, _rootRef.prezRAO.item_03], 0.5, {alpha:0, ease:Linear.easeNone}) .to (_rootRef.logoSmall, 0.5, {y:"-=20", autoAlpha:1, ease:Cubic.easeOut}) .staggerFrom ([_rootRef.prezRAO.item_04, _rootRef.prezRAO.item_05, _rootRef.prezRAO.item_06, _rootRef.prezRAO.item_07, _rootRef.prezRAO.item_08], 0.5, {y:"+=20", alpha:0, ease:Cubic.easeOut, onComplete:buttonsPrezOn}, 0.1, "-=0.4")But when I again play child timeline after the pause (.play()), the playhead is already at the end of the child timeline (all objects are already animated to the end values). Looks like the values calculations don't stop at the pause position. Is it a bug or did I miss anything?
-
Hello,
Is it possible to use Bezier and transformAroundCenter plugins simultaneously?
-
That solved the problem. Thank you!
-
Hello,
If I call a function at the end of a timeline, position parameter doesn't work (neither absolute nor relative). Here's the code:
var startupTimeline:TimelineLite = new TimelineLite(); startupTimeline.set (overlay, {_visible:false}) .from (backdrop, 0.3, {_alpha:0, ease:Linear.easeNone}) .staggerFrom ([picBox_1, text_1], 0.3, {_y:"+=10", ease:Cubic.easeOut}, 0.1) .staggerFrom ([picBox_1, text_1], 0.3, {_alpha:0, ease:Linear.easeNone}, 0.1, "-=0.4") .from ([arrowLeft, arrowRight], 0.3, {_y:"+=10", _alpha:0, ease:Cubic.easeOut}, "-=0.2") .staggerFrom ([chooseButton, logo], 0.3, {_y:"+=10", _alpha:0, ease:Cubic.easeOut}, 0.1, "-=0.2") .from (text_2, 0.3, {_y:"+=5", _alpha:0, ease:Cubic.easeOut}, "-=0.2") .from (text_18_plus, 0.3, {_alpha:0, ease:Linear.easeNone}, "-=0.2") .set (backdropOverlay, {_visible:true}) .call (function():Void {switchPortraitsTimer = setInterval (switchPortraits, 2000);}, null, "-=1"); -
How to tween second rotateY?
in GSAP
Posted
Got it, thank you.