Leaderboard

This is what happens when you tell CSS and JavaScript to animate the same thing.

Hi, like this ... Happy tweening ... Mikel

@Hector18 Is this what you'd be looking for? I simplified the animation to use StaggerTo as well, so that you could see that functionality.

Hey fellow GreenSockers, I just wanted to give a big thanks and shout-out to Jack for creating and maintaining the amazing GSAP for us. I know he likes to thank the moderators for volunteering our time in the forum, but we need to send that thank you and positive energy back to the top too. I can’t imagine how I would accomplish my web animations without GSAP. Most of this stuff would be super difficult with plain JS and virtually impossible with **shudder** CSS animations. To illustrate my point, here’s the shameless self-promotion part. My recent demo (4 smashed into one actually) included a rolling square on one menu. As I was working on it, I wondered how I would even roll a square without smoothOrigin? If you could somehow make it work, it wouldn’t be easy. And that feature is just baked into the cake with GSAP! It’s crazy how much use I get out of the DrawSVG plugin too. No getTotalLength() browser inconsistencies. I just calculate some percentages, drop in a couple tweens and I’m done. With the core tools and amazing plugins, how can anyone look at this platform and not immediately join Club GreenSock? It’s astounding how much faster and easier the work is with GSAP. Not to mention that it’s so much fun. The web truly is a more interesting (& animated) place because of GreenSock. Thanks for being awesome Jack!

Not that there's anything wrong with using the pathDataToBezier() method for what you're doing there, but I just wanted to point out the svgOrigin property in case you weren't familiar with it. For orbits like that, it's a handy feature. More info. https://greensock.com/svg-tips Happy tweening.

Hi @sudarat, Less refined, not fully flexible and not perfectly calculated ... Here just a simple starter kit: good luck ... Mikel

Hi Sudurat, Welcome to the GreenSock forums. Its very difficult to give general advice on responsive UI animations like that without having some understanding of your level of experience and what you have tried. This is why CodePen is so helpful, it gives us a clear starting point in directing you. I think CodePen is working fine, so its probably best to give it another shot. Directions on using GSAP with CodePen can be found here: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ The first thing that comes to mind when seeing the site you referenced is this pen by @OSUblake Click the small squares: That isn't something a beginner is going to build out on there own very quickly and it will probably require a solid foundation of CSS / HTML / JavaScript. Getting it to work right makes use of the FLIP (first, last, invert, play) technique which on its own requires reading a few blog posts. The GreenSock part of it is actually quite small. I would strongly suggest you start with a very basic CodePen and get something to animate and grow when you click it. From there perhaps we can give some suggestions on what to do next or help you if you get stuck with that. Unfortunately we don't have the resources to give a lot of general web development advice or walk you though building complex UI interactions. We are happy to help with any questions related to GreenSock, of course.

Probably not. If you can't change the markup, then you're going to have to manually calculate the scroll amount.

It looks like the problem is that you've got CSS transitions applied. So every time GSAP changes a property, CSS transitions say "wait! don't do that yet...I'll take 2 seconds and animate those in". So GSAP was doing exactly what you told it to do, and the onComplete was firing appropriately...but your CSS transitions were taking another 2 seconds after that. See what I mean? I'd strongly recommend avoiding CSS transitions/animations if you're going to use GSAP to animate things.

I was a little confused about the end result here too. Most of the time you'll probably want one SVG for your animations like this. If you have multiple elements that interact with each other, it makes everything pretty simple and scales together nicely. That's not to say you can't make things work with multiple SVGs, but there aren't too many cases when it's necessary. Just my two cents. YMMV. Happy tweening @jo87casi and welcome to the forum.

I'm not sure if there is a question here. Your pen is using jQuery to toggle classes and CSS transitions. Are you asking how to do the same thing with GSAP? You can toggle classes or you could just animate the x position of those elements If you're just getting started with GSAP, I'd recommend the learning section here: https://greensock.com/learning Happy tweening.

Great explanation. It all makes perfect sense now. Thanks very much. I'll do the separate tween thing. GSAP is fantastic.

I think this is what you meant to do, right? It looks like you were creating some fromTo() tweens (which have immediateRender:true by default) and THEN running the pathDataToBezier() and aligning things in that different position. It was a timing issue. I reorganized things to run that initially, and set the xPercent/yPercent/transformOrigin on the necessary elements. Make sense?

Yes, this is the right solution for my project

Hi @teejay_hh, Why 'margin-bottom'? Set a height that offers enough room to scroll. Happy tweening ... Mikel

@Devotee007 Not really GSAP issue, it was because your container didn't have position.

@somose138 I don't have any experience with react. Though @Rodrigo has written a guest blog post on how to use GSAP with react. I am sure you will find it helpful. https://greensock.com/react

I'm not sure I understand the question. To only have one side of the book you'd just need to adjust some of the CSS classes that style the book. Making it responsive would involve creating the book with percentages instead of fixed width pixels. Or using fixed width sizes for various breakpoints would work too. Most of what you're asking falls outside the scope of this forum. If you have specific GSAP questions or problems as you continue with your project, we're happy to help. Happy tweening.

Neat! That sounds like a better solution than keeping invisible svg 'paths' around for the motions. I'll see if I can rewrite it to use svgOrigin instead, thanks!

Really nice work on the latest demo, @PointC! Nice touch with the little viewBox toggles & color themes. And of course a big "thanks" for the kind post. You made my week. ?

Rereading your question, I think @mikel had a better understanding of what you were asking for. I updated my Pen as well. On the StaggerTo, the last value (0.1 and -0.1), in this case, dictates which direction the StaggerTo happens.

HI @Hector18, As @mikel said it makes things far more clear if we can see a CodePen example of the issue. Are you looking for GSAP's reverse() functionality? https://greensock.com/docs/TweenMax/reverse() From the look of things, you might be best using GSAP's StaggerTo functionality https://greensock.com/docs/TweenMax/static.staggerTo() too.

Wow, that was fast! Thank you so much, works perfect!

I didn't read through all your code, but I assume this is what you wanted, right?: Happy tweening!

Thanks. For anyone else interested in this sort of thing, I ended up setting up a MutationObserver and it works like a charm. In config I set it to listen only to attributes and on the path there's a transform attribute. MutationObserver allows you to snag the old value so creating a delta was easy-peasy. You have to pass that in as part of the config setup though like... config = {attributes: true, attributeOldValue: true} It does return that old value as a string like "matrix(1 0 0 1 23 8)" so you have to get the x/y values out of that. Here's my code in case anyone is interested. I'll refactor it but this gets the job done. I have 2 things that have to be moved with it - a dragger and a wrapper for the image. The element IDs are stored in variables passed as an object to the function but this is the listener setup... function setPathDragListener(B) { // set up mutationObserver let path = document.getElementById(B.settings.imageBez.pathID), wrapper = document.getElementById(B.settings.imageBez.wrapperID), dragger = B.dragger[0].target, config = {attributes: true, attributeOldValue: true}, callback = function(mutationsList, observer) { for( let mutation of mutationsList ) { let matrix = mutation.target.getCTM(); if( mutation.oldValue === null ) return; let old = mutation.oldValue; let n = old.split(' '); if( n === null || n[4] === undefined || n[5] === undefined ) return; oldX = parseInt(n[4]); oldY = parseInt(n[5].replace(')','')); let xDiff = matrix.e - oldX; let yDiff = matrix.f - oldY; let wrapperX = wrapper._gsTransform.x, wrapperY = wrapper._gsTransform.y; TweenMax.set([dragger,wrapper],{x: (wrapperX + xDiff), y: (wrapperY + yDiff)}); } }; let observer = new MutationObserver(callback); observer.observe(path,config); }

Is there some reason you can't put the SVGs into the same wrapper like this?:

Yeah, I can totally see why you'd think this is a bug and I suppose it sort of is, but one could argue that it's a bug when it DOES work As @OSUblake said, you're doing something very unusual here in that you're animating completely different types of objects, but remember that technically in order to animate CSS properties you've got to define them in a "css:{}" object so that CSSPlugin takes control of those. However, there's an "autoCSS" feature that senses when the target is a DOM element and then it automatically creates and wraps those "css:{}" values for you (to minimize typing...it's a convenience, as it's so incredibly popular to animate CSS on DOM elements). In your demo, if you had the plain object AFTER a DOM element, what was happening is that GSAP noticed the DOM element and pushed the "x" value into a "css:{}" object as a convenience, so your vars looked like this: {css:{x:200}} Thus by the time it go to the standard object it was trying to animate CSS properties of a plain object (doesn't make sense). Of course a solution for us would be to never edit the original vars object (create a copy for each and every target), but GSAP is HYPER optimized for speed an minimal memory consumption, so that was a design decision we made. A solution would be to keep your arrays homogenous (don't mix plain objects with selector text or DOM elements), or you could technically define BOTH values x: and css:{x:} like this: TweenMax.fromTo([ this.$refs.circle, this.$refs.triangle, this.$data ], 1, { x: 0, css:{x:0} }, { x: 200, css:{x:200} }); But that seems a bit odd to me readability-wise. My personal preference would be to use a different tween for the generic object. Does that help?

Welcome! This forum is being provided as a free service to connect talented GSAP animators with those looking to hire them. Please read this entire post before participating. When Posting a Job: Describe the project's technical requirements and provide links to similar examples and/or storyboards (if available). List the start and end dates of the project (or at least a rough timeline). Provide an estimated compensation range. The more detailed you are in describing your needs, the better your odds of success. If you omit the budget, there's a high risk that qualified candidates will assume it isn’t worth their time. Remember that talented GSAP experts are typically in high demand. We encourage candidates to post public replies to show they're interested, but further coordination should be handled privately either through the forum’s private message system or email. It's probably best not to post your email address in a public forum. Once a candidate is found, please update the post to let others know that the job is no longer available. Freelancers Feel free to post your availability in this forum proactively. Include links to your own website, portfolio, CodePen profile, etc. so that people can get a feel for your style and skill level. It’s a great idea (though not necessary) to post a price range for each example as well. Please represent your skills accurately and include proper attribution for work that’s not yours. One of the keys to a successful working relationship is managing expectations (both sides)! Always under-promise and over-deliver. Pricing a project We generally recommend agreeing to an overall project price and timeline ahead of time rather than billing a flat hourly rate. Some developers work twice as fast as others, so an hourly rate isn’t an accurate gauge of overall cost. But for open-ended projects, we understand that hourly rates might be the best fit. Additional notes We are starting this service on a trial basis. Freelancers are NOT employees of GreenSock. Anyone on the Internet can post here. GreenSock is not liable for anything that happens before, after, or during the life of your project. Please don’t contact us for arbitration help. It’s fine if you want to simply report abuse. If we receive complaints about your conduct (employers or developers), you may be banned from posting here. Again, we make no promises to investigate each and every claim or get into "he said, she said" back-and-forth, so it's in your best interest to keep things positive and exceed expectations. Make us proud. GreenSock does not research or endorse any of the parties posting here. Please let us know if you have any suggestions for making this service even better. Happy tweening!

The color of a mask defines its opacity. White is opaque, black is transparent. http://codepen.io/osublake/pen/2bd6924c63437578626edb9d5b8fcdb9

Really cool PointC!!! If you want to add a more 3D look to your strokes, you should check out these articles. http://owl3d.com/svg/vsw/articles/vsw_article.html http://owl3d.com/svg/calligraphy/calligraphy_pen_article.html You'll have to inspect each SVG to get the code, but that's how I made this SVG drawing demo.

Animation/Workflow tip: Don’t forget - you can animate the viewBox attribute I don’t see this technique in practice (or talked about) very much, but sometimes it may be a better solution than trying to scale elements and center them. To illustrate this easy, but powerful method of SVG animation, I’ve made a simple house tour complete with some GreenSock home décor and a few nods to our great moderators. Take a look: http://codepen.io/PointC/full/OMabPa/ Some additional detailed tips about this process: How do you know the coordinates to use for the viewBox animation? Using Adobe Illustrator, you can simply view the entire SVG and hover over your desired areas for the viewBox and note the coordinates from the info panel. You can also add a square/rectangle over the area(s) you wish to zoom (make it transparent with a dashed border) and then use the coordinates of that shape as your viewBox data. You can even leave the rectangle/square in place during the animation process so you know you’re hitting the right target and then delete it before releasing the SVG into the wild. Keep aspect ratio in mind when using this technique If you start with a square (1:1) SVG, you’ll experience the best results if the areas to which you are cropping/zooming are also square. Likewise, for any rectangular areas - maybe start with a 2:1 ratio and zoom into areas that are also close to that as well. You can certainly zoom/crop to other ratios as seen in my simple demo above (two rooms are square like the SVG, but two rooms are rectangular), but it’s something to keep in mind. Also note that by changing the aspect ratio and/or cropping too close to the edge of the SVG, you can end up with some unwanted white space. As usual, IE hates SVGs You have to remember to set your SVG to overflow:hidden when animating the viewBox attribute in IE or goofy things will happen. Responsive sizing for static web delivery too You don’t necessarily have to animate the SVG viewBox either. Using different viewBox sizes, you can also show different sections of your SVG for different screen sizes. Show the whole thing to desktop users and crop to the most important part for mobile delivery etc. Finally, go big or go home Start with the biggest size you think you’ll need for your SVG. IMHO this goes for any SVG, not just those with a viewBox that will be animated. In my experience, you’ll encounter less trouble scaling down than scaling up. Hopefully this gives everyone some new ideas. Happy tweening.