EricMtl

May 3, 2023

🎖️ 🎖️ !!!!! Thank you Rodrigo !! That's what I was looking for. I was actually revisiting my code considering hitTest(), and this third code suggestion should be enough for me to see the light ...and the right way to drag !!

Thx again to you and Jack for your time

Eric

May 2, 2023

I suppose you see it...

So it may be easier for you to understand that:

- cards into the shoe move with the shoe when the shoe is drag

and

- cards must not move with shoe when card in on the mat.

and

- card must move again with the shoe when that card is back to the shoe.....

So, in that context, is my approach realistic or counter-intuitive ?

Thank you

Eric

May 2, 2023

I finally could drop my code to Stackblitz...

https://stackblitz.com/edit/vitejs-vite-abcfjy?file=src%2Fmain.js,index.html

Let me know if it appears...

Eric

May 2, 2023

Yesss! I think it'd be a win if I can add the same mechanism in the other way (i.e reincorporate the child back to its red parent)

Many thx to you both for your help and expertise

Eric

May 2, 2023

Thank's for your time Jack. Maybe my translator was not so reliable Sorry for that.

I'm just trying to consider the red element as a "container/vehicle" to the yellow one.

In my case, the card no longer "belongs" to the shoe when dragged onto the mat. Then, the shoe can be dragged independently of the card. But it becomes part to the shoe when it is placed back in it.

Your explanations lead me to think that it is easier to have the opposite approach:
- always consider the card as independent from the shoe (even if visually they're into it)
- propagate dragging to a collections of elements that the shoe is supposed to contain (a set of cards, in my case) when I want to drag the shoe.

Eric

May 2, 2023

Wow ! Thank you Jack for your confirmation ! Impressive how it sounds easy!

It seems that context plays an important role and z-index plays none...

Just one more question (if I can.. ) : Will both elements will always stay soldered as they were defined into embedded <div> or is there a way to drag each separately (i.e move the red container without moving yellow element when the latest is outside) ?

Thx again !

Eric

May 1, 2023

OK. Sorry for the sample.

Can you confirm if the following Diaco 's sample still working fine in GSAP 3 ?

In my Svelte adaptation, the yellow child element is disappearing behind the white background as soon as it gets out its red parent... Thx!

Eric

April 30, 2023

Hi all,

I use Draggable in order to drag an element (a playing card) from a container ( a shoe) to another (a mat). I'm not the first to do that, for sure,

I set the bounds property to .mat class that contains the shoe

Dragging works inside the shoe but the card is cropped and seems to disappears under the mat, as soon as It move outside the shoe...

Any clue ?

Eric

November 10, 2022

Thank's Rodrigo !

I understand.

However, it could be hardcoded as what I need is not really dynamic (the depth may be fixed and no need to add/delete items on the fly...). I just plan to put items description into a JSON/XML file but this could be done later.

For me, the main issue is to imagine a recursive GSAP visual effect for options (button ?) that leave room for the following ones and so on... Something like that!

Eric

November 10, 2022

Hello all,

Do you know where I can find samples of (or get clues to build a) menu fed by few levels deep JSON files and "scrolling" between levels ? By scrolling, I mean moving in order to keep only two or three last levels on the same space at screen.

We could find many of these in Flash/AS good ol'days...

Thank for your help!

Eric

May 20, 2020

Ooch ! My eyes betrayed me...

I must admit that I spend too long time on this bug without a break...

Again, thank you all for your assistance and your responsiveness.

May 19, 2020

I rapidly checked sources codes and relocated included script files to the end of <body> .

For the same index.html file , seems that all depends of these paths....

That sequence works

<!-- <script type ="text/javascript">src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"</script>

</body>

That one fails

<!-- <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

May 19, 2020

19 minutes ago, Greg Stager said:

Hmm.. certainly a lot going on there.

If I am not mistaken - looks like some jQuery code in there as well.

would need to include those libraries as well.

But - all that aside -

Not sure I would call trying to copy paste from a codepen “basic training”. As a beginner - I would advise against copying and pasting code as a means to learn this craft. I would suggest starting small and keying it all youself.

That will help you to be much more “intimate” with your own code because you’ll know firsthand how all the elements came to be and how they fit together.

Just my two cents.

14 minutes ago, PointC said:

You don't need to pay, but you do need an account.

I do think you just have a 'DOM not ready' problem here. I'd try moving those scripts to the bottom of the page or check if the DOM is ready in your custom JS file. Check out this info from @Jonathan for more info about that.

@PointC :I am not a JS specialist but I'll try do move all "include" scripts to the end of body.

@Greg; ...when you think you're going to save time by copying/pasting....

Thx you all for your time!

May 19, 2020

25 minutes ago, PointC said:

Have your tried loading your scripts before the closing </body> tag?

Pfff ! I registered to CodePen and dl'ed the zip file.

Finally the /dist folder (not the /src one) content works !!!

Thank you for your help.

May 18, 2020

28 minutes ago, PointC said:

Are you talking about this demo?

If so, did you export the demo?

Yes exactly! But I didn't noticed this option... So I need to subscribe to retrieve all complete samples... Thank you for that !

May 18, 2020

-----------------------------------------------------------------index.html file-----------------------------------------------------

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div class="box" id="box1">Drag and throw me</div>

<div class="box" id="box2" style="background-color:red;">Drag and throw me too</div>

</div>

<ul>

<li class="controlsTitle">Options</li>

<li>

<label><input type="checkbox" name="snap" id="snap" value="1" /> Snap end position to grid</label>

</li>

<li>

</li>

</ul>

</div>

</body>

</html>

-----------------------------------------------------------------index.js file-----------------------------------------------------

/*

See https://greensock.com/draggable/ for details.

This demo uses InertiaPlugin which is a membership benefit of Club GreenSock, https://greensock.com/club/

*/

gsap.registerPlugin(InertiaPlugin);

var $snap = $("#snap"),

$liveSnap = $("#liveSnap"),

$container = $("#container"),

gridWidth = $("body").width() / 5,

gridHeight = 100,

gridRows = 6,

gridColumns = 5,

i, x, y;

//loop through and create the grid (a div for each cell). Feel free to tweak the variables above

for (i = 0; i < gridRows * gridColumns; i++) {

y = Math.floor(i / gridColumns) * gridHeight;

x = (i * gridWidth) % (gridColumns * gridWidth);

$("<div/>").css({position:"absolute", border:"1px solid #454545", width:gridWidth-1, height:gridHeight-1, top:y, left:x}).prependTo($container);

}

//set the container's size to match the grid, and ensure that the box widths/heights reflect the variables above

gsap.set($container, {height: gridRows * gridHeight + 1, width: gridColumns * gridWidth + 1});

gsap.set(".box", {width:gridWidth, height:gridHeight, lineHeight:gridHeight + "px"});

gsap.set("#box2", {left: gridWidth * 2})

//the update() function is what creates the Draggable according to the options selected (snapping).

function update() {

var snap = $snap.prop("checked"),

liveSnap = $liveSnap.prop("checked");

Draggable.create(".box", {

bounds: $container,

edgeResistance: 0.65,

type: "x,y",

inertia: true,

autoScroll: true,

liveSnap: liveSnap,

snap:{

x: function(endValue) {

return (snap || liveSnap) ? Math.round(endValue / gridWidth) * gridWidth : endValue;

},

y: function(endValue) {

return (snap || liveSnap) ? Math.round(endValue / gridHeight) * gridHeight : endValue;

}

});

}

//when the user toggles one of the "snap" modes, make the necessary updates...

$snap.on("change", applySnap);

$liveSnap.on("change", applySnap);

function applySnap() {

if ($snap.prop("checked") || $liveSnap.prop("checked")) {

$(".box").each(function(index, element) {

gsap.to(element, {

x: Math.round(gsap.getProperty(element, "x") / gridWidth) * gridWidth,

y: Math.round(gsap.getProperty(element, "y") / gridHeight) * gridHeight,

delay: 0.1,

ease: "power2.inOut"

});

}

update();

}

update();

-----------------------------------------------------------------stylesheet.css file-----------------------------------------------------

body {

background-color:black;

font-family: Signika Negative, Asap, sans-serif;

}

#container {

height:801px;

overflow:visible;

padding:0;

position:relative;

}

.box {

background-color: #91e600;

text-align: center;

font-family: Asap, Avenir, Arial, sans-serif;

width: 196px;

height: 100px;

line-height: 100px;

color: black;

position: absolute;

top:0;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

}

.controls {

background-color: #222;

border: 1px solid #555;

color: #bbb;

font-size: 18px;

margin: 20px 0;

}

.controls ul {

list-style: none;

padding: 0;

margin: 0;

}

.controls li {

display: inline-block;

padding: 8px 0 8px 10px;

margin:0;

}

.controls input {

vertical-align:middle;

cursor: pointer;

}

.controls .controlsTitle {

border-right:1px solid #555;

border-bottom:none;

padding-right:10px;

}

May 18, 2020

Thank you all.

My attempt as I said was just to copy/paste locally into a new folder, all 3 codepen files related to Draggable sample. I named them index.html, stylesheet.css and index.js .

As the html file was truncated, I added the starting and ending missing parts (from !DOCTYPE to </html>) and placed into head section all required CDN files (gsap.min.js, Draggable.min.js plus my local InertiaPlugin.min.js which seems to be required.

The body section is exactly what Codepen gave me; no change.

Then I run this sample expecting to get the shown result (mean... two rounded rectangle on a grid, draggable with mouse !!! Am I wrong ?!?!? )

But instead I get no grid, just a red round square in top left of my local page tagged "Drag and throw me too". That'a all !

A mouse over it does not show any hand icon as on codepen sample. It seems that something is missing to activate GSAP......or whatever else...

As a beginner it's really frustrating to loose so much time for such a basic training: just trying to reproduce a sample !!!Come on !

@Greg: I am studying your code sample to unfreeze my mind

May 18, 2020

Hi,

Spend hours to make codepen Draggable sample works. Copied and pasted Codepen codes into a directory and ran index.html. No way ! What's missing ? Thx !

Having completed html file with starting and ending tags <head> ..<script>,included required .min files through CDN as recommended.... Nothing

Just a not rounded red rectangle (no hand icon as in sample...)

Already fed up...

September 24, 2017

Thx OSUBlake !

Pretty interesting proof of concept.

But as Chrysto and surely many others users, we miss TM for a while...

September 23, 2017

Forget it !

I also asked for it 3 years ago and got the same answer...

So sad !

September 23, 2017

.

December 23, 2014

Thank you Michael.

According to your answer, I understand that's possible to get a cool effect.

In my case, there would be no image of flash but the opacity easing should directly be applied to both sliding-out and sliding-in images...It seems to be the same.

December 22, 2014

Hi and merry xmas to all !

Is GSAP/JS able to render a flash effect transition in a slideshow. A kind of lightening flash bulb of 50's cameras.

Hope I am clear enough and thx for your help.

Eric

August 29, 2014

OK. I understand that's not in progress...

Thank's for your fast answer.

August 29, 2014

Hello to all,

As some devs fail to make FabricJS work properly with CreateJS suite, and as there is no clean alternative righ now, do you plan to port TransforManager into HTML5/JS world ?

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by EricMtl