Leaderboard

Hi @elegantseagulls You can add the duration like this: jetTL.tweenTo('turn0').duration(1); Happy tweening.

Hello @Mantvydas and welcome to the GreenSock Forum! You will get better performance animating position absolute elements versus position static or relative. This is due to the fact that when you animate the element it will be animated outside the flow of the document. That means that it wont have to calculate its surrounding elements in the DOM, since elements with position relative and static are still in the flow of the document. But its always best to animate with position absolute so when the element animates its surrounding elements wont need to be calculated, but sometimes a layout might not allow you to do so. Just my two cents, Happy Tweening Resources: CSS position: https://developer.mozilla.org/en-US/docs/Web/CSS/position CSS layout positioning: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning CSS visual formatting model: https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model

Another approach that requires a little more work, but is more flexible. It finds the closest point on a path, and does not require a proxy element. A couple threads on the technique.

Hi, I had to deal with something like this about a month ago. First you forgot to include jQuery in the pen's resources. Then in order to enforce the right bounds, you need to find the dimensions of the path you want to use as track using getBBox() and use those in the Draggable instance, but for that you have to line up the patch and the track correctly, otherwise it looks a bit funny: var bounds = document.getElementById("line2").getBBox(); var R = Draggable.create( "#patch_218_454", { type: "x,y", bounds:{ minX: 0, maxX:bounds.width, minY:-5, maxY:bounds.height - 5 }, onDrag: function (e) { console.log(e.offsetX); console.log(R); } }); Then in order to limit the patch movement to the path you want to use, don't use the Draggable instance on the patch but in a dummy object, then simply trigger the instance using the patch and update an independent GSAP instance using the onDrag callback. This sample from one of our heroes @Diaco shows how to do that: Here in the docs, more specifically in the config object properties you'll find the trigger property. https://greensock.com/docs/Utilities/Draggable Hope this helps. Happy Tweening!!!

I'd probably use a NodeLIst which is recreated each time you clone an .item. Then use an activeItem variable to see which one is in view and scroll to the prev/next one. Maybe something like this: I assumed you wanted to go straight to the new div when you create it. If that's not what you wanted, you could simply remove the tween from that event handler. Hopefully this helps. Happy tweening.

You can use the intersection observer for scrolling, and there are polyfills for IE and Safari. It's asynchronous, so some of your code might be deferred under heavy load, but performance should generally be better. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API Yes, check out the docs for the CSSPlugin. That's where most of the magic happens if you're animating the DOM. https://greensock.com/docs/Plugins/CSSPlugin Also, using CSS Containment can help with reflows/repaints, but browser support isn't that good at the moment. https://developer.mozilla.org/en-US/docs/Web/CSS/contain

@OSUblake How geometrically elegant, a true heir of Pythagoras

You can always use promises for complicated async behaviors. Async/await works in all modern browsers, and there are plenty of polyfills for older browsers, button.addEventListener("click", async () => { await new Promise(resolve => animateAsync(resolve)); // Starts halfway through the first animation animateSync(); }); function animateAsync(resolve) { var tl = new TimelineMax({ delay: Math.random() }) .to(elementA, 2, { x: 500 }) .add(resolve, 1); } function animateSync() { TweenLite.to(elementB, 1, { x: 500 }); }

I guess it depends on what your drawing, but most people animate the stroke-dashoffset and stroke-dasharray, like the DrawSVGPlugin does. https://greensock.com/docs/Plugins/DrawSVGPlugin Not saying that is the best technique, but it's certainly easy. For lines/polygons, I like animating SVGPoints directly. That can be used to create some pretty interesting stuff, like waves.

Not only that, but the source code of that three.js demo does the same thing I described. Sine.easeInOut is Math.sin(). The 3d perspective isn't important. Look at how the init and render functions work. Demo - https://threejs.org/examples/#canvas_particles_waves Source - https://github.com/mrdoob/three.js/blob/master/examples/canvas_particles_waves.html For a parallax effect, you can scale your values by some ratio, like in this post. I'm guessing @Shaun Gorneau did something similar.

@PointC Oh, dang! Thanks! Not sure why that didn't cross my mind.

Sounds like you're looking for the ScrollTo plugin: https://greensock.com/docs/Plugins/ScrollToPlugin That will allow you to scroll directly to an element like this: TweenMax.to(window, 1, {scrollTo:"#yourElement"}); Hopefully that helps. Happy tweening.

I hope you realize that getting the scroll position causes a reflow, so using ScrollMagic can negate some of those benfits. ? https://gist.github.com/paulirish/5d52fb081b3570c81e3a And scaling isn't as optimized as most people like to think. The browser can rasterize the content, limiting the amount of scaling you can do before it starts looking like crap, or it can repaint the content on every animation frame. Using will-change will cause rasterization. https://greensock.com/will-change https://dassur.ma/things/forcing-layers/ To scale x, simply scaleX. .to( animate.down, 1, { x: animate.neg, y: animate.pos, scaleX: 0, repeat: 1.25, ease: Sine.easeOut, yoyoEase: true }, "together" ) To prevent squashing/stretching of children during a scale animation, you can apply a counter scale.

@PointC this is exactly what i wanted!! thank you very much, well this gonna be my first try using greensock on my project. and yes it is true that everytime i clone an .item it should go straight to that div/item. Thanks

x1 is a property of a line, but it's value is set on a different path/object. this.line.x1.baseVal.value = 150; Definitely not a convenient value to animate. Try using the AttrPlugin. https://greensock.com/docs/Plugins/AttrPlugin TweenMax.to(this.line, 1, { attr: { x1: 150 }, stroke: "red" }) Updating to the latest version of GSAP wouldn't hurt either. https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js

Specifically to the part of the question "How can I get each line of balls moving a bit slower than the last line" ... you can pass a speed parameter to `new Circle` and use whatever math you like to calculate that value. I used something simple to illustrate.

Hi @Marme Welcome to the forum. Here's a quick demo using Pixi.js and a gradient mask rather than a blur filter. Maybe you can tinker with it a bit and see if it's a direction you want to go with your project. Hopefully it gives you some ideas. Happy tweening.

The progress() method is available for tweens too. https://greensock.com/docs/TweenMax/progress() If you have a bunch of loose tweens, I'd recommend a timeline for easier control, but that's just my two cents worth. Happy tweening.

Is this the effect you're after?:

@chiho this is the same question you asked here and Blake already invested time trying to help. It becomes incredibly difficult to offer assistance if we see posts being duplicated and deleted. Please keep your discussion in 1 thread.

Baby steps, but I am aware and it's something on my list of pursuing for additional improvements as well. If you have any recommendations, I'm all ears I've implemented the approach you suggested and noticed that any property which can be managed through matrix3d() is combined into a single definition, which I was unaware of until now! Thanks for the recommendation and I'm already noticing an improvement in the scrolling experience.

Well, it would not work without GSAP, so thanks for you and your team

Hey @Jonathan, Thank You for Your answer. This is what I needed to know

Looking good! ?

Hi @Marme, Welcome to the GreenSock Forum. If you are looking for a randomly controlled background animation, take a look at this one: You can customize a number of adjusting screws. Plus blurred SVG circles instead of the gulls ? Best tweening ... Mikel

Thanks for providing all the clear demos. Without knowing more of the requirements I would agree with Dipscom's solution of using a function to return a timeline on demand. What he is referring to as the 'cursor' we typically call the playhead (if that helps clear things up at all). The engine won't automatically unpause a child that you explicitly tell to be paused as that could really confuse people. "wait, I told this timeline to be paused, why is it now playing?" I guess I'm not understanding why the first example you provided (where you unpause it when you add it) is not suitable. After some thought and tinkering it seems you could place a callback at the same time as your paused timeline is inserted and use it to unpause that nested timeline. Not sure if that's really the best solution, as there will an imperceptible delay (of a few MS) between when the function is called and when it executes, but it might be an option for you document.getElementById("add").addEventListener("click", function() { mainTl.call(unPauseATimeline, [secondaryTL]); mainTl.add(secondaryTL) }); function unPauseATimeline(timeline){ timeline.play(); }

Interesting question... I assume you are aware of much what I am about to write, I'm just 'writing it out loud' as it helps me think.. You know that you can add a nested timeline that will only play when the parent timeline 'cursor' gets there without having to set it's property to true. However you want to create a timeline, wait for an async response in the future then add it to the parent. May I ask you why? Why must you create the timeline before the async response? Creating timelines is generally so cheap you could just wait for the response before creating and adding the nested timeline. You also say the secondary timeline may be reused several times. Well, that begs another question. Are you saying you want the same timeline nested into different timelines? And somehow it knows if it's been played in any of the parents? Or do you want the same type of animation created after a certain event has occurred? For the second option, returning a timeline from a function will do the trick.

It looks like this is the 3rd time you've posted a version of this question about your canvas project. In your most recent post (which you've now deleted), Jack gave you this answer: We're more than happy to help with GSAP related problems, but these general JS and canvas questions should be posted on a more general forum. Perhaps you could try Stack Overflow.

Hi @Mantvydas Relative positioned elements should animate just fine. You said the animation is sometimes sluggish. Did you mean on the first play or randomly? If it's on the first time your timeline plays you may want to try this: tl.progress(1).progress(0); // this will record all the values upfront. I also don't know what those elements are and how big they may be. How hard are you pushing the browser? Are they the only thing animating or are they part of a timeline with hundreds of elements moving at once? If you can put together a demo, we can get a better idea of what may be causing any sluggishness. If there is an issue, it's unlikely to be a GSAP related problem. It's most often browser related as that's where all the rendering happens. Hopefully that helps a bit. Happy tweening.

@DjKarimi thanks for advocating for GSAP among your peers. I hope your enthusiasm rubs off on them While I'd admit that the particular code chunk you quoted from anime is indeed nice and concise, there are some tradeoffs performance-wise with implementing things that way (for any engine) which is why we didn't do that with GSAP. But it's entirely possible to get almost exactly the same concise code chunk with GSAP using a single helper function as I demonstrate here: Here's the helper function : function multiTo(target, duration, vars) { var tl = new TimelineMax(vars), copy = {}, reserved = {delay:1, onComplete:1, onCompleteParams:1, onCompleteScope:1, useFrames:1, onUpdate:1, onUpdateParams:1, onUpdateScope:1, onStart:1, onStartParams:1, onStartScope:1, onReverseComplete:1, onReverseCompleteParams:1, onReverseCompleteScope:1, onRepeat:1, onRepeatParams:1, onRepeatScope:1, yoyo:1, repeat:1, repeatDelay:1, data:1, paused:1, reversed:1, callbackScope:1, id:1, yoyoEase:1}, val, i, p, d, v; //create a copy of the vars object that doesn't have any of the values that are reserved for the timeline for (p in vars) { if (!reserved[p]) { copy[p] = vars[p]; } } for (p in copy) { val = copy[p]; if (val.push && val.length) { d = duration / val.length; for (i = 0; i < val.length; i++) { v = {ease:copy.ease}; v[p] = val[i]; tl.to(target, d, v, d * i); } delete copy[p]; } } tl.to(target, duration, copy, 0); return tl; } And here's how the GSAP call would look: var morphing = multiTo('#morphing .polymorph', 2, { attr: [ { points: '70 41 118.574 59.369 111.145 132.631 60.855 84.631 20.426 60.369' }, { points: '70 6 119.574 60.369 100.145 117.631 39.855 117.631 55.426 68.369' }, { points: '70 57 136.574 54.369 89.145 100.631 28.855 132.631 38.426 64.369' }, { points: '70 24 119.574 60.369 100.145 117.631 50.855 101.631 3.426 54.369' } ], ease: Power1.easeOut, repeat:-1 }); Basically it just interprets an array of values as if you want them equally spaced inside the timeline. Also note that like most other engines, anime suffers from time leakage in loops, meaning that it uses a simplistic "when the animation is done, start the time over again" which isn't precise for the overall time. It's not a true loop. GSAP implements logic internally to avoid the leaking. Here's a demo comparing the two: Open the console and watch how the gap grows larger and larger in anime between the actual time and the animation's time. There will always be some amount of lag, up to one tick (typically less than 17ms), but anime keeps growing the gap on every iteration. It's noticeable if you watch the animations and see how they start off synchronized and then the drift after a while. GSAP remains true to the actual time, but anime falls behind. Anyway, is this what you were looking for?

Hi @DjKarimi, There are 12 lines of code, and it's effortless and fast. + the libary. You can also do it with the GreenSock AttrPlugin - for example: Does this help? Mikel

Looks like they're using canvas for that effect. @Sahil has a nice demo and tutorial about canvas mouse follow in this thread: You could make it happen with SVG too, but canvas would probably be a bit easier in this case. Good luck and happy tweening.

I thought you figured it out. Here is fork of Blake's previous demo. Here I am calculating two lengths from where scan should start and end, it is being determined by how much your mouse has traveled. It works fine on curves and edges, except on sharp edges where angle is too small. Actually it works just fine if you set your goals realistically. If you want more control then you might want to go through Blake's second demo. Again to understand how everything works and how you can make changes as per your requirements, you will need to get through the fundamentals of how paths work and the code we have posted. @OSUblake Do I get the trophy?

Did you notice how the line turns green when you are close to the path in my boxes demo. That's kind of what you're asking, but it will still allow you to jump around. Really simple demo showing the problem.

Yeah, that's one problem with finding the closest point on a path. Think about a circle. There would be an infinite number of closest points if your mouse was in the center. I commented out the distance property in the object returned by that function because I wasn't using it, but you could use that to run some logic to make sure it doesn't jump around. Breaking your curve down into smaller chunks might make that easier. Somewhat related demo where I create bounding boxes around smaller parts of a curve. You can see that progression could follow the order of the boxes.