wcomp

Ok. Thanks. I responded too quickly without letting your response sink in. Thanks. Works nicely.

My reasons for setting things up in that odd way have to do with the context within which I was using that code. I of course removed that context for the codepen to avoid confusion. But even so, I will admit that there is probably a better way to achieve what I'm going for. Just going through the process now of figuring it out. However, I don't think the question I asked has been really addressed. Is there a way to do what I asked in the original post using GSAP or do you just have to do the math manually and plug in the values? Or was it? I just looked at your pen and it seems to have done just that.....

In this pen you'll notice that when the animation is triggered the top horizontal line and the vertical line move faster than the two small horizontal lines towards the bottom. That makes sense seeing as how the top horizontal line and the vertical line are longer than the bottom two lines but their times are the same. The long lines have to travel a loner distance than the smaller ones but they are both given the same time to do it. I'm curious, is there anyway to "distribute time" evenly across all the lines so that the speed of the top and vertical line are the same as the two smaller lines? The only way I know how to do this is to do do the math: Find the percentage that the smaller lines are of the largest and then take that same percentage of the TIME of the largest and apply that as the time of the smaller ones. Is there an easier way to accomplish this in GSAP? Thanks.

I have always heard that animating the width and height properties of an element in CSS is bad practice because the browser has to do lots of calculating, painting, etc. In certain cases where width and height CSS properties are being animated I can actually see a difference in animation quality when put up against a transform. I'm curious though, does the same rule apply to animating the width and height attributes of an SVG element? Like in the codepen below. Or since its an SVG is that ok? I can't seem to tell any visual difference between animating the width and height and using a scale transform on an SVG parent element. I'm Interested in what the consensus is out there about this. Thanks!

I tried your first suggestion and it solved the issue. Haha. Thanks.

To my knowledge everything is up to date. I always install the updates as soon as they are available. Check out this link: I took a video of the issue on my phone. Both computer are Dell Inspirion. The computer where the issue is not there is a custom build machine with a high end graphics card. So maybe it is the GPU. Is there any way to fix those kinds of issues in the code? Thanks. Oh, and I pulled the codepen up on Android mobile and everything is working just fine.

Ok. Thanks!

It is doing it on my laptop and one of my desktops. I have a more powerful desktop that I use for graphics stuff. I just tried it on that computer and it is actually working fine. So I'm guessing it has something to do with Chrome on smaller screens. I'm not sure.

Here is a better example of the issue: https://codepen.io/Wcomp/pen/abOqyML?editors=1111 In that codepen click on the red circle as the red circle animates either way the right or left side is clipped off. I have edited the image below in Photoshop to illustrate whats going on.

Thanks for the code suggestions. The issue is definitely there. Only in Chrome though. I'm using the latest update of Windows 10 Home. Quite frustrating this is. It's like the RX and RY attributes are being ignored as the right side of the rectangle animates back the the starting position on mouseleave. The weird thing is, when I take a screenshot of the rectangle mid animation and paste it in Photoshop, the problem isn't there. The rounded edges look just fine. Really odd....

I need to change the width of an SVG rect element on hover. Everything works fine on the forward animation but on the reverse animation the right side of the rect element (the side that is moving) seems to be lagging, in effect compromising the curved edges, flattening them out for a moment. This issue happens in Chrome. It is working fine in FireFox. I have isolated the problem in the Codepen below. Hover over the slot and remove the mouse pointer from the slot. The reverse animation is where the problem is. The rect element is inside of an SVG mask element. Might that be the cause of the issue? Codepen is here: https://codepen.io/Wcomp/pen/abOqZZg The SVG markup is as follows: <svg class="slot" xmlns="http://www.w3.org/2000/svg"> <mask maskUnits="userSpaceOnUse" id="bg_mask"> <rect id="slot_rectangle" width="100%" height="100%" rx="10px" ry="10px" fill="#fff" /> </mask> <image preserveAspectRatio="xMidYMid slice" href="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" height="100%" width="100%" mask="url(#bg_mask)" /> </svg>

Does anyone know where I can find examples of page transitions that are similar to these two codepens I made? I am looking for a "zipper" or "ripple" effect but can't seen to figure out a good way to approach it. My code is overly complex. I know there has got to be an easier way. Usage of SVG or JavaScript libraries is totally fine. I would love to look at some examples for inspiration. Thanks for any guidance. different example : https://codepen.io/Wcomp/pen/wvBxraW?editors=1010

I am having trouble getting this to behave. I have an animation that is occurring inside of an element that is also being animated (or changed). The issue is that when the outer element changes size, all of the values for the inner animation are not adjusting to the new size. In the codepen you can see this by clicking the start button and then either resize the output window or click the enlarge button to enlarge the outer div. How do you solve this. How do you tell the tween to pay attention to the values if that change? Thanks.

Does anybody have any links to a Codepen or other demo that demonstrates how to accomplish this using GSAP and vanilla JS? It's super simple really. Just a card that expands when you click it (without transform scaling the contents of the card), then goes back to its original size when you click outside of it. https://codepen.io/tt9/pen/NeZmwO

How would you reverse the direction of this carousel loop without doing any transforms? This is one of the examples for the modifiers plugin. I tried the following but it doesn't loop the items back until all have moved -500. Probably an easy fix. Thanks. TweenMax.to(".box", 5, { ease: Linear.easeNone, x: "-=500", //move each box 500px to left modifiers: { x: function(x) { return x % 500; } }, repeat: -1 });