Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

EricMtl

ShockinglyGreen
  • Posts

    15
  • Joined

  • Last visited

About EricMtl

Profile Information

  • Gender
    Male
  • Location
    Montreal

EricMtl's Achievements

1

Reputation

  1. 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.
  2. 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> <script type ="text/javascript">src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"</script> <script type ="text/javascript">src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/Draggable.min.js"</script> <script type ="text/javascript">src="InertiaPlugin.min.js"</script> <script type ="text/javascript" src="index.js"></script> --> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='https://cdn.jsdelivr.net/npm/gsap@3.1.0/dist/gsap.min.js'></script> <script src='https://cdn.jsdelivr.net/npm/gsap@3.1.0/dist/Draggable.min.js'></script> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/InertiaPlugin.min.js'></script> <script src="./index.js"></script> </body> That one fails <script type ="text/javascript">src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"</script> <script type ="text/javascript">src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"</script> <script type ="text/javascript">src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/Draggable.min.js"</script> <script type ="text/javascript">src="InertiaPlugin.min.js"</script> <script type ="text/javascript" src="index.js"></script> <!-- <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='https://cdn.jsdelivr.net/npm/gsap@3.1.0/dist/gsap.min.js'></script> <script src='https://cdn.jsdelivr.net/npm/gsap@3.1.0/dist/Draggable.min.js'></script> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/InertiaPlugin.min.js'></script> <script src="./index.js"></script> -->
  3. 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.
  4. Yes exactly! But I didn't noticed this option... So I need to subscribe to retrieve all complete samples... Thank you for that !
  5. -----------------------------------------------------------------index.html file----------------------------------------------------- <!DOCTYPE html> <html> <head> <!-- <script type ="text/javascript">src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"</script> --> <script type ="text/javascript">src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"</script> <script type ="text/javascript">src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/Draggable.min.js"</script> <!-- <script type ="text/javascript">src="lib/gsap/Draggable.min.js"</script> --> <script type ="text/javascript">src="InertiaPlugin.min.js"</script> <script type ="text/javascript" src="index.js"></script> <link rel="stylesheet"type="text/css" href="stylesheet.css" media="screen"/> <link href='https://fonts.googleapis.com/css?family=Asap:400,700' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Signika+Negative:300,400,700' rel='stylesheet' type='text/css'> </head> <body> <div id="container"> <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> <div class="controls"> <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> <label><input type="checkbox" name="liveSnap" id="liveSnap" value="1" /> Live snap</label> </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; }
  6. 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
  7. 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...
  8. Thx OSUBlake ! Pretty interesting proof of concept. But as Chrysto and surely many others users, we miss TM for a while...
  9. Forget it ! I also asked for it 3 years ago and got the same answer... So sad !
  10. 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.
  11. 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
  12. OK. I understand that's not in progress... Thank's for your fast answer.
  13. 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 ?
×