PointC

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')

Hi Lauren Johnson , You can use a fromTo() to reverse the direction. Just flip the start percentages like this: TweenMax.fromTo(yourElement, 1, {drawSVG:"100% 100%"}, {drawSVG:"0% 100% " }); TweenMax.fromTo(yourElement, 1, {drawSVG:"0% 0%"}, {drawSVG:"0% 100% " });

Hi ppdc , Have you taken a look at throwProps yet? Sounds like it might be what you're looking for. https://greensock.com/throwpropsplugin http://greensock.com/docs/#/HTML5/Plugins/ThrowPropsPlugin/ Hopefully this helps.

Haha! I love those comments. Man - I've been doing it all wrong. I was trying to complete my projects with the least amount of code, get paid and move on to the next one. Silly me - I have to get one of those achievement badges. I wonder if those people know that it's Cascading Style Sheet and not Cascading Animation Sheet?

Hey all, I was looking through the 2015 most loved pens on CodePen and thought I'd say congratulations to the following for their cool pens using GreenSock: Sarah Drasner Responsive Huggy Laser Panda Factory http://codepen.io/sdras/pen/waXKPw Chris Gannon All Devices in SVG http://codepen.io/chrisgannon/pen/WvJMXP GRAY GHOST SVG Low PolyLion: Animated Polygons http://codepen.io/grayghostvisuals/pen/RNLgJP There may be more using GSAP, but I haven't looked at all of them yet. These were just some that jumped out at me right away. Some of the CSS animations are kind of nice, but if I'm being honest, I just don't get the "I made this with pure CSS" obsession. I mean, am I missing something here? I look at their lengthy CSS along with all the vendor prefixes and think how easily some of that could be accomplished with just a few lines of code using GreenSock. It seems like a lot of unnecessary work to me. I've said it in another post and I'll say it again. I think there are two types of people in this world: 1. Those who think CSS animations are a good thing. 2. Those who have tried GreenSock. Happy New Year Jack, Carl, Blake, Jonathan, Diaco, Rodrigo and fellow members - I wish you all a productive and prosperous 2016.

Hi sharkey1983 , Yep - you can get stuck like that. You'll want to put each hover effect into its own timeline to prevent that problem. Like this: http://codepen.io/PointC/pen/EPWNQq

Hi coco , Happy New Year to you as well. You're centering all your divs so your travel distance on the x will be from the new origin which is the container center. You said you want to animate from the extreme right side of your container so you have a few ways to achieve that. You can manually calculate that number: container 400px - animated div 100px and divide by 2 for 150px. You can animate from/to left:100%, but this will be a problem because you've centered everything and now the div center point will go to 100% and the animated div will overlap the container. The most foolproof way would be to get the width of the container and the animated div and feed that data into the tweens. I've forked your pen to show you those three options. http://codepen.io/PointC/pen/XXpdmQ/ You can also save some CSS by have GSAP set your xPercent:-50 and yPercent:-50 rather than all those vendor prefixes for translate. You may have seen this GreenSock blog post, but if not, there is some good reading here about xPercent and yPercent: http://greensock.com/gsap-1-13-1 Hopefully this helps a bit.