Leaderboard

Hi, Without more info about other libraries/frameworks you're using, my guess is that you're using webpack or a CLI that uses webpack for the build process. So perhaps this has to do with tree shaking: https://greensock.com/docs/NPMUsage Scroll down a bit and you'll find the tree shaking part. If this doesn't help, please provide more details about what you're doing, your setup and perhaps a reduced live sample or a setup file to take a look in our local environments for testing. Happy Tweening!!

I'm not quite sure I understand your question, but to center an element on the screen you could do something as simple as this: TweenLite.set(yourElement, {xPercent:-50, yPercent:-50, left:"50%", top:"50%"}); Hopefully that helps. Happy tweening.

Hi, Besides @mikel's great solution for this you can see this sample I made of an endless marquee in React using the modifiers plugin. It shouldn't be too complicated to port this to Vue though and using Draggable to control the position of the elements:

The secret to great morphs (or any animation really) is to take the time to properly prepare your assets. Look at your demo without any morph running. Set the visibility of the #grey to visible and hide the #map. See how that doesn't look like a finished graphic? I think you're looking for a bit much from the morph plugin here. I saw your other question on the thread I mentioned and @GreenSock gave you some good advice there about path to path or concatenating the "d" values. You could also morph the map to the main part of the logo and then draw the outer ellipse separately. When you start morphing highly complex paths, you probably won't get the morph you're envisioning. You'll most likely want to break this into pieces to get the best result. You said you weren't experienced with AI so I'd recommend taking some time to get familiar with it. With proper preparation you can make it look like one piece morphs into multiple shapes. Here's an old demo from another thread, but it shows the basics of a square morphing to/from three circles. If you have a bunch of shapes, you can create a loop to go through them. Here's an examples of that. The bottom line here is the MorphSVG plugin is amazing, but you should always do your best to help it as much as possible. That all starts in your vector software. Happy tweening.

Hi @tsimenis, Since the cracks still dream of Thanksgiving ... Here, my suggestion // alternative list, if you want the "1" on the first left position list: ["10", "1", "2", "3", "4", "5", "6", "7", "8", "9"] // left: -itemWidth TweenLite.set(this.$refs.list, { left: -itemWidth }) Best regards Mikel

Hi @greykrav, First of all: Your SVG rejects an error message. Probably vectoring problems (too many layers?) . If you start the animation with a delay, an error will be displayed (I use CHROME): You can define stroke and fill in the 'morph tween'. Here is an option, have taken one layer of your logo and set new circles: Try to optimize the SVG. Best regards Mikel

@greykrav do you have a reduced test case in codepen that you could share? I suppose if you have matching quantities of paths in the starting and ending groups, you could loop through them and map them to each other (morph each one). But if you're trying to animate entire groups with varying numbers of shapes/paths, it seems like a logically impossible thing to do without some serious hacking (like morphing extra shapes to blank shapes that you fabricate). If you have a bunch of <path> elements that all share the same fill/stroke styles, then you should be able to merge them all together into a single <path> so that you can just feed that into MorphSVGPlugin. Literally just concatenate their "d" values. Again, once I see a demo it'll be much easier for me to offer tailored solutions.

Do you mean something like this?: Notice that your original was using querySelector() which will only get the FIRST match, whereas querySelectorAll() will get all matches but of course you've gotta loop through them to attach listeners accordingly. There are actually a lot of ways you could structure this.

Hi @greykrav Welcome to the forum. You're morphing the #Map into #Logo1, #Logo2 and #Logo3, but there are no paths with those IDs so that won't work. In this fork I've commented out the last tweens and only use the first one that morphs from the map to the logo. You can animate the fill color along with the morph. As you can see in my fork, I've just used red. Regarding the trace feature of AI to convert pngs to SVG, my advice would be not to do that. IMHO you'll be far better off by creating a new vector graphic by manually tracing over your original artwork. You'll end up with a cleaner output and you can properly layer and group elements. Check out this thread for some more info about AI exports. Hopefully that helps. Happy tweening.

Hi @Rodrigo, thank you for your reply, I am using Vuejs and the project is created with Vue CLI 3 (webpack). You are actually right, it seems it has to do with tree shaking, I didn't think of it since I didn't have this issue before. So I got it working with two ways, the important part seems to be to reference the plugin in your code import Draggable from 'gsap/Draggable' import '@/assets/vendor/ThrowPropsPlugin' import ModifiersPlugin from 'gsap/ModifiersPlugin' import {TweenLite, TweenMax, Linear} from 'gsap' //or according to the docs import '@/assets/vendor/ThrowPropsPlugin' import {TweenLite, TweenMax, Linear, ModifiersPlugin, Draggable} from 'gsap/all' // mounted hook const plugins = [ModifiersPlugin] It feels it's not the prettiest solution but I guess it's the only one thanks a lot for your help!

I'm not sure what you're asking. All the examples in the showcase use GSAP as their animation engine, but many use other libraries like three.js or Pixi. GSAP doesn't do any rendering. It's an animation engine that animates values. All the rendering is handled by the browser. Hopefully that helps. Happy tweening.

Hm, are you testing it in codesandbox? If so, that's probably not a good option because that environment seems to require a lot of extra resources (unrelated to GSAP). Or are you saying that your "real" project has performance issues? I tried the demo on my iPad and I didn't notice any performance problems. Remember that typically performance problems have nothing to do with GSAP - it's the graphics rendering in the browser, so try to avoid heavy SVG or changing lots of pixels on each tick. Well, there are a ton of other optimizations you could make, but those are some of the biggies. I'd also strongly recommend animating x instead of margin-left. It's much easier on the browser because transforms don't require a layout recalculation.

Sure, you can use the CYBERMONDAY coupon this year too. Welcome aboard!

Hi @merchantcantos Welcome to the forum. Edge is super duper fussy when it comes to masks. (& many other things) The main thing to try with Edge when you have a drawSVG mask is to add a tiny rotation that will force Edge to draw it correctly. I wrote about that here. Edge also doesn't like when you group things in a mask element. Another thing I always recommend is to mask a group rather than an individual element. Even if you only have one shape, I still recommend grouping it and masking the group. Here's a fork of your pen with those changes. It seems to be working correctly in Edge for me. Hopefully that helps. Happy tweening and welcome aboard.

Hey fellow GreenSockers, I’ve seen some demos and questions lately with SVGs containing nested groups that are 10 deep and generic class names that aren’t helpful. This makes your job tougher, so I thought I’d share a few tips for better SVG exports from Adobe Illustrator. I’ve created a simple SVG with a background rectangle, some ungrouped squares, a group of circles, a group of lines and one open wavy path. Here’s the artwork with the layer panel in AI. Tip 1: IDs If you have elements that you know you’ll be targeting individually, give them an ID in AI. In this case I’ve given each of the colored squares a name. I’ve also named the wavy open path. Tip 2: Grouping If you have a group of elements that you’ll want to stagger or somehow target as a group, create a group for them. Simply select all of them and pressing Ctrl + G will make a group for you. You can also create a sub-layer and add them to it or create an entirely separate layer. Do whatever works for you. Just get them grouped before export. You can see in my layers panels I have a masterGroup around everything and then nested groups around the straight lines and circles. The elements in those groups do not need an ID as I’ll have no need to target them individually. You can also use nested groups within nested groups. Maybe a character has a group called ‘#face’, but the eyes need to be their own group within the face group. If that’s what you need for control, go for it. Tip 3: Export Settings Choose File –-> Export –-> Export As --> then choose ‘Save as type: SVG’. The directory is unimportant as you won’t actually be saving it. Choose Export at the bottom of that panel and then we’ll get to the important settings. The next screen you’ll see will be for the SVG Options. At this point you could choose OK and the file would be saved, but I find it best to click to ‘Show Code’ instead. That will launch a text editor which will allow you to copy and paste the code into your editor. Make certain the Object IDs is set to Layer Names. If not, the group names and path IDs will not come through to the SVG. The most important setting here is the Styling. If you choose: Internal CSS, you’ll get a bunch of generic class names. The IDs will still come through, but I don’t find generic class names helpful at all. Here’s what you get with that export. <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="500" viewBox="0 0 1000 500"> <defs> <style> .cls-1 { fill: #333; } .cls-2 { fill: #ff0; } .cls-3 { fill: #7ac943; } .cls-4 { fill: #3fa9f5; } .cls-5 { fill: #ff931e; } .cls-6 { fill: none; stroke: #e6e6e6; stroke-miterlimit: 10; stroke-width: 4px; } </style> </defs> <g id="backgroundGroup"> <rect id="backgroundGray" class="cls-1" width="1000" height="500"/> </g> <g id="masterGroup"> <g id="nestedCircles"> <circle class="cls-2" cx="650" cy="150" r="50"/> <circle class="cls-3" cx="650" cy="350" r="50"/> <circle class="cls-4" cx="850" cy="150" r="50"/> <circle class="cls-5" cx="850" cy="350" r="50"/> </g> <rect id="greenBox" class="cls-3" x="100" y="100" width="100" height="100"/> <rect id="blueBox" class="cls-4" x="100" y="300" width="100" height="100"/> <rect id="orangeBox" class="cls-5" x="300" y="100" width="100" height="100"/> <rect id="yellowBox" class="cls-2" x="300" y="300" width="100" height="100"/> <path id="wavyPath" class="cls-6" d="M68,457c45.67-15.25,115.6-33,201-31,84.49,2,104.92,21.37,193,25,108.61,4.48,136.93-22.58,236-28,61.7-3.37,150.91,1.64,262,43"/> <g id="straightLines"> <line class="cls-6" x1="450" y1="100" x2="450" y2="400"/> <line class="cls-6" x1="500" y1="100" x2="500" y2="400"/> <line class="cls-6" x1="550" y1="100" x2="550" y2="400"/> </g> </g> </svg> For styling I prefer to set it to Presentation Attributes. Here’s what you get with that setting. <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="500" viewBox="0 0 1000 500"> <g id="backgroundGroup"> <rect id="backgroundGray" width="1000" height="500" fill="#333"/> </g> <g id="masterGroup"> <g id="nestedCircles"> <circle cx="650" cy="150" r="50" fill="#ff0"/> <circle cx="650" cy="350" r="50" fill="#7ac943"/> <circle cx="850" cy="150" r="50" fill="#3fa9f5"/> <circle cx="850" cy="350" r="50" fill="#ff931e"/> </g> <rect id="greenBox" x="100" y="100" width="100" height="100" fill="#7ac943"/> <rect id="blueBox" x="100" y="300" width="100" height="100" fill="#3fa9f5"/> <rect id="orangeBox" x="300" y="100" width="100" height="100" fill="#ff931e"/> <rect id="yellowBox" x="300" y="300" width="100" height="100" fill="#ff0"/> <path id="wavyPath" d="M68,457c45.67-15.25,115.6-33,201-31,84.49,2,104.92,21.37,193,25,108.61,4.48,136.93-22.58,236-28,61.7-3.37,150.91,1.64,262,43" fill="none" stroke="#e6e6e6" stroke-miterlimit="10" stroke-width="4"/> <g id="straightLines"> <line x1="450" y1="100" x2="450" y2="400" fill="none" stroke="#e6e6e6" stroke-miterlimit="10" stroke-width="4"/> <line x1="500" y1="100" x2="500" y2="400" fill="none" stroke="#e6e6e6" stroke-miterlimit="10" stroke-width="4"/> <line x1="550" y1="100" x2="550" y2="400" fill="none" stroke="#e6e6e6" stroke-miterlimit="10" stroke-width="4"/> </g> </g> </svg> The output is much cleaner and any of those attributes can be easily controlled with CSS or GSAP. This code straight out of AI is ready to animate with no cleanup necessary. You can quickly target those group child elements for whatever you need. It’s the best of both worlds as you can get to each element for a stagger without the need for unique IDs and you can also control them as a collective. The nested circles can be targeted like this: tl.staggerFrom("#nestedCircles circle", 0.5, {attr:{r:0}}, 0.15); Or easily targeted as a group: tl.to("#nestedCircles", 1, {svgOrigin:"750 250", rotation:360}); Bottom line: Better artwork prep will make your GreenSock life easier. Proper names and grouping before you export will make your animation work go faster as you won’t have to fumble with meaningless class names and trying to group things in your code editor. That’s not to say that you can’t tweak a few names or groups – I do that all the time. But the more things you can have exported from AI correctly, the easier your coding and animation work will be. Of course, all this is just my two-cent opinion. Take from it what you will. Hopefully some of it will be helpful. Happy tweening.

Hi @mikel, I feel so silly, it makes sense to offset the list. So in my case that I want to have half list items visible I would do this: TweenLite.set(this.$refs.list, { left: -(itemWidth + itemWidth / 2) }) Thanks a lot for your suggestion

So your code suggestions didn't work : still getting the errors. Regarding tree shaking, I'm sorry I read the documentation but I don't understand what it is. Plus, I'm using webpack 2 & gulp 4 in my workflow so it's a little difficult to follow the examples. BUT Your thoughts regarding old UMD files and ES6 helped me. I solved my problem doing this : import { TweenMax } from 'gsap'; import ScrollToPlugin from 'gsap/umd/ScrollToPlugin'; Thank you very much !

ScrollToPlugin is NOT included in the TweenMax file, so this won't work: //BAD: import { TweenMax, ScrollToPlugin } from "gsap/TweenMax"; But this certainly should work: //GOOD: import { TweenMax, ScrollToPlugin } from "gsap/all"; You could also try this: import TweenMax from "gsap/TweenMax"; import ScrollToPlugin from "gsap/ScrollToPlugin"; You're using files installed via NPM, right? That error message almost sounds like you're using the old UMD files in an environment that's expecting ES6 modules. You don't have tree shaking enabled, do you? It's pretty tough to diagnose blind. If you still need some help, could you provide a reduced test case? Maybe in codesandbox or github?

You're on the right track with pause(). One problem is you have the onComplete callback on each tween in the loop. Sometimes you may want that, but I think in this scenario you don't want anything to reset until the whole timeline is done, right? In that case, you need the onComplete on the timeline. What's currently happening in your demo is the first tween on the timeline fires the onComplete call and you seek(1). The timeline is then playing from 1 second and that same tween fires the onComplete again. And so on... None of the additional targets will ever animate. At that point, you're stuck in a loop. The other issue is you're rebuilding the timeline on each click, but all the all tweens are still there from the last click. Just pausing a timeline doesn't clear the old tweens so when you add more, they just get added to the end. You can clear() the timeline in your onComplete to fix that. I'm not sure if you wanted to animate the letters one by one, but your other animations had them all fly apart as a group so you can add the position parameter to each tween in the loop to fix that. What you need to do is pause() the timeline back at 0 and then clear() it. Also in the onComplete you can add the listeners back to the links and switch the cursor back to a pointer. I also added a little indicator to tell you the duration() of the timeline on each click. See how when the onComplete fires and the timeline is cleared the duration goes back to 0? Hopefully that helps. Happy tweening and Thanksgiving.

Thank you for the solution and all the helpful information! I am researching the methods you recommended right now. I have run into some other questions about morph so ill make a new thread..

@GreenSock yep I'm planning on covering both of those. In fact, tomorrow, I am releasing a TimelineMax tutorial using the previous lesson's project. Ultimately, I want to release a full course using it in serious project(s).

Hi @nickelman, Then try another timing and position the tweens (Understanding the Position Parameter). And you have a lot of possibilities for easing ... Both can and must be aligned with your ideas. Best regards Mikel

Hi @nickelman, The more specific the question, the easier it is to respond specifically. I'm not a pro coder and English is not my native language. Here is an attempt to explain the steps. // my animation layout is relative to the window size usings this vars var w = window.innerWidth; var h = window.innerHeight; // Based on the css properties the 'box' should be: TweenLite.set('.right',{width:200, height:h*0.1, y:h*0.7}); // height = 1/10 of window.innerHeight // due to 'position:absolute' (css) the top of the box should be positioned 70% from the top (y:h*0.7). // The other two fields are first positioned below the window: TweenLite.set('.left, .middle',{y:'+100%'}); var action = new TimelineMax() .to('.right',1,{width:w*0.6-100},2) // after 2 sec the width of the BOX expand to 60% (minus the width of the middle part) .to('.right',1,{height:h*0.3},2) // same time (now) the height expand to 30% (position:70% ≙ rest: 30% ≙ h*0.3 .to('.right',1,{height:h*1,y:0}) // directly after: BOX expands to total height (= h*1) and moves up to the posiiton 'top' (y:0) at the same time .to('.middle',1,{y:'0%'},"-=0.9") // starting a little bit earlier than the last tween ends ("-=0.9") middle and left move to the top .to('.left',1,{y:'0%'},"-=0.95") But we can also make it easier and set the whole thing in a fixed wrapper - as it may be the case in the reference. Are we going on like this? Best regards Mikel

Nice job, @DesignCourse! The production quality and audio crispness are stellar. Very glad to hear that learning has been a breeze so far. If you haven't seen it already, I'd strongly recommend checking this out: https://css-tricks.com/writing-smarter-animation-code/ I noticed you did several SVG-focused videos (not about GSAP, but other tech) which is great - perhaps it's an opportunity to kick the tires of MorphSVGPlugin, as it's pretty unique in terms of HOW it handles the morphing. If you try to do the same morph with multiple different technologies/libraries, you'll probably see what I mean. For example, MorphSVGPlugin easily handles when the start and end shapes have a different number of points...and it subdivides and figures out the most natural way to do things (it's common for other libraries to produce very awkward-looking results or simply not work when there are different point quantities). And we're about to add another new feature which you can get a sneak-peek of here: https://codepen.io/GreenSock/full/2e907cfa0fd05ca534ddd3592d73b9c2/ I don't think any other tool/library offers that. If your aiming to create tutorials that have broader appeal to the typical developer out there, timelines may be a great option. You mentioned in the video that you'll likely cover that soon. Great. If you're looking for a summary of some of the things that make GSAP kinda special (so that your audience understands WHY you're even covering GSAP), check out https://greensock.com/why-gsap Anyway, nice work on the first tutorial! Keep up the good work. Ping us with any questions.

Awesome! I just released one today: I'm planning on covering several more, TimelineMax definitely being next. So far, learning has been a breeze!