Leaderboard

Hi @chiho How about this? Best regards Mikel

If it were me, I'd probably not worry about any hover effects and just use a click to open and close the menu on all devices. The reason I say that is detecting touch is not 100% accurate and many touch screens have a mouse too. It's all a bit tricky and seems like more of a headache than it may be worth. I also don't think hover always means intent whereas a click or tap does. Of course, this is just my 2 cents worth. YMMV. In most cases it's best to use a timeline and simply play/reverse on click. Here's a demo that was an answer to another forum question, but shows a menu open and close on click. Others may jump in with their opinions too. Happy tweening.

Thank you, these are great examples and I've got it working now!

Hi @chiho Hmm - or to separate actions ... Best regards Mikel

Actually, the problem just has to do with the nature of rotational/skew values; your math was assuming the horizontal movement would progress at the same rate as the rotational/skew values, but that isn't true. Here's a quick illustration: Notice that if you skew by another 30 degrees, the movement along the horizontal axis accelerates. The interpolation between values isn't linear. It's not a GSAP thing. What I'd probably do is create a separate tween that uses a modifier which sets the skewX based on whatever the "x" value. That'll lock them in perfect sync. Instead of creating 2 tweens on every mousemove event, you can just create one that changes the "progress()" of the "real" tween that does all the work. I think it's more efficient that way. Here's an adjusted demo: Does that help?

Hi @chiho, @Carl has as always the good solution at hand. Finally, @PointC produces eclectic cases. This afternoon I just wanted to test if I still can:

I think the solution here is to calculate the coordinates when you click on the button because where the button is in the viewport is going to determine the precise locations the modal needs to grow from and to. @OSUblake has this great demo where modals grow from the boxes you click on. You can resize the window to change the flow/position of the boxes and the "modal" always animates to and from the right places. He does this by cloning the element and calculating the coordinates on each click.

Hi and welcome to the GreenSock forums, Thanks for the demo. Nice animation. This type of animation (complex sequence) is PERFECT for a timeline. Lots of great demos and videos available here: https://greensock.com/get-started-js Absolute must read / watch: https://greensock.com/position-parameter https://greensock.com/timelinelite https://greensock.com/timelinemax As you can see the syntax for TweenMax tweens and timelines is virtually identical var tl = new TimelineMax({repeat:-1}) tl.from(".chat", 0.7, {x:0, opacity:0, scale:0.1, ease:Back.easeOut}) .to(".chat", 0.7, {x:0, scale:0, ease:Power2.easeOut}, 3) .from(".call", 0.7, {x:0, opacity:0, scale:0.1, ease:Back.easeOut}, 3) .to(".call", 0.7, {x:0, scale:0, ease:Power2.easeOut}, 6) .from(".whatsapp", 0.7, {x:0, opacity:0, scale:0.1, ease:Back.easeOut}, 6) .to(".whatsapp", 0.7, {x:0, scale:0, ease:Power2.easeOut}, 9) tl.timeScale(2);// make it run 2x fast

Option 1: re-calculate all the coordinates and rebuild your animations on resize. Search the forums for "resize" and you'll find lots of demos and opinions about how to handle this: https://greensock.com/forums/search/?page=1&type=forums_topic&nodes=11&q=resize Option 2 (best? put your red square inside an SVG which gets nested inside your elements. Set its width and height to be 100%. The SVG will naturally scale with the parent and you don't have to recalculate anything. Below are some SVG animations from @PointC Open them up in new tabs and resize. Notice how they all scale nicely and none of the coordinates need to be reset.

Hey Jack, thanks for this! I had figured that this was just a natural occurrence along the lines of what you explained with the diagram, thanks for confirming. Though, I was secretly hoping that I would be wrong and there was a parameter that would make it all better instead of reworking things. Thanks a lot for this pen, your approach makes total sense now that I see it. I haven't had a chance/need to use the Modifiers plugin yet either, so it was also a good chance to learn about it while reverse-engineering your solution here. Much appreciated! -darin

You'll be fairly limited with divs, but you could reduce the width to 0 and add a dashed border in your CSS. .lines { width: 0; height: 30px; position: absolute; border: dashed 1.5px red; } Happy tweening.

Hi @kbeats Hi @PointC I like this one Regarding hover and click: Happy tweening Mikel

Hi @LipstickVoid You could calculate the repeats by dividing the duration of the main timeline by the duration of the repeating tween/timeline (without the repeats). They may not end at exactly the same time though. I think adding an onComplete callback to the main timeline would be the easiest approach. Set the repeating timeline repeats to -1 and then use your main timeline onComplete to pause or kill that repeating timeline. Does that help? Happy tweening.

Duh, getBoundingClientRect totally will work. I haven't started making anything yet, was just a question that popped into my head and I made it more complicated than it needed to be. Was thinking there would be a _gsTransform.theRealHeight undocumented property or something. Thanks, everyone!

Come on -- it's summer break. I don't wanna do any math, trig or geometry. ? I wasn't quite sure where this was going either so a CodePen or more info would be great.

getBoundingClientRect() should indeed work, but it'd probably be more performant to maybe just do the raw math instead (like Triginometry/Geometry or whatever category this falls under ? ). Can you help us understand the context a bit? Do you have a codepen?

I don't think there is any reason to keep it, but based on a bit of testing I did there is a good reason to remove it as the results of an interior vs exterior wrap of tags does produce different results particularly reflow issues in some cases. It's easy enough to account for in a hardcoded site but as @Origine highlights it could be problematic in cms sites where you can't control content.

I can't really think of a great reason at this point, no. I'll remove that in the next version (unless someone else chimes in with a good reason to keep it). Let me know if you need that file right away and I can get you an advanced copy, but like you said, it really doesn't break anything so you should be fine. Happy tweening!

I'm kind of confused by what you mean by "how do I run two different classnames at the same time". If the demo below is what you want, let me know if you need help understanding how it works

Yeah, I think it would be a good idea. It's something I've actually thought about before, I just never brought it up.

I bet you're right. So are you in favor of adding a "Jobs & Freelance" forum @OSUblake?

Somewhat related. Here's how you can use that same technique to animate a rope mesh in Pixi.js. Stuffed Tentacles

Here's a tutorial... http://tympanus.net/codrops/2015/09/14/creating-material-design-ripple-effects-svg/