Leaderboard

I think it's a good idea, helps developers and businesses looking for them. From a marketing perspective, it could also be beneficial to Greensock. A hub for hiring could generate more awareness and acceptance for the platform. I would make sure you have some sort of messaging attached saying something to the effect that Greensock provides it only as a convenience and doesn't endorse any participants or have any responsibility for transactions. Was this a suggestion the service should be monetized?

First of all, welcome! Hang in there, you'll get it working and then you'll really enjoy the tools The x: 80% is invalid JavaScript - you need to have the percentage value in quotes, like x: "80%" because of the "%" sign. And actually, if you're doing a percentage-based translation, it's recommended that you use xPercent instead of x: //works, but can be problematic in a few edge cases: x: "80%" //best: xPercent: 80 Does that solve things for you?

staggerTo() creates and array of tweens. You can grab the last tween and set repeat(0) var tweens = TweenMax.staggerTo("div", 1, {x:100, yoyo:true, repeat:1}, 0.5); tweens.pop().repeat(0);

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?

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.

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.

I didn't quite follow your logic there - are you saying that solution is better than ScrollToPlugin? Keep in mind that ScrollToPlugin works around a bunch of browser inconsistencies plus it automatically handles cancellation of the tween if/when the user interacts with the scroll (imagine how annoying it'd be if they try grabbing the scrollbar while the tween is in progress), plus it works on the window as well. I'm pretty sure the solution you offered only works in certain browsers on certain types of scenarios. And actually, you could simplify it even more by setting autoCSS:false and animating scrollTop directly on the element itself (skip the whole onUpdate). But maybe I misunderstood what you were suggesting. Oh, and it's typically best to start a new topic for things like this rather than jumping into one that's almost 6 years old Happy tweening!

Whoa... it's working.. it's working!!! Now I can separate out the logo elements and really have some fun!

I just visited the page you posted, opened Chrome Dev tools and pasted in the code you provided and saw the animation. That proves TweenMax is loading. It looks like you are loading your custom.js is not loading as it is in a link tag and not a script tag <link rel="stylesheet" href="https://www.hsdafordiversity.org/templates/hsda/js/custom.js" type="text/javascript" /> Don't worry, we've all made these types of mistakes.

I do it with my banners in both GSAP and Animate CC versions (using my own template), use Intersection Observer. I make it play when in view, pause when out of view, and finally, go to the last frame when clicked or switching tabs. Yes, permitted on everything. I don't bother polyfilling it either, although there is one which adds an extra 7k.

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 @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:

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.

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.

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&amp;type=forums_topic&amp;nodes=11&amp;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.

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!

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?

Hi @green_machine If I understand your question correctly, I think you can get the data you want by using getBoundingClientRect(). Something like this: Does that help or have I misunderstood the question? Happy tweening.

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!

First of all, thanks for the kind words, @Origine! Glad to hear you're enjoying the tools. And yes, that's actually something that was intended to be a convenience, particularly back before SplitText was capable of splitting apart nested elements. The logic was that if someone tried splitting something that only had one child element, it'd be smarter to split inside that child (since, again, it wasn't possible to split multiple children). But that's probably not very useful anymore now that SplitText has evolved further. If anyone disagrees, let me know. I updated the codepen-specific flavor of SplitText if you want to try that out.

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

Have you tried setting allowNativeTouchScrolling:false? That's a really old OS and I don't have a device with it currently. Seems to work great in more modern OS versions.

Sorry, not really sure what to tell you. I didn't see any animation in the demo and I'm not at all familiar with basicScroll.js so I don't what it's doing under the hood. I'd guess that the majority of high-end sites that have scroll-driven animation are using GreenSock with ScrollMagic. ScrollMagic hasn't been actively developed (or supported) for awhile but I'm confident it can handle what you need to do for this project and GSAP is highly optimized for performance.

Hi @ohem If I understand your desired outcome, I think you'll want to shift the children and then add the new conditional timeline. The stagger is also coming before the label because you have an offset on the label so it won't shift that stagger tween. You could have the stagger start at the label and then it would work correctly. Something like this maybe. Does that help? Happy tweening.

Hi @aztekgold Please try this on line 24 .staggerFromTo($('.nav a'), .45, {opacity: 0, x: 0}, {opacity: 1, x: -50}, .1, 0.5); Hopefully that helps. Happy tweening.

In that case I would recommend re-building your entire timeline. It gets too complicated to remove a set of staggered tweens, create a new set, insert them into the timeline and then adjust when the other animations (like ".nav") should start. I would create another function called "build new timeline" and call it whenever you need a new timeline. This is a comprehensive article (with videos) explaining how to use functions to build timelines and the many advantages: https://css-tricks.com/writing-smarter-animation-code/

Hi and welcome to the GreenSock forums. Thanks for the demo. It is very helpful. The problem is that each time you call setSlides() you are adding a new set of tweens (via staggerFrom) to the end of the timeline, thus increasing the amount of animations in the timeline and the duration. Open the demo below in a new browser window (edit on codepen), open the console and resize the window (horizontally) to see the console logs A solution here is to clear() the timeline BEFORE adding the new tweens. tl.progress(0).clear(); tl.staggerFrom($('.screen-slides div'), .5, {x: '-100%' }, 0.1) Resize the demo below horizontally and you will see that the duration does not change. *note: If you resize vertically the duration will change because the vertical height determines how many divs you append which affects how many staggered animations are inserted.

Thanks for the demos. There were 2 issues. When you add tweens to a timeline, they naturally play one after the other. Your timeline tweens were set to repeat infinitely so technically the first tween never ended and the second tween never would play. Those demos were using a VERY old version of TimelineMax. In recent versions TimelineMax detects infinitely repeating tweens and will put the NEXT tween after the first iteration of the previous tween. By using a position parameter instead of delay, I can tell each tween exactly when to start regardless of other repeating tweens:

Sure, your approach is totally fine. While I generally love the idea of modularizing chunks of your animation code into functions (as described in https://css-tricks.com/writing-smarter-animation-code/), you shouldn't feel the NEED to do that if you've just got one or two tweens. I'd favor more concise code in that case. But yeah, it looks like you've got the general idea. Enjoy!

Hi @RoxanneAllard Welcome to the forum. You just have a little problem with your scripts. // these are pointing to a local directory <script type="text/javascript" src="js/greensock/plugins/CSSPlugin.min.js"></script> <script type="text/javascript" src="js/greensock/TweenLite.min.js"></script> // please switch to these <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenLite.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/plugins/CSSPlugin.min.js"></script> I'd recommend loading TweenMax instead as it will load the additional files by default. TweenMax loads: TweenLite TweenMax TimelineLite TimelineMax CSSPlugin AttrPlugin RoundPropsPlugin DirectionalRotationPlugin BezierPlugin EasePack On CodePen this is really easy. Just hit the little gear icon on the JS panel and use the drop-down to load TweenMax. (& jQuery too) That should get you running correctly. Happy tweening.

Thanks Blake. Couldn't have done it without your pens. Seems every time I go down the rabbit hole of trying to figure out something new it leads me to one of your pens. Quite extraordinary the contribution you've made to this forum.