Leaderboard

Hi @Jonathan, Yes, the Banksy approach is the proper reaction to many problems. So it would be helpful if I see myself in the mirror in the morning, it would be banksy-ed. Let's shred ... Mikel

If I understand you correctly, that's actually quite purposeful but it's easy to change the behavior to what you want. It should be as simple as setting: CSSPlugin.defaultSkewType = "simple"; Or on a per-tween basis: TweenMax.to(... {skewType:"simple", skewY:30}); From the docs: Does that resolve things?

You can't say it doesn't work if there isn't any animation code. Try making the animation work without Vue first. If you need help with canvas, check out this post, and everything it links to. https://greensock.com/forums/topic/18873-animating-canvas-fillstyle-with-gsap/?tab=comments#comment-87524 And I'm pretty sure you can make a canvas animation reactive. These examples use state. https://vuejs.org/v2/guide/transitioning-state.html

when I was a kid we'd put a gif the same color as the background color on top of it and then move it 10,000px to the right when the animation begins.

Great solution, Mikel! Jesper, if you want to mess with the stagger amount and do other customizations you probably have to create new timelines on each mouseup/mousedown. You could go so far as determining the progress() of the mousedown animation to control the duration tweens in your mouseup animation. For instance if you are only at progress(0.1) when you release the mouse you probably don't want the new animations to have the same duration as if the person released after that mousedown animation ran all the way through.

Hi @jesper.landberg, Take a look at this expert solution. Here a fork: Best regards Mikel

Hi @jesper.landberg, If I understand you correctly ... try using tlGrab.reverse() - by default it is playing in reverse from wherever the playhead currently is. Happy tweening ... Mikel

Have you tried calling SVG technical support? That's just the nature of how strokes are drawn. The way I've dealt with that in the past it to animate the scale or stroke width from 0.

Yeah, exactly. GSAP can do some wizardry at the start/end of the lines (as you saw), but it just isn't feasible right in the middle. I toyed with sensing that condition and shoving the offset way to the start or end, but that causes other problems (like throwing the "from" values off when captured at that moment). In short, @OSUblake's idea is best.

I am SVG technical support so that would just result in a recursive loop. ? Yeah, I like your idea of animating the stroke width. It looks less jarring than suddenly changing the linecap or the autoAlpha. Thanks.

Hi guys, I just want to contribute with my findings in case others ran into this. I had been struggling getting GSAP's Draggable to work with Next.js and have finally found a solution. Next.js does Server Side Rendering (SSR) so pages rendered on the server had issues loading the GSAP NPM modules. Please note that pages worked just fine client-side. ERROR: import TweenLite, { _gsScope, globals, EventDispatcher } from "./TweenLite.js"; ^^^^^^ SyntaxError: Unexpected token import To resolve the issue with GSAP not being transpiled, I installed next-plugin-transpile-modules npm install --save next-plugin-transpile-modules Then I modified/created my next.config.js file according to their instructions on their NPM page. https://www.npmjs.com/package/next-plugin-transpile-modules Draggable finally worked after that (only if throwProps was set to false and you did not import ThrowPropsPlugin). However, if using a plugin like ThrowPropsPlugin.js it would display an error message like: TypeError: Cannot read property 'defaultView' of undefined Around line 515 of the ThrowPropsPlugin.js file, I changed it: //FROM THIS: _doc = _gsScope.document, //TO THIS LINE I FOUND IN DRAGGABLE: _doc = _gsScope.document || {createElement: function() {return _dummyElement;}}, After that, I just did "npm run dev" and the pages rendered on the server side were fully functional as expected. Hopefully this helps somebody out! Guys at GSAP, is there any harm in changing that line in the ThrowPropsPlugin? If not, would it be a good idea to update the plugin and other plugins for others who purchased the membership with GSAP so they don't run into this issue that I encountered?

Nah. I don't have a lot of experience with frameworks like Vue, Angular, React, etc. They're really just JavaScript questions.

Looks like @OSUblake is taking over the Vue questions now. I thought this topic was gonna be handled by Vue-Master @Dipscom. Where has he been hiding lately? Is his parking spot up for grabs? ?

Hi @johncolumbo, Just like here ...? Happy scrolling ... Mikel

Yeah, I tinkered with a few things like that. I animated a little rectangle at the end of each line to make it look like the round linecap was collapsing into a butt cap, but it ended up being more trouble that it was worth. The animation is pretty quick so I can probably get away with just hiding it too. For a slower animation, Blake's idea works well. I had a hunch Jack had considered something for this scenario and it probably wasn't feasible, but thought I'd float the question for creative solutions. Who knows, maybe it will help someone else doing battle with SVGs.

Hi and welcome to the GreenSock forums, Unfortunately i'm having trouble understanding your explanation but it seems like you have some pretty technical and precise requirements. We really can't advise on how to build complex projects from scratch. If you could provide an EXTREMELY basic example of what you are starting with and perhaps need some direction on the next step I think we would have a better chance of offering some help. I'd suggest starting with a single package moving on a path and then perhaps we can nudge you in the right direction. As it stands now there are probably dozens of ways to approach something like this but its difficult to know where to begin without knowing where you are starting from or having a better understanding of the end goal.

ahh, I see. Thanks again.

Thanks for reporting this, @gogo125! And thanks for being a Club GreenSock member. That line you suggested editing in ThrowPropsPlugin isn't quite right (though it does work), but I've identified a tweak I can make to resolve things in a headless environment. I'll push that out in the next release. Thanks again!

You're thinking of the DirectionalRotationPlugin, which is baked into the CSSPlugin. Try using it explicitly. https://greensock.com/docs/Plugins/DirectionalRotationPlugin TweenLite.to(obj, 1, { directionalRotation: { rotX: "20_ccw" } });

Thanks for the demo. 2 things I think for what you are trying to do you want to create your Draggable using the scrollLeft property of the outer scrollbox you were using a pretty old version of Draggable. I can't really wrestle with flex box right now, but here is a rudimentary setup that probably gives the behavior you want. Feel free to add in your own flex-box settings.

I'm guessing that your animation might be a from() or staggerFrom() and perhaps the starting values are the same as the existing values. Unfortunately, I can't look at your full production site. However if you make a super simple reduced test case (publicly accessible) that doesn't include your protected images and stuff specific to your client then we can take a look. This reduced test case just needs enough code to replicate the issue... a single div that you populate with different text, split and animate. If you can set that up using CodePen... fantastic. I'm guessing you can probably fake the ajax calls and just call a function that simulates new text coming into the title. Perhaps something as simple as a single H1 element and 2 buttons that change the text and trigger a new animation.

Having a good understanding of arrays will make this easier to understand. Beforehand, I create an array of arrays that hold the different path variations. So the structure looks kind of like this. var pathLists = [ [ [startPath1 + randomAltPath], [startPath1 + randomAltPath], [startPath1 + randomAltPath], [startPath1 + randomAltPath], ], [ [startPath2 + randomAltPath], [startPath2 + randomAltPath], [startPath2 + randomAltPath], [startPath2 + randomAltPath], ], [ [startPath3 + randomAltPath], [startPath3 + randomAltPath], [startPath3 + randomAltPath], [startPath3 + randomAltPath], ], [ [startPath4 + randomAltPath], [startPath4 + randomAltPath], [startPath4 + randomAltPath], [startPath4 + randomAltPath], ] ] The random alternate paths are shuffled, so there will only be 1 circle going down a certain path at a time. However, that will only happen if the duration/speed is the same for each circle for every path variation. By using a random duration for each circle/variation, there is a possibility that a fast moving circle could catch-up to a slow moving circle, and head down the same path. Eliminating that possibility completely would require more code and logic, but we can reduce that possibility by reducing the range of the random duration. Instead of using a large range, like random(1, 5), use a smaller range like random(1.5, 2).

There is something that already does that. It's called TypeScript. It uses types, so it can understand your code. I bring it up all the time, but I don't think that many people actually look into it. Let me just say this first. TypeScript is not another language. Any valid JavaScript is valid TypeScript. This means we can use TypeScript to help out with writing JavaScript. Almost nobody knows that, but I'm going to show you how. Doing what I'm about to show you is not going to work with every editor out there, so I can't make any guarantees. I used VS Code because it has the most support for this, and it's already setup to handle this kind of thing. At least for text editors. IDEs are little different. https://code.visualstudio.com/ So here's the before image. Notice how it can't figure out what TweenMax and TimelineMax are. However, if you add a TypeScript definition to your project's folder, the editor can reference that file to make sense of every thing. This means it will find bugs and provide auto-completion for anything that is defined. Most defintions can be found in the DefinitelyTyped repository. Just look at how many different JavaScript libraries have TypeScript definitions. They're so many they had to truncate the list. https://github.com/DefinitelyTyped/DefinitelyTyped You could download your files directly from GitHub, but that's really not ideal if you are using a lot of different files. Thankfully DefinitelyTyped has their own package manager, TSD, which is going to make the process a lot easier. To get started using TSD, you first need to install Node.js. https://nodejs.org/ If you're on Windows, you're also going to need to install git. https://git-for-windows.github.io/ Now open the terminal/commad prompt on your computer. If you haven't used NPM or the command line before, you're in for a treat. If you're on a mac, you need to google the term sudo because it's going cause problems for you. There's lots of articles and videos out there about how to get around that issue. If you just installed node, make sure NPM is working by typing. npm -v It should show you a version number. Now we need to install TSD globally. This is where you are gonig to need to use sudo on a mac. So enter this. sudo npm install tsd -g On Windows, just omit the sudo. Now that everything is setup, we can easily add TypeScript definitions to any project. To do that, open up your command line up to the root of your project. Now tsd needs to add some files to your project, so enter this. tsd init It should have created a file named tsd.json, and a folder named typings with a TypeScript file in it. Now we can install the greensock definitions. tsd install greensock -rosa You can install more than one definition at a time. So if you wanted to get the definitions for greensock and jquery, you could do it like this. tsd install greensock jquery -rosa Yay, no more command line stuff! Lets get back to coding. Refresh the files in your folder and check out the code editor. The editor now knows all the method and properties for GSAP! Of course that's assuming the defintions are correct, but that's another issue. If you don't know what something is, just press Alt+F12. Bam! The definition opens inside the editor, allowing you to explore them. You can even add JSdoc comments to the definitions, so everything could be explained just like it is on website. Not only that, but it creates awesome docs. Just look at what gets generated. Pretty freaking awesome. http://definitelytyped.org/docs/greensock--greensock/globals.html Only problem is that it's missing JSDoc comments. Adding them is a very time consuming process because you have to copy and paste everything from the website over to the defintion file. I started on it once, but it became very tedious. Need to come up with a better way to handle managing documentation. Whewwww! Ok. I think I covered enough to get you or anybody else who has read up to this point a way improve your workflow.

Hi Scribble, The SVG inside the <use> tags won't show up in your CodePen because the file is on another domain and you aren't referencing it (#left-hand). <svg class="left-hand"> <use xlink:href="http://my-server.com/left-hands.svg#left-hand"></use> </svg> However, using <use> might not be the best solution if you are trying to create SVG animations. First, IE does not support it, although there are ways around this. Second, the SVG is encapsulated so you won't be able to directly select your shapes/paths. // Won't work with <use> var hand = $("#left-hand-palm"); Diaco did a good job of showing us how to embed and reference an SVG. However, an embedded SVG is encapsulated inside an external document, so things like your CSS styles won't crossover into the SVG's document. I like to load external SVGs via Ajax, and then inject them into the page. Doing this will allow you to interact with the SVG just like an inline SVG. No need to modify your code! Here's a demo of how to display an SVG using the ajax, object, use, and inline approaches. Notice how only the ajax version works like the inline version. Plunker URL: http://plnkr.co/edit/LneUEK?p=preview

Hi ltscribble try this : html : <object id="yoursvg" data="SvgFile.svg" type="image/svg+xml" ></object> js : var colors =["#FF0000","#FFFF00","#00FF00","#00FFFF","#0000FF","#FF00FF","#ED1C24","#FFF200","#00A651","#00AEEF","#2E3192","#EC008C","#FF0000"]; document.getElementById("yoursvg").addEventListener("load", function() { var doc = this.getSVGDocument(); var hand = doc.getElementById("left-hand-palm"); tl = new TimelineMax({repeat:-1}); for (j = 0; j < colors.length; j++) { tl.to(hand, 1, {fill:colors[j], ease:Linear.ease}); }; });