OSUblake

You might be using the wrong variable name? You have it named as $WCan, but then you are trying to animate $box, which doesn't exists. Try replacing $box with $Wcan.

Hi Kap, They're not supposed to go back to their previous position. They went from -20 to 0. If you want them to go back, you should use a repeat and yoyo. TweenMax.staggerFromTo(".box", 1, { opacity: 0.6, y: -20 }, { opacity: 0.2, y: 0, repeat: 1, yoyo: true }, 0.2);

That works! I was trying to describe #3. Basically checking the direction of the drag relative to another element.

According to the target's own x/y. Although I was just thinking about its current position when I wrote that. I implemented something sort of like this in that tile sorting demo. When checking for a collision, it also checks the direction of the draggable to make sure it is heading in the same direction as the tile it is hitting. If I only used the onPress position, my direction readings would not be correct.

What about a way to update the position it is being measured from instead of always using the position set by the onPress?

Hi Strnadj, The problem is your array, which you are sorting in a for loop. By the time your first animation runs, you array is already sorted, so it's getting the offsets from the elements in the sorted array at those positions, and not their current positions. You need to keep the modification of your array in sync with the animations. Another problem is that in the second line of the code above, you are trying to get the offset of the left item after it's already moved to a new position. You should record their positions before the animation. This should help you out. http://codepen.io/osublake/pen/emVbMM

I don't know of a good way without keeping your inset shadows on a separate element. I can get the inset shadow to animate 1 time, but after that it acts like a set tween. http://codepen.io/osublake/pen/dPdQKe

Hi OneIAmFor, You have the window responding to your mouse events, which is the entire viewable area. You probably only want the $box to respond your mouse events. However, getting the image to track the mouse position when you are hovering over the box might not work that well if you move the mouse too fast. What you could do is create a container for your image, and track the mouse movement in that area. You could set it up where you have to hover over the image before mouse movement in the container will start to move the image. I added red outlines so you can see when the mouse movement event is activated. http://codepen.io/osublake/pen/emVPMw

Put your scripts before the closing </body> tag. You're running the script before the html is ready. http://codepen.io/osublake/pen/raJvZr

Hi Yashi, Here's some mockups made for the Angular gsTimeline project. Look inside the HTML to see how a GSAP timeline is being used to create some of these animations. http://codepen.io/ThomasBurleson/pen/KwNoNP?editors=100 http://codepen.io/ThomasBurleson/pen/jEVyjr?editors=100

Hi Thomas, I don't know what the status of this issue is, but in the past I've been able to get around this by doing a fromTo tween. Unfortunately, I can no longer get that to work. Even trying to animate just one of the calc() properties in your demo will not work. Also, I doubt this has anything to do with this, but the grid won't start when the screen is smaller than ~600px. This error always shows up: md-grid-list: Tile at position 0 has a colspan (2) that exceeds the column count (1) If anybody else wants to check this out, here's the CodePen with the timeline code in it. You should see the tiles animate to a new position when you resize the screen. http://codepen.io/osublake/pen/azqYxE

This post might be helpful. It's about scrolling a page, but it sounds pretty close to what you described. http://greensock.com/forums/topic/8859-draggablescrolling-div-how-to-create-an-anchor-tagauto-scroll/ Demo http://codepen.io/GreenSock/pen/IoEFt

Try using yPercent and cutting the bounds in half. And since it won't pass its edge, you can use dragResistance instead. You could even change the dragResistance based on its position. TweenLite.set(nav, {x:0, y:0, z:0, yPercent: 50}); //... bounds: {minY: -50, maxY: 0}, dragResistance: 0.85, http://codepen.io/osublake/pen/NPyjRY

Hi Wind_kind, All you need to do is define some bounds, like a minY and maxY, or top and height bounds: {minY: -section[0].offsetHeight + 45, maxY: 50}, edgeResistance: 0.75, http://codepen.io/osublake/pen/NPyjRY

They'll animate at the same time. Regular tweens aren't sequenced like they are in a timeline. You should watch the animation sequence video. It starts out showing a bunch of regular tweens, and why you might want to convert them into a timeline.

Hi Virtous, As long as you are not storing a reference to the timeline, like in some other variable, it will go to garbage collection when ready. There is always going to be some sort of impact when you create a new object, but will it make a noticeable difference? Maybe if you are creating 20,000 of them, but not with the code you have above. Are you reusing the timeline, like to replay or reverse it, or do you create a new animation every time? If you are not using reusing it, and those are you are 2 lines of code, why don't you just use a regular tween? TweenLite.to(this.$nextSlide, this.settings.speed, {opacity: 1, right: '10%', ease: this.settings.easing}); TweenLite.to(this.$currSlide, this.settings.speed, {opacity: 0, right: '0%', ease: this.settings.easing}); For the CDN, you can customize what you want by going to the GreenSock Home Page and clicking on the download button right in the middle. It sounds like you only need the lightweight setup, depending on whether or not you really need a timeline.

Here's a function that will return a unique list of all the elements in a timeline. function getTargets(timeline) { function addTargets(list, target) { if (Array.isArray(target)) target.forEach(checkTarget); else if (target.nodeType === 1) list.push(target); else if (target.jquery) target.each(function() { list.push(this); }); function checkTarget(el) { if (el.jquery) list.push(el[0]); else if (el.nodeType === 1) list.push(el); else if (typeof el === "string") list.push(document.querySelector(el)); } return list; } return timeline .getChildren(true, true, false) .map(function(tween) { return tween.target; }) .reduce(addTargets, []) .filter(function(target, i, list) { return list.indexOf(target) === i; }); } http://codepen.io/osublake/pen/NPyKrM

I understand what Eliajf means. Most people learn by example, and this would extremely helpful. And it doesn't have to be production ready. In fact, most of this already exists through various CodePens that have been posted here. The problem is that there is no quick way to find what you are looking for. Searching on sites like CodePen is slow and clunky, and searching this forum requires sifting through long posts before finding a working example. It would be nice if there was an archive of demos for people to look through. Anytime a demo of value is posted here, or anywhere else for that matter, you could have a moderator tag it with keywords, a description, and relevant links, and then post it to some archive on this site. And the archive needs to be quick and filterable. Not like CodePen where they only show 6 items at a time. Just my two cents.

Hi SigSam, You can use the CSS plugin's clearProps property. timeline.set(".panel", { clearProps: "all" }); http://codepen.io/osublake/pen/EaoMdo

EDIT. My bad, I put the wrong info down

You should always use a server when developing. Running a webpage locally might block some JavaScript due to things like security policies, and your file paths might be incorrect. I would highly recommend using BrowserSync whenever you are developing, even if you use another server. Whenever you make changes to your files, it will refresh your browser and other devices you have synced, kind of like CodePen.

Oh wow, now I see some weird stuff going on. The problem with moving the playhead to beginning was caused by on an onReverseComplete callback, so I removed that. If the timeline is paused, the slider cannot move the timeline progress beyond 0.999. It needs to go to 1 to be 100% complete. Changing the UI Slider's max to 100.1 fixed that. Here's an updated version http://codepen.io/osublake/pen/GgORjV

Thanks. I originally started out trying to copy some of the algorithms DeSandro uses, but soon realized that most layouts can be achieved using a simple tracking loop. Just for the sake of comparison, here's what my demo would like if I used Isotope/Packery+Draggabilly over GSAP. The response time is a lot slower, my range of customization is very limited, and the layout seems to break when I drag a tile off screen and release it. +1 for GSAP http://codepen.io/osublake/pen/LEzKPr

I've been meaning to post this demo because I know this question comes up a lot. Play around with the different setup options to change the layout. For example... // Changing this to true will make the tiles the same width var fixedSize = true; // Changing this to true will create a column layout instead of a grid var oneColumn = true; CodePen URL: http://codepen.io/osublake/full/RNLdpz/

Hi Ingemar, It would help if you made a CodePen of the problem so we can see how or what is changing the play/pause button. In the example above, when the user drags the slider it pauses the timeline. What causes the button to change when the timeline is paused in your code? Are you using some data binding library like Angular, Knockout, or React to change the button? You are probably going to have to add in some logic in your slide function to prevent the button from changing. slide: function (event, ui) { timeline.progress( ui.value / 100 ).pause(); if (!isPaused) { // Don't change the button to pause } }