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 });

Hello Everyone! I'm a musician developing a website that will showcase the music I record and I finally finished the animated grid that will house the individual songs. Here is a short little video clip of what I've got so far: https://youtu.be/A1_vvNTHCCU. All the graphics and logos are rough sketches by me but will be professionally done ultimately. The behavior is 99% exactly the way I want but I'm concerned about the implementation. I'm looking to hire a javascript/GSAP expert to look at my code and refactor it as necessary to make it as efficient and fast as possible. Because I'm so new to programming in general, I'm sure there is a better, faster, more efficient way to accomplish all that, I just feel like it's probably gonna take me another year of studying before I know enough to nail it down. If anyone is interested please send me a message. My budget is really whatever it takes to get top notch work, within reason of course. My main priority is getting the best possible implementation of this concept for this site project and also learning along the way. Thanks for y'alls help! Will

Thanks! You're the man!

Can you pass a timeline to a function as an argument? Here is the pen. The animation refuses to play. lol. The code looks like this: var tl1 = new TimelineLite({paused:true}); tl1.to("#playhead", 1, {left:"100%", ease:Linear.easeInOut}) function over(timeline) { timeline.reversed() ? timeline.play() : timeline.reverse(); } function Binding(){ $("#next").on('click', over(tl1) ); } Binding(); Is there a way to do this?

Thanks! Didn't think of that. What would be the benefit of doing it that way as opposed to having it twice in the markup? Just less clutter in the code?

Hey! Yeah. I know I can do it that way. I need the lower one to become visible before the upper one is completely off the page though. How can I do that with one distinct element in my markup? Is that possible?

Is there a way using GSAP to achieve this effect using only one ".bluebox" element? To wrap the element in a sense? The fact that it is coming into view on the lower line before it is fully out of view on the upper line requires that there be two .bluebox elements. Is there a way to do this kind of thing with only one element? Thanks!

That's very cool, a tad over my head though at this point. Lol. And I cant't seem to find much documentation on it. I'll keep messing with it until I have it figured out. Thanks!

Yes! That's exactly it! I'm gonna need to study that code though. Thanks for your help!

Hey! I do have another question though. Is there anyway to round the progress or time values that are returned by the progress() and time() methods? The hover behavior is dependent on the accuracy of those values. I noticed that when I increased the speed of the animation, say to .4 seconds total, the progress values don't always register as being exactly .5 or 1 when they ought to in the sequence. Check this out: The console logs 0.49999999999999983 when it should be right on 0.5. This prevents the hover animation from behaving like it should. I fixed it by changing progress() to time() but even then I had to add >= .6 because the console is logging 0.6000000000000002 instead of right on 0.6. Like this: Is there any way to round the precision of the progress() and or time() methods so that they fall where they should? Also which do you think would be better suited for this task, progress() or time()? Thanks!

Figured it out!!!: