Leaderboard

Here's the thread about that pen... This is bascially all that tween is doing. It doesn't last long enough to actually animate anything. wave[0].setAttribute("d", drawPath(drawPoints(factor * settings.speed))); It really doesn't matter if you could touch the tween, pausing and resuming would make the animation jump because it's using the amount of actual time that has elapsed for the factor. var factor = totalTime*Math.PI; If you want, here's my waves demo from that thread with play and pause functionality.

Sounds similar to what @OSUblake did in this thread. That should get you started. Happy tweening.

Yes it is possible. If you look at the links I provided, you'll see how to create a morph and how to trigger an animation on scroll.

Hi @iamjkdn , Welcome to the GreenSock Forums. Wavify is a graphically elegant solution. If you want to act with just one Timeline and create some individual waves via SVGs, this could be an alternative solution: Happy tweening and waving ... Mikel

Hi @mikel Sorry, my response wasn't about your demo. It was for @Salmen as he mentioned changing sources for the images which is what Blake is doing in that radial demo.

Hi @PointC, In fact it was @OSUblake who wrote this excellent code - see my reference in JS. Kind regards Mikel

Hi and welcome to the GreenSock forums, I haven't seen the endTime() increase after clearing a timeline. Can you please post a reduced test case so we can run and test what is happening? Be sure to use the latest version of TweenMax (2.0.1) Thanks

Hi @Salmen, maybe so - sorry, have overwritten the pen: Take a coffee - have an idea ... Mikel

Hey @satyam, The ruling: like boys / girls first. Please prepare an example (CodePen) as far as you can. Then surely a helpful hand will come. Kind regards Mikel

I'd probably just adjust the eases a bit. Maybe something like this? You can adjust the config in those elastic eases to your liking or create a custom ease too. When you're looking for a smooth transition from the first to the second tween, you'll usually want to easeIn to the first and easeOut of the second. You had them both as easeOut in your original demo which can be problematic for the type of effect you're looking for here. Happy tweening.

Hi @gsmas That's one of the strengths of GreenSock. More here ...: Understanding the Position Parameter Clear the position ... Mikel

Hi @radutrs, Something like this ... Happy landing ... Mikel

Hi @Salmen, Welcome to GreenSock - and your coding becomes easy. Perhaps like this - here in two stages: Happy tweening ... Mikel

Welcome to the forums, Thanks for the demo, and congrats on getting it pretty close to what you needed. The tricky thing here is that when you are dragging you are using "x,y" but you are using offset() to determine the natural position of the elements on the page which returns left and top. Of course, only after finishing the demo did I consider switching the draggable type to "left,top". That may save some trouble, but I'm not sure. Anyway one component of this challenge is that in order to animate the elements back to their "normal" or start position you need to remember what that is. I store a startPos object on each element with draggables.each(function(index, element){ element.startPos = $(element).offset(); console.log(element.startPos) }) When I detect that the dragged element is in the "dropzone" I use this calculation to tween it to the dropzone. Its important to figure out the action targets offset minus the draggable's offset. We also need to zero out the x and y as they have changed while dragging TweenLite.to(this.target, 0.3, { left: (actionTarget.offset().left - this.target.startPos.left), top: (actionTarget.offset().top - this.target.startPos.top), x:0, y:0, scale:0.8, }); I'm changing the scale as it allows us to still see the active yellow border of the dropzone. When you detect that the dragged item is NOT in the dropzone, we send it back home using: TweenLite.to(this.target, 1, {x: 0, left:0, y: 0, top:0, scale:1}); I don't know if dragging using "x,y" performs so much better than "left,top" that its worth the hassle tweening and resetting both x, y, left and top in each tween. As I suspected (too late) if you just switch the Draggable type to "left, top", it will work fine and you don't have to worry about x and y. IMPORTANT The functionality for both demos works fine at any screen size and the boxes can be in one row or multiple rows. However, if you resize the window and change the flow AFTER the page loads it will get entirely messed up as you are changing the relative offsets of the draggables start positions and drop zone. If resizing is important to you, you may want to look into another approach, like FLIP (first, last, invert, play). This technique, although not using those terms, is described by @OSUblake here: You can also Google Flip Animations and probably find a lot about how the technique is used with other animation engines, but the core principles of how it works remain the same regardless of animation engine. https://aerotwist.com/blog/flip-your-animations/ The basic idea is that since you are changing the flow of the document, you need to figure out where elements should go based on that new flow. You can only determine that if you place your elements where they should be before you animate them to there. Hopefully the demos above get you closer to what you need as the main calculations and hooks are in place.

The word React is like the Bat-Signal for @Rodrigo. If we need him, perhaps we just fire up the Rodrigo-React-Signal.

Hi @James Neufeld You can change the source of an image.