Jump to content
GreenSock

EricMtl

Members
  • Posts

    17
  • Joined

  • Last visited

Profile Information

  • Gender
    Male
  • Location
    Montreal

EricMtl's Achievements

  1. 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
  2. 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
  3. 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.
  4. 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> -->
  5. 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.
  6. Yes exactly! But I didn't noticed this option... So I need to subscribe to retrieve all complete samples... Thank you for that !
  7. -----------------------------------------------------------------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; }
  8. 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
  9. 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...
  10. Thx OSUBlake ! Pretty interesting proof of concept. But as Chrysto and surely many others users, we miss TM for a while...
  11. Forget it ! I also asked for it 3 years ago and got the same answer... So sad !
  12. 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.
  13. 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
×