PointC

Excellent - I'll be ordering one. After that, I'll need a GS sweatshirt, coffee mug, water bottle, mouse pad, and Jack and Carl bobbleheads.

Hi kathryn.crawford , If you want all the divs to scale to the same size, (250 in your original pen), you can just switch your scale to this: scale:250/circles[i].clientWidth, http://codepen.io/PointC/pen/XXEKjN/

You're setting the parent div (#submenuCategory1) to x:-200, but you're trying to animate the children of that div (.container) back into view. The parent is still siting at x:-200. Try changing your .set() to this: TweenMax.set($("#submenuCategory1 .container"), { autoAlpha: 0, x: -200 }); I also see that your sub-menu .containers are animating to x:200. That may be intentional, but if you want to bring them to the same point as your main menu, you'll want to animate to x:0.

Hey Carl , I was checking out the new training page with your bio picture and that is one sharp looking polo with the logo that you've got there. Are those shirts available for purchase anywhere? I remembered this thread, but that is t-shirts and hats and I'd really prefer a polo type shirt. I think it's time to open that GreenSock merchandise store. Thanks.

Yes - I believe you can take the rest of the day off and Jack or Carl should be along shortly with your free t-shirt and/or company car.

Ha - that's funny - I did almost the exact same experiment with the same element in a stagger and found that it would work. I don't know if it's the best way to accomplish a particular goal, but kind of cool that it works. BTW - I guess I missed your 1,000th - congratulations on cracking the 1,000 post mark.

If you'd like to shorten it a bit more, you could also use: var tl = new TimelineMax(); for(var i = 0; i < 4; i++) { tl.staggerTo(".box", 1, {x:"+=50"},1) }

Hi Zlerp , Welcome to the forums. If you change your CSS from this: .social-path, .social-circle { fill: none; stroke-width: 10; } to this: .social-path, .social-circle { fill: transparent; stroke-width: 10; } it will correct your problem. If you like, you can also shorten up your code quite a bit by using a Timeline and play()/reverse() on hover. http://codepen.io/PointC/pen/adEZgX Hopefully this helps a bit.

Hi Devotee007 , Diaco is just using splitText for his brilliant demonstration. His solution works just fine with some plain old box divs and no splitText plugin. Here is a quick example using his solution and some simple divs: http://codepen.io/PointC/pen/BjmMpv PS For the record, I highly recommend a membership because the extra plugins are awesome.

Blake - what's with the vague post? I mean, how about slowing down and adding some detailed information next time? Seriously cool explanation. You are a rock star.

Hi celli , Just a couple small changes in the CSS and this works just fine. Please try this: http://codepen.io/PointC/pen/EPwrrQ

Hi Vahid-Designer , Welcome to the forums. You could try something like this: function forever() { TweenLite.to(yourObject, 1, {rotation:"+=360", ease:Linear.easeNone, onComplete:forever}); } forever(); Hopefully this helps a bit.

Personally, I use Scroll Magic for all my scroll triggered animations so I'm not sure about common or best practices. I've only played with requestAnimationFrame, but never used it in the wild for a scroll triggered animation so I'll let someone a bit more experienced with it give you that part of the answer.

Hi beliy333 , You can just do something like this: if (distance < 64) { timeline.play().timeScale(1); } else { timeline.reverse().timeScale(3); } Obviously, you can enter any timeScale value you like. Hopefully this helps.

Great pens Blake. You're the man. I'm not sure how I've never seen the FLIP post that you linked to, but that is some interesting stuff.

Yep - I see the same thing in Chrome on 3 different machines - extremely high CPU usage. That is pretty strange.

Haha - I come back after a few days off and Carl whoops me.

Hi Fettabachi , the red line is just missing the x1 coordinate. Just change your SVG to this and it works just fine. <line id="rb_1" class="cls-1-rb" x1="260.64" y1="50" x2="3122.1" y2="50"/>

If you move your changeSupplies and changeTitle functions above your tweens, it works fine in Firefox.

@Carl - I think the OP meant when you start a thread. It's actually happened to me on several occasions. When you start a topic and paste the link into the 'CodePen URL' field and then click Preview, it does delete the link in that field. The topic title, tags and any links in the body of the post are fine, but it does delete that field upon preview. Personally, I didn't think it was too big a deal - I just paste the link in right before posting.

Oh - you wouldn't have to convince me that would be a better user experience. I love that demo you've got there. The one obstacle in the way of that approach for us is our Internet overlord:Google. We're a complete service agency so we're also responsible for traffic and rankings for our clients. Google has always been a bit wonky when it comes to their ability to access externally loaded content and even when they can get to it, they don't always place the same weight on it as content that's front and center on the site. For now, a multi-page, content rich site is still the first building block for quality SEO. You'll notice I said to think of the user experience first, but sometimes that's at odds with Google's best practices and my client's goals. Of course, the client's goal is usually: "I need to rank #1 for the generic term widgets by next Monday. Can we do that?" Anyway, that's a discussion for another time and another forum.

Hi daniel_pan , Welcome to the forums. You can just set up one timeline and then play() on hover and reverse() on hover out. Here's a fork of your pen: http://codepen.io/PointC/pen/mVmxgK?editors=101 Hopefully this helps.

I'd agree 100% with Blake especially about all the scenarios that could happen here. If you truly want suggestions, my first would be to simplify everything. With two different timelines on each button fighting over control of the same elements with a hover or click, this can cause headaches pretty quickly. I'm also not a fan of adding and removing classes. The more complex, we make our code and animations, the harder it is to plan for all scenarios and debug. Personally, I'm confused as to why the background lights up red on click and then can be turned off again. These are nav links, right? I would then assume when I click one, I'm headed to a new page so why does that need to stay on? You can certainly have the nice hover animation along with another event on click and then send the user to a new page. I set up a pen to show how this could work for you with the same effect, but much less code and problems. I have the same type of hover and it can be interrupted by a click at which time I use the set() method to change the color and scale of the background. For this demo, I also added a mouseup to remove that color, but in the wild, you probably wouldn't need it as you'd be sending the user to a new page anyway. http://codepen.io/PointC/pen/WrjzOa/ My personal design/development style and opinion is keep everything as simple as possible while still having a pleasing aesthetic. Always be thinking of the user experience first. Good luck.

Hi fatSkeeter , Have you tried using x and y instead of top and left so you'd be getting sub-pixel rendering?

Just to expand a bit on Carl's good information here: A quick tip for reversing path points in Adobe Illustrator. Open path: select the pen tool and click on the first point of your path and it will reverse the points. Closed path: right click the path and make it a compound path, choose menu-window-attributes and then use the Reverse Path Direction buttons. (Note: If the Path Direction buttons are not visible in the attributes panel, click the upper right menu of that panel and choose 'Show All')