Leaderboard

Hi @wcomp You may want to try pop.svg. https://github.com/ste-vg/pop.svg

Little bit different implementation, but it works fine even when you resize the window and the logic is much simpler than the original.

A demo would be helpful because your code doesn't look right. It should probably be something like this. update() { TweenLite.to(this.target, 0.6, { opacity:0, scale:0, svgOrigin:"0 0", onComplete: this.close, callbackScope: this }); }

Related thread.

Hi and welcome to the GreenSock forums. thanks for the demo. It seems you were setting this.x as the target of your tween bad TweenMax.to(this.x, 0.4, {scale: 2} ) TweenMax.to(this.y, 2, {scale: 2} ) good TweenMax.to(this, 0.4, {x:400} ) TweenMax.to(this, 2, {y:400} ) obviously, you'll have to use the right values for x and y. Just wanted to show you how to get the tweens working.

It eliminates the need to wrap mainObject.closeDragMethod in a function. I wrote a little about scoping here. If you're curious, here's a demo that shows how I typically set classes up with draggable. Look at the ColorItem class on about line 65. It doesn't use Angular, but it's the same concept. I make the draggable callbacks part of the class.

Hello @mdo and Welcome to the GreenSock Forum! The issue is due to how the <span> element CSS display property works which defaults to inline, as well as how opacity works. Not to mention that the text is aligned to center. So since your using opacity: 0 that will just fade out but the element will still take up the same about of space in the DOM. So i added the CSS property display: "none" in the tween which will automatically add the display: none property after opacity reaches 0. GSAP is smart enough to do that I changed opacity with GSAP special property autoAlpha for better performance (See below for more info). Along with adding the CSS width property so it can be smoother. I also added autoRound: false so width can animate on a sub-pixel level instead of round whole numbers. Of course there could be more done to try and animate the static non SplitText text separately and in sync with the SplitText text. But hopefully this all makes sense: Keep in mind that i changed opacity to autoAlpha for better performance. See CSSPlugin Docs on what autoAlpha is. https://greensock.com/docs/Plugins/CSSPlugin#autoAlpha autoAlpha: Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want. //fade out and set visibility:hidden TweenLite.to(element, 2, {autoAlpha:0}); //in 2 seconds, fade back in with visibility:visible TweenLite.to(element, 2, {autoAlpha:1, delay:2}); Happy Tweening

I just added a little blurb to the docs to make that more clear

hmm, the video you linked to is for helping people with a very specific and somewhat common scenario of having competing from() tweens on the same properties of the same object. For TimelineLite.set() and TimelineMax.set() immediate render is set to false by default (as long as the start time isn't 0) If a set() is scheduled to run at 4 seconds into the timeline it will not render immediately at a time of 0. The engine is smart enough to know that a set() at 4 seconds should wait until its scheduled time. Please change your demo to use this code: TweenLite.set("#demo", {visibility:"visible"}) // it is important to set immediateRender:false when multiple from()-based tweens are animating the same propreties of the the same object. var immediateRender = true; //switch to true to see the difference var tl = new TimelineLite(); tl.set(".green", {opacity:0}, 0) .set(".green", {opacity:1}, 2) .set(".green", {opacity:0}, 4); You'll see that the green item starts with opacity 0, switches to opacity 1 at 2 seconds and goes invisible again at 4 seconds all as expected. There is no need to change the default value of immediate render on any of those set()s in this situation.

Thanks, Jack. I think I've got it worked out. I built a pretty extensive set of input fields and select menus that are triggered visible based on which ease-type is selected. I'm using a switch statement to build them out from there.

Let us know if you still need any help. Since various eases accommodate different types of config() values, you can't just plop a common chunk of code in there for everything, but you could certainly build something that'd have conditional logic where necessary to accommodate parameters.

Hi @Mikel, actually I learn at the same time that I code, there are things that I still miss in the construction with timelinemax. Thank you for your help and your speed, I will look at this.

Hi @kosmo, Welcome to the GreenSock Forum. I'm not sure if I understood you correctly. So my interpretation. You need an open path, an open circle. The endpoints can be on top of each other. Here is the dry version without scroll action: For all friendship: Your code looks a little bit weird. Study the docs and build up piece by piece. Good luck and happy tweening ... Mikel

Hi, It did not let me go ... Now its more or less safe. Mikel

Its a little tricky to have width and or scaleX be added after the words go up since those properties are whats used to animate the non animated text (.c-intro-title__fixed-part) to stay centered. What you want, would require me to re-layout how the markup and initial CSS is so it can use other ways to animate the centered text so its responsive. But when i have more time i can try and do that but im a little strapped for time right now. If it was me, I would first work out the auto centering animation of the h1.c-intro-title element. And then once that auto centers, work on animating its children with SplitText. Since the <h1> element is what needs to be animated to account for its children's width due to how you want to have no width or scaleX applied, until after the SplitText animates the y property (translateY).

Thank you very much for your help. Not only quick and accurate response but also practically shown. GSAP is my new favourite!!! Have a great day and thank you a lot!

It doesn't even look like you have a "close" method. You do have a "closeDragMethod" though. Again, a demo is really the only the way to understand the issue. However, the code you posted gives a little more insight into the problem. It's just a scoping problem. You're not using arrow functions or setting the scope of the draggable, so "this" inside the draggable callbacks refers to the draggable instance. Therefore, this.close() or this.closeDragMethod() will be undefined. So setting "this" to a variable like you did is correct approach. You could still set scope in your callback. onDragEnd: function() { if (this.hitTest(".trashcan", "10%")) { TweenMax.to(this.target, 0.2, { opacity:0, scale:0, onComplete: mainObject.closeDragMode, callbackScope: mainObject }); } ... }

Glad it helped! Yeah, if you're looking to take your animation code to the next level, definitely check out this article if you haven't already: https://css-tricks.com/writing-smarter-animation-code/ Happy tweening!

Yes! That's exactly it! I'm gonna need to study that code though. Thanks for your help!

Hi @jukoor, For this I would use staggerTo () and an onComplete. Note that if you define an onComplete (or any callback for that matter) in the vars parameter of a staggerTo(), it will be called for each tween rather than the whole sequence. Happy tweening ... Mikel

Hi and welcome to the GreenSock forums, It's really tough to guess what is going to work in your application. A small demo would really help as explained here: Working with callback scope can be tricky until you see it in practice. In the world of GSAP the scope of a callback is the tween or timeline that is calling the callback. If a tween calls an onComplete callback, then the keyword "this" inside that function is going to refer to that tween. If you want "this" to represent some other object, then you need to specify that in the callback scope. Please study this example and see if it helps var myObject = { x:1234567 } TweenLite.to("h1", 1, {x:100, onComplete:tweenScope}); TweenLite.to("h3", 2, {x:100, onComplete:myObjectScope, onCompleteScope:myObject}); function tweenScope(){ // this = the first tween console.log("the duration of this tween is " + this.duration()); //1 } function myObjectScope() { // "this" = myObject console.log("the x of myObject = " + this.x) //1234567 } View on codepen and open the console I suspect in your case you want a scope of mainComponent or this. also, I don't think you want the () when defining your callback usually bad because close() will execute immediately onComplete:mainComponent.close(); good onComplete:mainComponent.close;

Hi and welcome to the GreenSock forums, Nice job on the animation. Looking good. I don't really know what you mean by "the animation orders starts to stray". I looked at it a bunch of times and to me it always looks the same. Please keep in mind it is extremely difficult to look at 200 lines of code and try to make sense of it. Especially when we have no idea what things like clone6 and clone5 actually look like or where they are supposed to be. GSAP's timing is also super precise. On each update it renders things where they should be at that time... even under stress. I wonder if perhaps your negative delays are causing some problems. A negative delay isn't really logical. Can you wait -3 seconds for something to happen? I would strongly suggest you study the position parameter and use it to schedule when you want your tweens in your timeline to start https://greensock.com/position-parameter What you are doing as tl.to(something, 1, {x:200, delay:-1}) should be tl.to(something, 1, {x:200}, "-=1");// start this animation 1 second before the previous animation ends. It would greatly help if you could make those changes AND simplify the demo as much as possible. Remove all unnecessary tweens and clearly describe the behavior you are seeing that you are not expecting. Thanks!

Hi @LeoZ, I have no idea if something like this works with a double click (1st click: button selection, 2nd click: free field selection ??). Here a random version Kind regards Mikel

Hi @SummerBummer, Welcome to the GreenSock Forum. Your click function overrides the x value of the stagger one. So give it a try: 'overwrite: 0' Happy tweening ... Mikel

You might be able to segment the tail of your arrow up into several paths that each autoRotate on their own to achieve something similar. It'll probably take a lot of trial and error with some other properties to get where you'd need, though, and may be tough to get the curve as smooth and your illustrated sample. Think on these lines: https://codepen.io/lukasoe/pen/YNEoQR https://codepen.io/pmk/pen/YPdJax Otherwise, you could do several morphs, or a sprite map as mentioned above. Here's a sample of a sprite animation that I created just using GSAP's stepped ease.

Although there are probably many ways to approach it, the demo below from @OSUblake should give you an idea of the level of complexity involved in something like that:

Here I leave a repo in GitHub with a React Native demo app and some explanation about how to implement the plugin in your project. The performance using Direct Manipulation is really good, specially when compile our apps in a release version. https://github.com/tufik2/TweenMaxRN Video: https://www.dropbox.com/s/ioghw2t7ua5agpn/video.mp4?dl=0

Hi, Honestly I don't know how that can be done with just GSAP. Perhaps using ThreeJS and GSAP but I know nothing about ThreeJS. What I can tell you is that this particular letter: Was handed to my by a client as a PNG sequence. It is used in Streammm which is a native App. I worked on the front end that uses GSAP and PIXI, so my first guess is that this could be made using a 3D rendering software or engine. Here is the map used to create the animation in PIXI: I'll ask my client about the origin of the image and let you know just in case. Sorry that I can't help you beyond this. Happy Tweening!!!

You're welcome. Well is just a pattern that you'll see quite a bit here in the forums and some bits I gathered throughout my time here. First unless is necessary I always create Timeline instances paused, because otherwise the time is already running and the playhead is moving forward. Granted, normal JS execution to add the instances might take only a few milliseconds but in some cases that could cause some unexpected behaviour. Now I'll jump forward to this: tl.reversed( !tl.reversed() ); Reversed is a getter/setter of the reverse status of a GSAP instance. By default all GSAP instance are created and going forward, therefore by default reversed() returns false. Since I'm using reversed() as a setter (by passing the opposite value) I need that the reverse status of the timeline to be true. Now since I created the timeline paused the playhead won't go anywhere unless I change that, hence I add a reverse() call at the end of the timeline. Now the timeline is paused, so I'm telling the timeline: "Go from being paused to play backward", but since the timeline is at zero seconds and negative time doesn't exists (although @GreenSock and/or @OSUblake might be working on that ) the timeline stays put at zero seconds and the reversed() value is true. Then on the first click (or any other event that triggers it) I toggle the reversed() value to false, which tells the timeline to go forward and so forth. Basically is just a way of doing it without the conditional block in it, which saves a tiny amount of time and a couple of lines of code. Hopefully this makes things more clear about it. Happy Tweening!!!

Hi, I don't know if this is the ideal way of doing it, but the best approach I can think of is to create a reference to the timeline instance in the data() callback: data() { return { tween: new TimelineLite({ paused: true }) }; }, Then in the mounted hook, add the instances to the timeline: mounted: function() { this.tween .to(this.$refs.appLogo, 2, { rotation: 360 }) .reverse(); } And finally in the methods object define a method to play/reverse the instance: methods: { toggleLogoTween: function() { this.tween.reversed(!this.tween.reversed()); } }, Here is a live reduced sample: https://codesandbox.io/s/l261n378km Happy Tweening!!

Hi and welcome to the GreenSock forums. Thanks for the demo. The biggest problem is that you create a new timeline on every click. Please see the console logs in this demo: If the menu is already open, there is no need for a new timeline. You really want to reverse the timeline that was created on the previous click, not one that was just made. There are a few ways to go about this, but your end result needs to be that each menu has a reference to its own animation that it is in charge of playing or reversing. Probably the best approach to this setup is what @OSUblake does in this thread This version from @pointC may be a little easier to understand (you would have to change the interaction to be click-based of course) and a similar approach

Hi Robert, Check the docs for NPM usage: https://greensock.com/docs/NPMUsage Scroll a bit until you find the part of tree shaking. It should be a bit like this: import { TweenLite, ScrollToPlugin } from "gsap/all"; const scrollPlugin = ScrollToPlugin; Try that and let us know how it goes. Happy tweening!!

Thanks Carl! Well, GSAP is too smart for me Sometimes in the past when I animated the same element on multiple timelines (not at once, but premade timelines) I stumbled into this. I didn't know that .set() which added to the start of the timeline is immediateRender:true and when it is added any other position immediateRender:false. I will keep it in my mind, thanks!