Leaderboard

Hey everyone Another quick SVG tip. Set your stroke dash length to 0 and your linecap to round. That will get you a nice circle border around your path or a string of circles along an open path. For a complete string of circle shapes along the stroke, set the gap equal to the stroke-width. https://codepen.io/PointC/pen/VXMmZV If you set the gap to less than the stroke-width, you can overlap the circles and create a nice scalloped edge. I personally like around 50-70% of the stroke-width. Throw a gradient on for a nice picture frame. https://codepen.io/PointC/pen/bvvddx With some creative layering and masking you can confine the scalloped edge to the inside or outside of you path. https://codepen.io/PointC/pen/YaaqPQ Using two strokes with different stroke-width and gap sizes, you can turn an ordinary ellipse into a cloud. https://codepen.io/PointC/pen/RMMMKv Morphing shapes with a circle border creates some cool results. https://codepen.io/PointC/pen/rddOqd Since these are circles making up the stroke and not actual elements, we can’t draw them on or make them move individually. Or can we…? Using a mask, we can draw them on and animating the gap size can bring them into position in an interesting manner. https://codepen.io/PointC/pen/wmmmmK It has its limits but can produce some fun results. The main thing to remember is set your dash length to 0 and the linecap to round. After that, experiment with stroke-width and gap size. Happy tweening.

Here are couple of threads about counting numbers using GSAP,

It is good idea to post partial demo even if it isn't working so we have something to work with. I don't know why are you using pngs for your particles, from the gif you posted, it doesn't seem necessary. Anyway, I don't have ready demo to post. Following is a tutorial about bouncing particles I came across recently, you can go through it. https://codepen.io/Godje/post/bouncing-particles-tutorial To wrap particles around canvas you just need to change bouncing calculation to wrapping. You can do that as follows, if(particle.left - particle.width/2 > canvasWidth){ particle.left = 0 - particle.width/2; } Note: The above snippet I have written is just to explain, I haven't gone through demos from tutorial I posted, but this should give you idea. You can also search codepen for demos or google for simpler tutorials. If you want to learn about physics based animations then you can get this book http://lamberta.github.io/html5-animation/

Oops! I just realized you were animating position. Object.defineProperties(THREE.Object3D.prototype, { x: { get: function () { return this.position.x; }, set: function (v) { this.position.x = v; } }, y: { get: function () { return this.position.y; }, set: function (v) { this.position.y = v; } }, z: { get: function () { return this.position.z; }, set: function (v) { this.position.z = v; } }, rotationX: { get: function () { return this.rotation.x; }, set: function (v) { this.rotation.x = v; } }, rotationY: { get: function () { return this.rotation.y; }, set: function (v) { this.rotation.y = v; } }, rotationZ: { get: function () { return this.rotation.z; }, set: function (v) { this.rotation.z = v; } } }); Then try animating just the object. TweenMax.to(myObject3d, 4, { bezier: { type: 'soft', values: [ { x: 0, y: 0, z: 0 }, { x: 100, y: 100, z: 100 } ], autoRotate: [ ['x', 'y', 'rotationZ', 0, false], ['z', 'x', 'rotationY', 0, false], ['z', 'y', 'rotationX', 0, false] ] }, ease: Power1.easeInOut });

Howdy, @DougS. Welcome to the forums! I didn't quite understand your question. Can you give it some context? Got a reduced test case that demonstrates what you're after or where things are breaking?

I love the last demo, really cool and great post as always.

Something is wrong with your previewCase function, it throws errors as follow, uncaught exception: Cannot add undefined into the timeline; it is not a tween, timeline, function, or string. react-dom.development.js:619:7 uncaught exception: Cannot add undefined into the timeline; it is not a tween, timeline, function, or string.

Nice post, .. but you lost me at scalloped: yuck

mmm... scallops. Very nice, Craig. Had no idea about this.

I don't know how you have set up things, that's a lot of code to go through. Maybe you are setting some flag that determines if panels are open or closed. (Never used react either) Following is simple demo, how I would do it. Keep track if panels are hidden or not and animate them to the hidden or visible state. Right now in your example, I am guessing that when you click on any panel you are changing the state so when you click your menu button it just resets their position instead of hiding them. Hope this gives you idea.

Well there's this https://greensock.com/docs/Plugins/TweenPlugin And the TEMPLATE_Plugin.js file has some comments https://github.com/greensock/GreenSock-JS/blob/2802e96d94358b2ad28381ca83ac71de7f90f95e/src/uncompressed/plugins/TEMPLATE_Plugin.js But I don't really understand how it works. Every plugin looks really different, some use set, some don't. I want @Carl to make some videos showing how to make a couple plugins.

Hey Blake, this page https://greensock.com/try-plugins was only added today, so its not like you overlooked something. Jack add an almost blank pen with all the plugins that you can use as a starter pen. thx for the suggestions

@GreenSock Jack.. I would love to see Bendy Box get some more love, and put on the front griddle. I think it would bring other people into using GSAP, and then they can always move into more advanced custom stuff that you can do with GSAP. Kind of like letting them get their feet wet before they jump into the deep end. But that's just my two bits.

No, but there's a couple examples of how you could do that in this thread.

I just came across a video, coincidentally it turned out to be about processing js. Few years ago I had bookmarked processing js page but never really went through it. So just out of curiosity I visited processing js page and realized now that has become p5js. https://p5js.org/examples/hello-p5-flocking.html Anyway, I was going through their examples page and came across this flocking demo that wraps particles around the canvas. I removed all the flocking code, here is basic wrapping demo. But wrapping isn't big deal, following snippet from demo is for wrapping. Boid.prototype.borders = function() { if (this.position.x < -this.r) this.position.x = width + this.r; if (this.position.y < -this.r) this.position.y = height + this.r; if (this.position.x > width + this.r) this.position.x = -this.r; if (this.position.y > height + this.r) this.position.y = -this.r; } There might be more unnecessary code that you can clean up step by step.

Hello, After some travelling and a bunch of hours looking at it, I got this solution. I am sure the code can be written in a more efficient and elegant way. I'll look at refactoring it soon. I wanted to share my result, after all the help from @Rodrigo I still have a little issue with my closeAll function, related to playing 2 timelines in master timeline. But ill open a new post as it is a different issue. Many thanks, @Rodrigo any feedback will be appreciated

Thanks for posting the above codepen with the video links @OSUblake

Didn't see that. What about adding some type of quick launch button that will open up a starter pen with all the plugins? That would be even better.

I hate trying to find that. Copy the links from here.

Hi @Bembe Welcome to the forum. It sounds to me like you're looking for the TweenMax.ticker. https://greensock.com/docs/TweenMax/static.ticker Hopefully that helps. Happy tweening.

Ever have one of those mornings? Consider this a cautionary tale I was knocking together what should have been a very quick loader for a kiosk (do we still call them that?) I grabbed a starter file I had sitting around that had the following script tags <script src='https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script> Instead of <script src='https://cdnjs.cloudflare.com/ajax/libs/zepto/1.0rc1/zepto.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js'></script> Now because I'm showing you both - the obvious error is... um...obvious, but it wasn't obvious to me and everything was fine and dandy - then the client showed up (with coffee and doughnuts) and the js errors started (screenshot of the console attached for your reference and bemusement) . I placated the client while I tried to figure out what the issue was - took me 5 minutes to create a working pen of just the part that was tossing the errors - but another 2 hours to realize why, luckily my studio cat entertained the client to the point of them losing track of time me, allowing me to fix everything to their satisfaction. really the only change needed was the script tag, for whatever reason it was chocking on lines 7-10 (the rotation function) I realize no one else will likely have this issue, ever - but I wanted to document it anyhow, this is the kind of micro-minutia that gets me - it's almost never the actual work.

Might sound like an odd question, but do you really need the jquery.gsap plugin at all? Why not just remove it? It was intended as more of a band-aid or bridge for people who had a bunch of animations built in jQuery already and weren't quite ready to rewrite in the GSAP syntax but I'd strongly recommend moving away from depending on that plugin if at all possible. The native GSAP syntax is going to deliver a lot of other benefits (more flexibility, even better speed, improved compatibility, etc.)

Awesome! Thank you so much <3

Sorry - that's my fault. I dropped those yoyos on the tweens and restarted from the 'back' label. I think you wanted to replay from the start label. How's this?

Hi @ajando Welcome to the forum and thanks for being a member of Club GreenSock. I'm not sure I completely understand the desired outcome. Should the rings draw and then the wavy/bulge part repeats? Like this? Or did you mean the waves would yoyo once and then the whole timeline repeats? I wasn't quite sure. Hopefully that helps. Happy tweening and welcome aboard.

Hi @ceindeg Edge is being a bit fussy lately with masks. If you add a tiny rotation to the tween, it'll force Edge to redraw the mask. Something like this. tl.from(".mask-anim", 2, {ease: Power4.easeOut, rotation:-90.01, drawSVG:"0%"}, 0.3); This is actually the same odd issue we were discussing in this thread. Hopefully that helps. Happy tweening.

Sure. You're free to use anything that I post on this forum... well, as long as it's made by me.

Any "Parks & Rec" fans out there?

@Carl Wow... Thanks allot!!! I cant believe you just made a custom tutorial for me. I've been banging my head on this for days.... Thanks!!!

Hello and welcome to the GreenSock forums, In order to push letters away from the mouse you are going to have to determine their distance from the mouse (to see if they are affected by the mouse) and their angle from the mouse (to determine which direction they should move). @Sahil recently answered a similar question but the difference is that the elements were attracted to the mouse. Please see the demo below: He also went to great lengths to document his approach with 2 videos which you can find in this thread (there is also a clever youtube button in the demo) Both the site you referenced and Sahil's demo render to <canvas>. If your title is made of html elements like divs or spans; that's a whole other ball of wax, but you would still have to make similar calculations. Hopefully the info in the demo, thread and videos can give you an idea of how you can approach this and what is involved. Unfortunately it is a fairly advanced effect that requires a considerable amount of code and calculations that are beyond what GSAP actually does, so its not like someone will be able to easily or quickly build that from scratch for you. Again, hopefully the info provided gets you on the right path.

Thanks for the demo. Very helpful. This actually took me awhile to track down. Seems the svg was malformed which was preventing TweenMax from loading. This video explains it better than I can in text: https://greensock.d.pr/7ae9jM

Nice job. By the way a quick way to convert a NodeList into an Array is: var list = document.querySelectorAll(".whatever"); //NodeList var ar = [].slice.call(list); //BOOM, returns an array.

Hello , and Welcome to the GreenSock Forums! Have you tried to use two tweens instead of one? One that first goes right +=20, and then goes left -=20. Working example: http://codepen.io/jonathan/pen/ozfJk TweenMax.to(element, 0.1, {x:"+=20", yoyo:true, repeat:5}); TweenMax.to(element, 0.1, {x:"-=20", yoyo:true, repeat:5}); : In my codpen example, I also set repeat to infinite (-1) just so you can see the effect without refreshing the page. Does that help?

The only way to know if an asset is there is to attempt to load it. You can listen for a number of load-related errors using an ImageLoader. Consider the following example which attempts to load an image that doesn't exist: import com.greensock.loading.*; import com.greensock.events.LoaderEvent; var img:ImageLoader = new ImageLoader("image.jpg", { onFail:onFail, onerror:onerror, onIOError: onIOError}); function onFail(e:LoaderEvent){ trace("onFail"); } function onerror(e:LoaderEvent){ trace("onerror"); } function onIOError(e:LoaderEvent){ trace("onIOError"); } img.load(); Will output the following info: onIOError ---- Error on ImageLoader 'loader0' (image.jpg): Error #2035: URL Not Found. URL: file:////Volumes/Macintosh%20HD/Users/cschooff/Downloads/bezierDemo/image.jpg ---- onerror onFail All three errors fire in this scenario. An onIOError should be all you need though. Other than that, I don't know what to suggest to detect the presence of an image. Keep in mind that ImageLoader's support an alternateURL which will automatically load a "fallback" image in case of failuer: http://api.greensock...mageLoader.html