T.Gregory

I've never made a pen before and this file has multiple dependancies and external stylesheets - but its only 1 page of html, so I figured I'd just drop it on my server for this time and then learn how to properly make a pen when I have a moment. I've narrowed it down even more as the grid code does the same thing to a totally different player I put in for another layer. So this will probably be good for you to figure out now to keep the grid compatible. Here's the link and a few pointers about where the pertinent stuff is in the file. http://skybluepreviews.com/player+draggable/ I assume you can pull the whole file to your desktop with Site Sucker or something. I can also drop it in my FTP, if you need. *Right now the div#list is dormant in the index.html at: <!--draggable- * * * gallery HERE --> (flag for you) about 5 or six little blocks of code down from the head. The html "list" is inside the div classes "galleryBlock"(absolute) < "frame1Rel"(relative) < "frame1"(absolute) 1) These are the names of the YTplayer external files: "css2/jquery.mb.YTPlayer.min.css" "css2/playaStyle.css" "jsPlaya/jquery.mb.YTPlayer.min.js" "assets/apikey.js"> If cheking-out the file doesn't work this way for you - are there code pen instructions somewhere that I could take a look at? Mainly how to upload external sheets and dependancies - If this works for you . . . there are a few other glitches in the grid code - in Chrome - the set zoom on the bg imageis is somehow way too zoomed in, and in Safari the margins and borders are pretty far off sych. Maybe this is just cus I didn't hook up the prefix free js sheet right or something? Just a hopeful guess for a possible quick fix.

Hey Blake - The gallery has been working just fine . . . until I put YTplayer in my site. Its a responsive background player that plays Youtube vids, have you heard of it? Well - my gallery grid and the YTplayer are conflicting each other somehow, and I was wondering if you might know off hand what this kind of thing usually is. Or maybe you're curious to take a look. I have narrowed the conflict down to the js script, which was what I expected. I think it'd be wise for me to get advice before I dig into it and ruin everything. Here's the github where the player files are: https://github.com/pupunzi/jquery.mb.YTPlayer and you know the code for the draggable grid. I hope its something super simple.... Let me know if you take a look...

Yeah - this is all new to me so I'm just guessing in the dark. Should I post a question on Stack Overflow? All I need is the proper code for loading the images from a local file but I'm running out of time...

Thanks - vid tutorials work best for me too. So - I tried to figure out how to append multiple images into the grid and I understand what's happening but need some help with the particulars. If I have a folder named = "img" with a list of images inside sequentially named as such: "001.jpg, 002.jpg etc... (or however recommended) To append all images to tile divs, I had figured I'd need to change the baseURL to the relative path to the img folder and then do image.src = reference to img file + variable name to add it to the tile list ... However close I may or may not be, could you show me how the code should look?

That's amazing... Do you have any advice on sources to learn Jquery and JS? What I could use the most right now is a source for examples of syntax. Its frustrating that a majority of the examples I find when searching always have something missing or are specific to an odd situation. It took me days and hundreds of examples just to find a usable toggle example. Also, I'm going to try to put my images into the grid by using the method you suggested above. If I get stuck I'll ask for advice....

Oh - and check out this mouse-responsive parallax environment I mocked-up with some photoshopped images. I've seen other stuff like this, but none with real images. Its fun to play with. http://skybluepreviews.com/MouseMove

That looks sweet. Its so nice to see it working the way it should with no jerks or wiggles. When you get used to seeing the thumbs open up like that - the old way looks so disappointing. I can't believe I haven't seen this anywhere else. I keep coming up with clever dynamic interface ideas but I'm not skilled enough with code to complete them - maybe I could start sharing the ideas in return for some help taking the code to the proper level... Right now I'm working on some layered absolute-nested html5 video players as abstract backgrounds with some animation applied to/and clipping frames that change shapes and the possibilities are overwhelming... I'm looking for a reliable way to kill all buffering when a video is paused as well as the most efficient way to switch clips in the player via click - but stack overflow is a hodgepodge of opposing opinions and methods for managing video. Until I can minimize the load of multi vids, its not quite reasonable yet.. Let me know if you have an opinion or a favored methods for handling video.

Thanks a bunch, simple works for me... I've created a depth-of-field hover effect for gallery images that has the image set zoomed in and cropped with overflow hidden and when hovered, it zooms back while the framing div scales out at the same rate. Before I go putting man hours into integrating the code into the grid, would you be able to tell if there are any conflicts just by taking a look at it? Its sortable now, but with UIKit and there "draggable" code is too restricting for my ultimate purposes. I have a demo on my server: http://skybluepreviews.com/sorTest Also the coded is simply: (this is streamlined after the above demo) HTML: <div class="depth" id="depth2"><img src="gallery/001.jpg" width="300px" id="dImg"> </div> <div class="depth" id="depth2"><img src="gallery/002.jpg" width="300px" id="dImg"> </div> <div class="depth" id="depth2"><img src="gallery/003.jpg" width="300px" id="dImg"> </div> <div class="depth" id="depth2"><img src="gallery/004.jpg" width="300px" id="dImg"> </div> CSS: .depth{ position:relative; overflow:hidden; border:8px solid white; -webkit-transition:All 1s .2s ease; -webkit-transform: scale3d(1, 1, 1); } .depth:hover { z-index:900; border:4px solid white; -webkit-transition:All 1s ease; -webkit-transform: scale3d(1.3, 1.3, 1.3); } .depth img{ opacity:1; -webkit-transition:All 1s ease; -webkit-transform: scale3dscale3d(2,2,2); } .depth:hover img{ -webkit-transform: scale3d(1, 1, 1); }

Great, I'm looking forward to seeing it. I've looked into many of these grids and I like this design the best. If inserting images into the tile containers is done any other way than straight up html, (like js) please remember that I'm a newbie to js and Jquery when explaining the process. Thanks...

On this Demo grid with sortable tiles via dragging, I'm not sure how one would put content into the tiles, I tried a few obvious things but there must be something I'm missing. This is becoming a theme for me here at GSAP - i always seem to be missing one key element that has no mention or reference anywhere - surely it's not intended to be a page of numbered green tiles... If anyone can point me in the right direction, please let me know. I'd like to try it as an image gallery...

I'm trying to apply this toggle to an animation sequence from the 3d Preview Demo #3 (shown below). I didn't put it on codepen cuz its only two snippets. I'm new to jquery and brand new to GSAP, I get the concepts and can develop my skills easily given I can find reference to the proper syntax per situation. But unfortunately, I've found very little useful syntax examples even in the most details docs, the demos on codepen are mostly amusing novelties that almost religiously exclude click events and there is no reference book on "Coding with Greensock" . . . and that leaves me with no way to learn but trial and error - or asking for help. Here is the toggle I used for a previous animation that is triggered by clicking the div id=#left var t = new TimelineLite({paused:true, reversed:true}); t.to(".infoBar", .5, {ease:Back.SlowMo,top:"30%",}); $("#left").on("click", function() { if (t.reversed()) { t.play(); } else { t.reverse(); } }); I have tried for hours to apply it to the animation below, but when code requires exactness down to the dot, there seem to be more variations than the Rubik's Cube. If someone could show me how they would apply the click event above to the demo animation below - as well as advice on figuring out situational syntax when there are no references or examples - I would greatly appreciate it... 3D Preview Demo #3 : $(function() { var box = $(".box"); var wrapper = $(".wrapper"); var tl = new TimelineMax({repeat: 6, yoyo: true, repeatDelay:.5}) tl.set(box, { css: { borderRadius: 8, transformOrigin:"50% 0% -400px" } }); tl.set(wrapper, {css:{perspective:800}}); tl.staggerTo(box, 3, {css:{rotationY:360, autoAlpha:1}, ease:Back.easeOut}); }); HTML if it is relevant: <div class="wrapper"> <div class="box">ANIMATE</div> <div class="box">IN </div> <div class="box">3D</div> <div class="box">WITH</div> <div class="box">GSAP JS</div> </div>

Hi Jack - I appreciate all the encouragement and I am eager to get familiar with all the GSAP goodies. Unfortunately, I still can't get anything to move on click. I forked a Starter Pen on Codepen and put in Rodrigo's code and made my best guess for the click function. BTW - I am using chrome on a new Imac with HTML5 boiler plate for tester templates with the CDN's in the html just like instructed. But here's my CodePen link: http://codepen.io/code-a-la-mode/pen/OVZMZj So I guess if you can show me what I'm missing in my pen to make that red box move to anywhere by clicking the button, and then, on the next click, return to its original position. That's all I need. I've only had problems with this one issue - but it just so happens to be the one thing I can't move forward without. Amazingly, I have tried hundreds trial-and-error modifications to snippets and demo's in the last 24 hrs and not a single time did I get it right. Its hard not to loose faith that anything works at all after a point, but I believe you guys that its works and am sure I have just been missing the mark by a single semicolon or comma on each try. Ple

Thank you Rodrigo - your code makes sense to me and seems efficient and I am going to give it a try. Would you mind showing me exactly where I would apply the click event to it? I'm sure its very simple but I'd be guessing the exact syntax and I could use a little break from guesswork right now. Thanks in advance.

Did I step into the Twilight Zone with GreenSock? Please Help... ALL I have been looking for since I signed up for GreenSock is a simple and reliable toggle snippet that will open/play my animation on click and then shut it (toggle) with another click. Isn't this the foundation of any useful animation as opposed to flashy decorative designs that automate on page open? Well I can't find ANYTHING in GSAP that I can use as a straightforward toggle button. I have scoured the web for dozens of hours, and probably over 100 articles, forums and demos but have only found every combination of NOT usable and more and more dancing icons that play on page open. All the demos that claim to toggle, just pause running animation, or replay it after the pause. How is this possible? I am in disbelieve and I stubbornly keep searching - but now I just need to reach out and ask for help. After days of frustration, I finally found this demo on Codepen that simply does what I have been looking for: http://codepen.io/anon/pen/yNjNWe Problem is - it SIMPLY DOESN"T WORK outside of codepen. At this point I am questioning reality in general due to fatigue and frustration and hope that I'm just missing something simple. I try to design animations that are interactive and have a purpose or function. I don't see the value of dancing icons and logos that play on page open as there is so much more potential for animating elements for dynamic interface. I am very excited about GreenSock and the animation tools seem useful and intuitive. I just wish I could apply them. My apologies for the subjective wordiness, but this has really been a frustrating experience.