Leaderboard

Hi @SummerBummer, If you tween the same object, the same property, you should have in mind what was and what is going on. A little more to overwrite here and in the docs overwrite: String (or integer) - Controls how (and if) other tweens of the same target are overwritten. There are several modes to choose from, but "auto" is the default (although you can change the default mode using theTweenLite.defaultOverwrite property): "none" (0) (or false) - no overwriting will occur. "all" (1) (or true) - immediately overwrites all existing tweens of the same target even if they haven't started yet or don't have conflicting properties. "auto" (2) - when the tween renders for the first time, it will analyze tweens of the same target that are currently active/running and only overwrite individual tweening properties that overlap/conflict. Tweens that haven't begun yet are ignored. For example, if another active tween is found that is tweening 3 properties, only 1 of which it shares in common with the new tween, the other 2 properties will be left alone. Only the conflicting property gets overwritten/killed. This is the default mode and typically the most intuitive for developers. "concurrent" (3) - when the tween renders for the first time, it kills only the active (in-progress) tweens of the same target regardless of whether or not they contain conflicting properties. Like a mix of "all" and "auto". Good for situations where you only want one tween controling the target at a time. "allOnStart" (4) - Identical to "all" but waits to run the overwrite logic until the tween begins (after any delay). Kills tweens of the same target even if they don't contain conflicting properties or haven't started yet. "preexisting" (5) - when the tween renders for the first time, it kills only the tweens of the same target that existed BEFORE this tween was created regardless of their scheduled start times. So, for example, if you create a tween with a delay of 10 and then a tween with a delay of 1 and then a tween with a delay of 2 (all of the same target), the 2nd tween would overwrite the first but not the second even though scheduling might seem to dictate otherwise. "preexisting" only cares about the order in which the instances were actually created. This can be useful when the order in which your code runs plays a critical role. Kind regards Mikel

Excellent! I was just about to take a stab. Very glad you found a solution with 1 timeline. Definitely the way to go.

@wcomp - if you're already making 40 paths, you'd be better off building the sprite than morphing that many. You can do the sprite in SVG too, since you are using Inkscape already. If it were me, I'd use the viewBox to hide the off-screen sprites. Just remember, for smooth animations, you'll want to be close to 60 fps (down to 30 would be acceptable too). So you'd end up with an SVG looking like: <svg viewBox="0 0 100 100"> <g class="transformMe"> <path /> <path /> <path /> <!-- ...etc. Each, in this instance would be 100 units appart --> </g> </svg> and your GSAP looking like: TweenMax.to('.transformMe', .5, { x: -2900, // if you had 30 sprites (100 * (30 - 1)) ease: SteppedEase.config(29) // 29 steps cause first one is already in view })

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

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. 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.

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 @LeoZ, If the objects are next to or above each other, it can work that way. If a random placement is required, a bit of math and some conditions are needed ... Happy tweening ... Mikel

Aha! That may be the key. I wonder if either the external CSS files haven't fully loaded at that time yet or perhaps they don't contain the style you think they contain. Again, I really wish you could provide an actual reduced test case that we could see for ourselves. I'm not sure we can do much else without that. I'd bet that if you put the styles directly in the page it'd work, though I know that may not be ideal in your scenario.

@miks I believe you're thinking about draggable (https://greensock.com/docs/Utilities/Draggable) and edge resistance (sample here: https://greensock.com/draggable) With that, you might be able to setup a watcher to see if current `.y` > `maxY` and load more based on that. Though that's not something baked into Draggable as far as I know.

Can you send me a link to the page where you tried my suggestion? It would be really helpful to be able to look at it and see if we can figure out why that code isn't working. Is netlify producing an error that says it doesn't allow you to load GSAP? Are you able to upload TweenMax to your site along with your other JavaScript files? Perhaps they don't like things that come off of a cdn. Just guessing here, I haven't used free hosts in a very long time, but it just seems very strange that a host would feature react, but not allow GSAP. Kind of puzzled.

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!

Figured it out!!!:

Hi again The best way to get this solved faster is to create a limited reduced codepen demo using the CSSRulePlugin setup CSS, JS, and HTML. Then once you see it run correctly in codepen you will know that the issue is with your local react setup. Plus we can actually see some code with an animation to test live. But without seeing your code in a live editable environment we wont be able to see whats going on to help you better. You should also check out StackOverflow for CSS pseudo-elements and React: https://stackoverflow.com/questions/28269669/css-pseudo-elements-in-react/28269950 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

I assume that the bundling process doesn't return any errors and that the styles are being applied to the DOM. This happens both in development and production? In your webpack dev file I found this commented out: // new MiniCssExtractPlugin({ // filename: '[name].css', // // chunkFilename: '[id].[contenthash].css', // }), So I assume that in development the CSS is being added to a <style> tag in the header section, right?. Honestly at this point I'm a bit lost and running out of ideas, because this error: Cannot access rules, basically means that the rules plugin can't find the rule you're passing to it. I think we'll need some live sample to check. Finally just in case, have you tried to rename the actual css class to something without any underscores?.

What about this?: console.log( $(".header__outer") );

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.

Hey! Thank you for the speedy reply. Everything is all set in both IE and Edge now it appears. Excited for the new features. Cheers.

Hello @greenanimation and Welcome to the GreenSock Forum! Animating a border requires nested elements for each side, animating each after the other. The following is an example of animating a border with GSAP using a 1 timeline with 4 fromTo() tweens: DrawSVG would give you more freedom with shapes. Or you can use a DOM or SVG mask to do this. Happy Tweening