PointC

Hi celli, I made a couple of changes to your Pen and have the hovers working. I'm not 100% sure why the Timeline wouldn't reverse on hover out, but the super smart mods will certainly explain that to both of us. http://codepen.io/PointC/pen/qOwrjr

Just when I think I've made something interesting, Diaco posts a new CodePen like this one and I just want to go back to bed. @Diaco - very cool! Visiting your CodePens is an education all by itself. You definitely inspire me to keep learning. We need a 'hats off' or 'applause' emoji around here.

Well, I'll throw my 2 cents worth out there too. Everyone above is giving you really great advice and trying to save you a lot of work and I completely agree with Carl, Diaco and Blake. This thread caught my attention as I'm in the middle of a fairly complex morph right now. I'm morphing a horse into a saddle. The mane and tail are fairly complex with a large number of points. Now, the morph plugin works perfectly throwing a lot of points at it, but it's also a matter of making it look nice. In my case, I started with the entire horse as one path and tried to go straight to the saddle, but that wasn't looking good so I broke the horse into three parts (body, mane and tail) and morphed each of those into three pieces of the saddle. This is looking much better, but it's still quite a bit of work to get it just right and this is only three paths. I'm not sure how many paths you have in your SVG, but it looks like a lot. You have to remember, as Carl pointed out, it's path to path - not group of paths to group of paths. Regarding best SVG design practices - have you seen this post by Sara Souedian? It's really good information. http://sarasoueidan.com/blog/svg-tips-for-designers/ best of luck in your project.

switch this: TimelineMax.to("#flicker", 2, {opacity: 0, ease:RoughEase.ease.config({strength: 0.3, points: 8, randomize: false}), repeat: -1, yoyo: true }); to this: TweenMax.to("#flicker", 2, {opacity: 0, ease:RoughEase.ease.config({strength: 0.3, points: 8, randomize: false}), repeat: -1, yoyo: true }); and it works

Ahhhh... my mistake. Yes - that isn't working in FF and IE, but is working in Chrome. I see Jonathan and Diaco are here now - they'll have all the answers. Edit: now Blake is here too - it's all the titans of Greensock in one place!

Hi Ryan , I took at look at your pen in FF, Chrome and IE and I see the 'water' sloshing (morphing) back and forth an all 3. Is that what you were referring to? The only thing I saw was a sizing issue in IE, but that's just IE not playing nicely with SVG without an exact size given to it. Gotta love IE PS the link to your CodePen loops back around to this thread for some reason so for anyone else reading this, the link is: http://codepen.io/ryan_labar/pen/gaEEGR

Hi reveldevil , Do you happen to have a CodePen available? I think you'll always get the fastest and most accurate answers if everyone can see your code in action. It's really quick and easy to set up a pen. Here's a link to a post by the super awesome Carl on how to do it. http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Here's the link to a Basic Starter Pen which loads TweenMax and jQuery: http://codepen.io/GreenSock/pen/hbCir

Yep - Jonathan's mix of those two is usually the best way to go. In reading your follow up question though - are you asking about showing separate text or an image while the page is loading? If that is the case, you really wouldn't need any sort of loading animation or message unless your page takes a really long time to load and you need to let the visitor know that things are happening. For most cases though, the page will load quickly and the animations can start. Those scripts we listed above simply make sure all the elements of the page are loaded and ready to animate before the tweens start so you don't get any errors.

I'm not sure which images you're referring to, but if you want to make sure everything is ready to animate you can just use these ways: $( document ).ready(function() { // your tweens here }); $( window ).load(function() { //your tweens }); The first way will run once the DOM is ready for Javascript. The second way runs once the entire page (i.e images) is ready. More info about when the DOM is ready vs when all images are loaded etc... can be found here: https://learn.jquery.com/using-jquery-core/document-ready/ I hope this helps.

I'll definitely give a big +1 to Jonathan's advice about the SplitTextPlugin. You can do some really amazing text animations with minimal effort. If you're hesitant to use it since it's a Club plugin, remember that you can certainly practice with it on CodePen so see if you like it first. (you will). Who knows, maybe you'll like it so much you'll grab a Shockingly Green membership and get hooked on the Morph and ThrowProps plugins too. Happy tweening.

In addition to Jonathan's list of page speed test links I'd also add another I use quite a bit: http://tools.pingdom.com/fpt/

Hey jstafford , I know from your other thread that you're trying to tween between classes as your co-workers don't wan't to read Javascript and are more comfortable with a stylesheet. I can't imagine tweening between classes vs tweening in the Javascript would cause enough of a performance issue to give Google any cause to penalize your site. SEO is, of course, extremely complex and the Greensock forum is probably not the best place to get too deep into it, but I will say this. When it comes to web animations, Google seems far more concerned about user experience. From the Google developers summit: Animating properties is not free, and some properties are cheaper to animate than others. For example, animating the width and height of an element changes its geometry and may cause other elements on the page to move or change size. This process is called layout (or reflow in Gecko-based browsers like Firefox), and can be expensive if your page has a lot of elements. Whenever layout is triggered, the page or part of it will normally need to be painted, which is typically even more expensive than the layout operation itself. Where you can, you should avoid animating properties that trigger layout or paint. For most modern browsers this means limiting animations to opacity or transform, both of which can be highly optimized by the browser; it doesn’t matter if the animation is handled by JavaScript or CSS. Whether they'll actually penalize sites for a less than stellar user experience would take some testing. You may find some information about such tests - I don't know? If it were me though, I'd be more concerned about creating unique content and helpful animations that guide the user through the experience of visiting your site rather than worry about a slight speed hit by tweening classes. BTW - here is a little guide to which CSS properties trigger a layout and paint. http://csstriggers.com/ Of course this is all my opinion. YMMV

Hi Shima , In checking the console for errors, it looks like it was just a CDN problem with jQuery and jQuery UI. Just click the little gear icon on the JS panel in CodePen to double check those links and you can add them via the Codepen dropdown list. http://codepen.io/PointC/pen/OydOGB

Hi puppetmaster , Dipscom is right and to add to his advice: Looking at your tween and seeing that you're scrolling the window, I'm wondering if you're looking for a new tween to play at a certain scroll point. If that is the case, you could look at using ScrollMagic. http://scrollmagic.io/

Here's another pen from Carl doing the same thing you need. http://codepen.io/GreenSock/pen/wBVPaz?editors=001

Hi derp , I think this post can help you: http://greensock.com/forums/topic/8040-change-easing-for-timeline-reverse/ Rodrigo also has this pen showing it in action: http://codepen.io/rhernando/pen/yqCea I hope this helps.

Good to know Jonathan. You're the man!

That is weird. If the CSS is set to zero, GSAP won't honor a .to tween to 16pixels letter-spacing. If you set the CSS to any other size for letter spacing, it works. Zero works if you set the spacing with a GSAP .set. http://codepen.io/PointC/pen/XmoyZX

Also - if you don't want to use GSAP's autoAlpha in your Tweens and are just trying to tween between classes, you can just use opacity and visibility since autoAlpha is a combination of those two properties. Per the docs: Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to"hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.

Can't you just use this in your CSS? transform: translate(-50%,-50%); If you change that one line in your CSS, your first pen matches your second. http://codepen.io/PointC/pen/WQLpzG

Hi alistair , I don't think the findShapeIndex.js file is in the downloads. (at least it's not in my downloads either) Per the docs page: You can load findShapeIndex() from: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/findShapeIndex.js You can grab any of the codepens featuring the morph plugin by clicking on the lower right button that says export and save it as a zip file so you can try them locally. I hope this helps.

+1. It's threads like these that are a great read - seeing the thought process and the path to the solution rather than just posting the answer in a CodePen. As always - a great education.

Hi Pusher , Sounds like ScrollMagic would be just the solution for you. http://janpaepke.github.io/ScrollMagic/ One of the members here (ihatetomatoes) has excellent tutorials on it's usage. https://ihatetomatoes.net/simple-scrollmagic-tutorial/ Hopefully this sends you in the right direction.

@Diaco - I didn't know that non-scaling-stroke existed. Very cool! I do love learning on this forum! @Mat-Moo I added Diaco's suggestion of a non-scaling-stroke to my pen in Post #2 so I think it should be what you're looking to accomplish. I hope it helps.

Hi Mat-Moo , Would this work for you? http://codepen.io/PointC/pen/KdrKGz Edit: Whoops - just re-read your post and you don't want to use scale. So you want the square to get wider and taller, but the stroke to stay at 50px?