Gillian

Ok. Thanks, it works with the loop.

Hi again, I have another issue about the drop area. Actually, the whole exercise is in a "box" div and there are some other divs with everytime one exercise ; user can navigate from one to the other using a next and previous button. I can't show it on a codepen (it doesn't work). But here is a part of the html structure (box 1, box 2 are not displayed together but one by one) : <div class="box box-1 current" id="box1"> <div class="consigne">Complète les expressions à l’aide des mots suivants :<br><br> <div class="move" id="word1">vol</div> <div class="move" id="word2">nuée</div> <div class="move" id="word3">rangée</div> <div class="move" id="word4">bande</div> <div class="move" id="word5">tas</div> <div class="move" id="word6">pile</div> </div> <br><br><br><br><br><br> <div class="exercice">Un(e) <div class="dropArea"></div> de cailloux</div> <div><img class="img" src="images/SHero1.png"></div> </div> <div class="box box-2" id="box2"> <div class="consigne">Complète les expressions à l’aide des mots suivants :<br><br> <div class="move" id="word1">vol</div> <div class="move" id="word2">nuée</div> <div class="move" id="word3">rangée</div> <div class="move" id="word4">bande</div> <div class="move" id="word5">tas</div> <div class="move" id="word6">pile</div> </div> <br><br><br><br><br><br> <div class="exercice">Un(e) <div class="dropArea"></div> d'assiettes</div> <div><img class="img" src="images/SHero2.png"></div> </div> I wrote a code to define the drop area and it works perfectly now. // Draggable labels var droppables = $(".move"); var dropArea = $(".dropArea"); var overlapThreshold = "100%"; Draggable.create(droppables, { cursor: "-webkit-grab", onDragStart:function(){ TweenLite.set(droppables,{cursor:"-webkit-grabbing", opacity:0.6}); }, onDrag: function(e) { if (this.hitTest(dropArea, overlapThreshold)) { dropArea.addClass("highlight"); } else { dropArea.removeClass("highlight"); } }, onDragEnd:function(e){ TweenLite.set(droppables, {opacity:1}); TweenLite.set(dropArea, {opacity:1}); if(!dropArea.hasClass("highlight")) { TweenLite.to(this.target, 0.2, { x: 0, y: 0 }); } } }); But, apparently, it concerns only the first div. For the second box, the drop area is not active (impossible to drop a label in it) and when the first drop area (box 1) is full (with a label), the second get the "highlight" properties I gave just as it was one and the same. Any idea ? Thanks a lot and sorry to not show a codepen.

Thank you for the replies. I checked the examples but it seems still a bit complicated for me. I did a codepen ; you can find it here : http://codepen.io/Gillian-D/pen/PzvOqz What I'm trying to do is to show the drop area when the label is on (hover) and bring the label back to his place if it doesn't enter the drop area.

Hi everybody, I was wondering if it was possible - I'm sure it is actually but I don't know how exactly - to define a drop area in which draggable elements would go. I saw the "trigger" property but I don't know how to use it. For instance : I created 6 labels like so : <div class="move" id="word1">vol</div> <div class="move" id="word2">nuée</div> <div class="move" id="word3">rangée</div> <div class="move" id="word4">bande</div> <div class="move" id="word5">tas</div> <div class="move" id="word6">pile</div> I give them draggable properties : Draggable.create(".move", { cursor: "-webkit-grab", onDragStart:function(){ TweenLite.set(".move",{cursor:"-webkit-grabbing", opacity:0.6}); }, onDragEnd:function(){ TweenLite.set(".move",{opacity:1}); } }); And now, I would like them to be dropped (not everywhere on the page but) only in a drop area like a <span> : <div class="exercice">Un(e) <span class="DropArea">............................</span> de cailloux</div> How can I reach this result ? Thank you for your consideration.

Yes it works perfectly now! Thank you very much.

Hi all, I'm a beginner with GSAP and I've got a problem with the "staggerFrom" tween. All "move" divs are animated : they are coming together (like one raw) and not one by one. I don't understand why, I don't know where the problem is. Could you help me, please ? Thank you very much. Here is my HTML code : <div class="consigne"><b>Complète les expressions à l’aide des mots suivants :<br><br> <div class="move" id="word1">vol</div> <div class="move" id="word2">nuée</div> <div class="move" id="word3">rangée</div> <div class="move" id="word4">bande</div> <div class="move" id="word5">tas</div> <div class="move" id="word6">pile</div></b> </div> My CSS code : .consigne { font-family: arial; font-size: 1.2em; margin-left: 5%; margin-top: 5%; } .move { color: white; padding-left: 20px; padding-right: 20px; padding-top: 3px; padding-bottom: 3px; border-radius: 5px; display: inline-block; } #word1 { background-color: #99009C; box-shadow: 0 0 1px #99009C; } #word2 { background-color: #51DB00; box-shadow: 0 0 1px #51DB00; } #word3 { background-color: #19B5FF; box-shadow: 0 0 1px #19B5FF; } #word4 { background-color: #FF8F00; box-shadow: 0 0 1px #FF8F00; } #word5 { background-color: #FF1714; box-shadow: 0 0 1px #FF1714; } #word6 { background-color: #FFCB00; box-shadow: 0 0 1px #FFCB00; } And my JS code : TweenMax.staggerFrom(".move", 2, {opacity:0, y:500}), 0.2;