Leaderboard

Hi @2sweedy Welcome to the forum. GSAP doesn't have a coding area on the website. For demos most people use CodePen, but there are other options like JSFiddle, Plunker and CodeSandbox. Those are just places online to write code. For local work you'll just download the GSAP files or link to the CDN and make all the animations you like in your local code editor. This is a great pen to show what's included: When making demos for your GSAP questions on CodePen, it's often easiest to fork an existing pen that loads all the GSAP goodies. This is a good one to start with for your projects. https://greensock.com/try-plugins You can also create your own templates in CodePen for future questions and demos. Hopefully that helps a bit. Happy tweening and welcome aboard.

Hi @Buster, To start and stop an emitter @OSUblake gave an example: thread Happy tweening ... Mikel

In your demo, you had syntax errors and you weren't linking p5.js. So nothing was working. You also need to setup your canvas by using createCanvas method. I don't have any experience with p5.js but take a look at following video. That channel will take you on a long journey and has a lot of lessons on p5.js. In case you you need to animate your objects, you can use GSAP(for what this forum is). You just need to define your values in form of object. To demonstrate, I have changed your body variables in object and animating them using GSAP. If you ever decide to learn HTML, CSS and other stuff, we can point you to some helpful resources. And if you have GSAP API related questions then we would be happy to help.

Definitely take the CodePen editor tour and watch the video here https://blog.codepen.io/2016/02/01/learn-how-the-editor-works-the-editor-tour/ That should explain about 90% of what you need for making simple demos with CodePen. Also, their documentation is great if you need to learn more about a specific task: https://blog.codepen.io/documentation/ --- From your demo, my guess is that it is a bit incomplete as you don't have anything in the HTML tab and I'm not sure where the draw() function is supposed to be drawing the shapes you are using. Also not sure if the final output is SVG, canvas or if you need be loading an external library. We really need to keep our support focused on the GSAP / GreenSock API. If you need help with GSAP, we're here to help.

Just came across a tweet, couple of days ago p5js launched their web editor. So you won't really have to mess with Codepen. https://medium.com/processing-foundation/hello-p5-js-web-editor-b90b902b74cf https://editor.p5js.org/

Hi @smallio, One option is: function next() { if(++index < messages.length){ headingForward(index); } else { index = 0; TweenLite.set(boxes,{scaleX: 0}) headingForward(index); } } function previous() { if(--index > -1 ){ TweenLite.set(boxes,{scaleX: 0}) headingBack(index); } else { index = messages.length-1; headingBack(index); } } This could possibly be optimized for 'prev'. Happy tweening ... Mikel

Ya sure you can animate multiple properties of same element. In following demo I am using timeline and setting position parameter to zero so both animations will start at same time. If you are not using timeline then you can define two TweenMax tweens and they will run at the same time.

Happy to help. When you have multiple elements that need to do the same thing it's usually best to give them a class and use that as your target. That being said there are many ways to target all three paths from your demo and have them start at same time. You can add all three with an array like this: tween_journey.to([$journey1, $journey1_2, $journey1_3 ], 1, { strokeDashoffset: 0, ease: Linear.easeNone }); You could also use three separate tweens and add the position parameter of 0 to have them all start at the same time like this (this is what @mikel was talking about): tween_journey.to($journey1, 1, { strokeDashoffset: 0, ease: Linear.easeNone }, 0); tween_journey.to($journey1_2, 1, { strokeDashoffset: 0, ease: Linear.easeNone }, 0); tween_journey.to($journey1_3, 1, { strokeDashoffset: 0, ease: Linear.easeNone }, 0); Again, using a class is the most efficient way to do it, but I wanted to point out the other ways to target the elements. The position parameter is best when you have different tweens, but want them to start at the same time. Hopefully that helps a bit. Happy tweening.

@Sahil, Not sure what to say, I am so excited. I followed both links and signed up for medium and p5js. Yes it is a lot easier, not as many bells & whistles, but easier to handle and learn the different commands to put forth code. Medium, is so interesting with video's and stories about everything that pulls apart and puts back together the aspects of coding and writing, and art, etc...amazing. Then I followed a third link and found another learn to code for free site that will give me further instructions. Your input gives me more understanding of what I don't understand, thus switching gears and adopting p5js in place of Codepen for now, but planning on returning when my skill is much improved. Thanks so much for all your help. Soon I will know what I am talking about. lol You are a Superhero today!!

Hi @Haisan, Welcome to the GreenSock Forum. One option could be to morph two svg 'blobs' as in this example: Happy tweening ... Mikel

much thanks @Rodrigo. was try use https://github.com/azazdeaz/react-gsap-enhancer follow http://azazdeaz.github.io/react-gsap-enhancer/#/demo/using-transition-group?_k=fnq3qj but looks like it use older api. i thought enhancer was "best practice", but you example no use it. i get it to work now not use enhancer: https://codesandbox.io/s/61r70vyz1r enhancer not needed? any other thing about my script could be better? i try to learn best ways. again thanks!

Study this. https://greensock.com/draggable

Welcome to the forums, @ejoy. I don't really understand your question. Can you clarify a bit? Was there a GSAP-specific question you had? Do you have a codepen demo that you're working on maybe?

Thanks for sharing Craig. It makes me feel like one of these days all this coding stuff is just going to click in and I will be off writing really good animations and text with less worry and doubt then I have right now. In the beginning it is really hard to form questions that make sense, when basically I don't really know or understand what I am talking about. Some of your comments made me smile as in ask but then figure it out on your own and keep rolling on. My first coding is that Java Script, and I'm doing simple animations and working toward more difficult ones. Here I was smiling saying hey, this isn't so bad no math, then as the lessons increase here comes the arithmetic marching in and I said "wow" not good I really suck at math. Never could understand that stuff in school and now to learn coding I need to understand algebra. I thought this it it the end I will never learn how X & Y equal numbers, but maybe I am a bit smarter now because the way I am learning makes it all somehow make sense. Anyways, just wanted to let you know through all my rambling on, that your words have given me courage to keep going and not give up. See you around the forum!

Thank you @Sahil! I solved it thanks to this thread: and it works even in Edge (with Path2d polyfill) so it's even better than svg version, because Edge doesn't support mix-blend-mode.

Here is @OSUblake's demo showing how you can use morphSVG on canvas.

Hi and welcome to the GreenSock forums. The first thing you're missing, that has nothing to do with GSAP, is the fact that you're not passing the in property to the components or DOM nodes you want to animate. That's the most important thing a <Transition> tag needs to work. Second, you don't need to wrap every <Transition> inside a <TransitionGroup> tag. Use a <TransitionGroup> tag outside your array.map() helper to add each <Transition> to it: generateCards = () => this.state.items.map(item => ( <Card key={dasherize(item.name.toLowerCase())} {...item} /> )); // in the render method <div className="app-container"> <TransitionGroup> {this.generateCards()} </TransitionGroup> </div> Then get rid of the componentWillReceiveProps lifecycle method because is being deprecated and is considered unsafe: https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops Also this methods you have don't exist in the lifecycle of a component: componentWillEnter and componentWillLeave. By adding them in your code you're creating them and adding them to the component's instance, but nothing more, those are not being executed unless you do it manually, so is best to remove them. Here is the documentation regarding components and their lifecycle: https://reactjs.org/docs/react-component.html Finally this sample is somehow similar to what you're doing (without the filtering of course, but that shouldn't be too complicated to achieve): https://codesandbox.io/s/7lp1q8wba The relevant code starts in line 100, so don't pay too much attention to the code above that line. From line 100 below is what you need to check. Also take a look at the API of react transition group: https://reactcommunity.org/react-transition-group/transition http://reactcommunity.org/react-transition-group/transition-group/ Happy tweening!!

I'm wondering if @Dipscom should henceforth be known as The VueMaster? Of course, this should not be confused with the Classic View Master.

I'll have to agree with Carl here, it really seems to be excessive and a bit convoluted at the moment. Even though I have been following this adventure of yours for a little while now, I am still struggling to visualise what is the journey you are trying to implement. What you are doing wrong, in my view, is trying to have one parent component controlling all its children behaviour. What you really need to do is to have the children take responsability for their own behaviour and only report to the parent whenever they acomplish something. Vue already has all the behaviour you are trying to achieve baked into the framework, you're just not really tapping into it. Currently your components are nothing but HTML templates when they should be self-contained components with their own data and logic. You should stop what you are trying to do at the moment, go back to the Vue docs and digest the different patterns already designed by the framework. Because, what you are describing here is basic routing but you are not following Vue's pattern for routing and transitioning between routes. Here's a fork of your pen after dieting.

Nice Mr Wizard! :) Really inspiring to read about somebody in the same situation as myself. Problem solvers that looked at GS several times and thought it looked to hard, and then one day just tried it out and found it easier and much more flexible than I ever known! Thanks for all flash-support and that you hold back on the laughs. For all even newer to this than me, this is a really nice forum with lots of "wizards" with really good tips and solutions. Give GS a try and the forum something to solve.

BTW, there is only 1 box variable, and it's not copying the object. You can copy the value of a primitive (string, number, boolean, null, undefined, symbol). // Copies value var foo = "eggs"; var bar = foo; foo = "ham"; console.log(foo); // "ham" console.log(bar); // "eggs" For everything else, it's not that straightforward. Try searching for pass by value and by reference as it can be hard to explain. Variables do not store the value of an object, they just hold a reference to an object's location in memory, kind of like a home address. And just like your home address, it can be passed around and be used by more than 1 person. Notice how alpha and bravo appear to have the same value, but they are not equal. On the other hand, alpha and charlie are equal even though I changed the value of the msg property. That's because they are pointing to the same object. var alpha = { msg: "Hello World!" }; var bravo = { msg: "Hello World!" }; console.log(alpha === bravo); // false // Copies reference var charlie = alpha; charlie.msg = 123; console.log(alpha === charlie); // true console.log(alpha.msg); // 123 console.log(charlie.msg); // 123 And about there only being 1 box variable, that's because of something called hoisting. There is no difference between these two loops. All var declarations are moved to the top of their scope by the JavaScript compiler, so the first loop will end up looking just like the second loop. for (var i = 0; i < 2; i++) { var box = boxes[i]; } var box; for (var i = 0; i < 2; i++) { box = boxes[i]; } That's why this crazy looking code is totally valid. The num variable gets moved to the top. num = 8; num += 4; var num; console.log(num); // => 12