T.Gregory

To further explain, I can make a simple animation with jQuery and it comes out as you would expect. I have, in the past, had good luck with some ambitious timelines with GSAP - but for some reason with simple Timelines and Tweens, I always seem to get jerky movement. Until now, I have been chalking it up to some combination of movement have their nuances and I would just keep changing things until I got it smooth but most of the time, I end up settling for a different effect just because its smooth. But its time I get to the bottom of this, there has to be something I'm missing conceptually. I've read that there is a winning balance between what to handle with CSS and what to handle with GSAP. I basically borrowed this code from a Pen that was smooth and just changed a few elements to apply it to my page and it got all choppy. Not just the blip at the end, it shakes when starting motion etc.. See it on my Pen. (CLICK ON "view full gallery" in Pen) I hope someone can point out in this example and/or in general what I may be missing to get the smoothness. Maybe a different newbie blunder each time. var tgh = new TimelineMax() tgh.from(".player-hider", 1, {height:'80vh', marginTop:'5vh', ease: Back.easeInOut.config(1.4), y: 0 }); tgh.fromTo(".player-container_1", 1, { autoAlpha: 1}, { autoAlpha: 0, ease: Power2.easeInOut}) .reversed(true); tgh.set('.player-container_1',{autoAlpha:1}); function menuFunction() { tgh.reversed() ? tgh.play() : tgh.reverse(); };

Thanks Carl - I'll see what I can do with that. I've seen a few player that use img src to switch out video, so I'm thinking it will work. To explain why the gallery is overlaying the video screen: The video screen will be hidden behind the gallery and when the user click on the thumbnail they want to see, the white background fades out as the video starts playing and the thumbnails animate out. But then, quite often, the user wants to see the thumbnails again and so they can opt to click for a small size thumb if they want still see keep an eye on the screen, or full thumbnail - which will bring back the white back ground and be more like changing tasks.. Its mostly to save space and minimize scrolling for devices.

Thanks Carl and Jack - I'm glad I came back here to check and discovered the example code. I was in the middle of trying to reverse engineer another GSAP Pen I found that was way to complex for my needs. This example Carl provided is much more suitable. Being tired, I had forgotten to mention the reason I came to the forum in the first place. I wanted to work the video source change function into the timeline so it didn't conflict with the rotation. It would inevitable move the rotation into the Hide-Gallery step and throw off the timeline. This is the function <script type='text/javascript'> $('.playBox > span').on('click', function () { var id = $(this).data('id'); var source = "http://player.vimeo.com/video/" + id + "/?autoplay=1"; $('iframe.video-player').fadeOut(100, function () { $(this).attr('src', source).delay(500).fadeIn(500); $('ul.poster-gallery').fadeOut(700); }); }); </script> This just needs to be in synch with the cycle somehow. But I'm not sure how to approach it and I'd have to guess at the syntax - I'm sure there's few hard ways - and one or two easy/efficient ways... etc

Eureeka - I just realized I can accomplish what I'm trying to do with just one function. If I use one 3 step cycle [ a,b,c; a,b,c] instead of 3 separate [ a toggle b toggle a] etc. Anyone know how to do this? It would simply be > click > hide thumbnails >click> reveal thumbs scale:0.5 >click> thumbs at full scale >click> complete cycle with hide... If I can see a working example, I should be good. This is a much better way overall, I think... Anyone know any pens displaying a timeline or tween with a 3 click cycle?

The question was can I get some help converting one of my jQuery functions to GSAP - as proposed in my first post. I had done the best I could but needed more thorough code to handle the back and forth interactions with my timeline toggling - just as you re-explained above. Jack had asked me to make a pen so he could help. I decided to put my time into making a pen and getting the help as it was a safer bet that continuing on with trial and error. It was a challenge removing this section from the site and making a Pen as I had integrated it with one of those overkill themes with some 60,000 lines of code. Its tricky to remove something from an environment with so many classes etc on top of my own, so it took me most of the night. If Jack is still interested in helping, I'd love to follow up on that. Or anyone out there reading this? : ) Or would it be recommendable to find a paid service? It's kind of hard to turn back now and finish the site without the Greensock. To anyone new reading this, I'm just looking to clean up my toggled timeline's that are bumping into each other. I've maxxed out my ability level and got lucky with some guesses. The Pen is of an overlay video gallery with animated show/hide thumbnails and options size thumbnails up or down - and I just added a button to autoscroll the thumbnails like netflix does - on my desktop file, (not in the pen yet)... Todd

http://codepen.io/code-a-la-mode/details/qNjpmk/ OK, Jack - I made a Pen but have spent the past 3 hours trying to get the timing functions on Stagger to overlap slightly and I forgot how. Trial and error is not the method. I just want to get rid of the pause when you click to hide the gallery, but its not priority. The intention of the controls are "-" button on the left should scale the thumbs down to scale 0.6.... the "+" on the right of course, back up to scale:1.... and the dotted icon in the middle hides and reveals the gallery. Anyway - the responsiveness is a little off on the Pen/ there should be 4up pics per row - but it wont affect the functions I'm working on. I welcome any input, and only request that anyone helping resist the urge to test very advanced methods. Straight up simple so I'm most likely understand it and be able to maintain and continue to adapt it, etc... Looking forward to learning the right way : ) Todd

Yes - I ran into some frustrations and figured the addClass wasn't the way to go. A while back, I had read in a few forums that it is best to control the animation with jQuery but write it with CSS, and I'm just realizing now that those were not GSAP forums - I think it was Chris Coyier from CSS Tricks. Anyway - I will make a pen so you can see what is going on - its hilarious - It actually works, but the code and logic are sloppy. It was the best I could do with a limited understanding of jquery, GSAP and mostly - a limited knowledge of how to find examples of syntax for what I want to do. I'm in the middle of the 4th of July holiday - so I have to do some family fun for a few hours, but I will make a pen this evening and am anxious to so how this looks done right... Thanks for your interest, and, by this evening - I mean Pacific Standard. Todd

I have a vimeo player with an animated thumbnail playlist as a flexbox gallery floating over the screen. I have the thumbnail animation functions in GSAP timelines, but I want to make the source switcher a GSAP timeline as well, but I'm not sure how to go about this one as its not my strong point: I was looking for a little help, and can share more of it when I find the time to make a codepen. I also need to add a z-index change for when the gallery disappears - the gallery is just invisible but still over the screen as it is, so you can't pause the video. <script type='text/javascript'> $('.playBox > span').on('click', function () { var id = $(this).data('id'); var source = "http://player.vimeo.com/video/" + id + "/?autoplay=1"; $('iframe.video-player').fadeOut(100, function () { $(this).attr('src', source).delay(500).fadeIn(500); $('ul.poster-gallery').fadeOut(700); }); }); </script> Below is my timeline to call the gallery (fade in or fade out) as a toggle without switching the source, so user can peruse gallery while video is playing and then close it. var tll = new TimelineMax({paused:true, reversed:true, force3D:true}); tll.staggerTo("li.poster",0.2, {className:"+=vamoos"},0.05); $("#callGall").on("click", function() { if (tll.reversed()) { tll.play(); } else { tll.reverse(); } }); And the CSS class: li.poster.vamoos{ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; -moz-transform: scale(.2); -webkit-transform: scale(.2); -o-transform: scale(.2); -ms-transform: scale(.2); transform: scale(.2); opacity:0; -webkit-transition: height 0.8s ease-out, opacity 1.3s ease 0.5s; -moz-transition: height 0.8s ease-out, opacity 1.3s ease 0.5s; -ms-transition: height 0.8s ease-out, opacity 1.3s ease 0.5s; -o-transition: height 0.8s ease-out, opacity 1.3s ease 0.5s; transition: height 0.8s ease-out, opacity 1.3s ease 0.5s; }

Hey Shaun, Thanks for the reply. Are you familiar at all with the Sortable Draggable grid that Blake OSU made for Greensock? I modified it into an image gallery with a killer hover effect and had the same problem there but that one is all GSAP and jquery. Blake's been away for a while so I haven't asked him, But I made a pen of it that you can check out and then see what I mean on more of a GSAP environment. Here's the pen link: http://codepen.io/code-a-la-mode/pen/MagmOV The click and hover functions start at line 202 of the js. As simply as I can put it, the intent of this is to enlarge the thumb twice. A full enlargement on hover is too chaotic, so we do one scale up on hover and then a second on click. So - in gallery > hover > *image scales up 50% > click > image scales up another 50% > AT THIS POINT the hover has overridden and the image scales down only on mouseOUT not letting you click to close. (I've read that hover needs to be unbinded on the click function) Well, mission accomplished sort of, But the user will get confused as its not what they are expecting. If Blake's code is not outside your arena of knowledge i'd appreciate your input. I've been on the 1 yard line with this one for over two weeks and its very frustrating to not have the resources to the finish it. I don't know how else to move forward without help, there's nothing in the docs this specific and I'm burnt out on guessing syntax etc.. If this isn't your area, if you could recommend someone who could help me, I'd appreciate that as well.

$(".iSmall, .shrink").on("click", function() { if (circle.reversed()) { circle.play(); } else { circle.reverse(); } }); Regarding above ^ Where and how do you add in a line to kill the hover to start the click? The hover conflicts with the timeline... It seems this would be a very common issue since a majority of clickable links have hover effects, but I have found less material on this on the web than the career of Milli Vanilli. Maybe not that many links are actually the element that is animated. Also, I think it must be done differently with tweens and timelines because even the few examples I have found (to unbind the hover state on click) didn't work at all. So if you go to my codepen, there's a main vertical Nav with a link near the top with the text "Shrink." and there is a squashed looking mobile nav in the top left corner with the middle link reading, "SMALL - LG" They are both linked to the same timeline you will find in the js window. On the main Nav, the hover state conflicts because it happens to be the element that is going to be animated. On the little mobile Nav, there is no conflict because the link isn't in a timeline. Please Note that the animation is not working correctly on the Pen and things looked squished in general, but that shouldn't matter in answering - as I'm looking for a general answer on how this is done. I welcome any answers or input as I am new to jQuery, Greensock, and writing forums. . . also computers and electricity and reading/writing. LOL seems that way, Thanks in advance anybody who answers.

Ok - I'm missing something that's causing me to go in circles trying to find a workaround. (code below is my click to enlarge more than hover, pen link also included) element.on("click", function() { zoomIn2(); }); function zoomIn2(time) { if (tile.isDragging) return; time = time || zoomTime2; - - > TweenLite.to(element, time, { left:0, top:0, scale: tileScale2, zIndex: "+=10000"}); - - > TweenLite.to(image, time, { scale: ratio}); I put this click event in, but I couldn't get the - .tile/ element to acknowledge a parent container, so I had no reference to center it. No matter what I did, they would shoot off into 1000% or shoot left etc... I tried binding it to the window, I created an overlay as a parent and appended each tile over, I tried all changing the tile to relative onclick to push the images on the edge toward the middle with padding - Then I realized I was being foolish not to just ask you. I've enjoyed exploring the code but I'm in hot water with my deadlines and learning/tinkering doesn't work well under pressure. I'm living proof, LOL. I'm really on the 1 yard line with this gallery, all I need to either create a boundary so the outer images don't get cropped overflowing out of the viewport when they scale , or to just center them. Check out the IMG blur once the image stops growing. Is there a quick workaround for this type of thing? Also, I didn't use a second hover on the click function on purpose, It just happened and I decided to roll with it cuz it returns automatically on mouseout. Do you foresee any problems down the road basing this animation on a hack? I'm wearing of it but am loosing time and money and I'm hastily going for the easy way. If a proper toggle is just as easy, please let me know. Take a look at the latest pen below. Oh - I had the stagger working on my desktop but then messed it up and decided there's no hurry on that. But at least I got something to go!!! For a minute... http://codepen.io/code-a-la-mode/pen/BNeNGq

Here the pen: http://codepen.io/code-a-la-mode/pen/BNeNGq After you hover, click the image and watch it bounce up in size. I really like the affect , but the only problem is after the image grows, it stops with a sustained blur. I'm guessing that this is due to the image being held between two states. It seems to be still in hover cuz when you move the cursor it shrinks. I'll need to fix that along with Keeping the bigger sizes from stretching off the screen. I could either center each image or somehow set the viewport or containing element as a boundary> think it would look better if they floated above their thumb, like they are now, but just push off the edge. If you have any tips on this, you might keep pointed in the right direction as I imagine there are a lot of different ways to do this and I wouldn't want to pick a method with complications. As for the blur, I figure if I kill the hover on click (or something similar) - that might free it up and clear the blur. If you think its something else, let me know. We'll see how I do on it... Later

Hey Blake - Thank for that last message. I haven't logged on in a while, so I had missed it. That's very helpful. So, I added a click event to the gallery to enlarge each image to a bigger viewing size. I wanted to show you on codePen, but it was the strangest thing. I kept trying to make a pen but each time, something would keep it from working - sometime the #list wouldn't even appear in inspect element and sometimes Dev Tools would say that the jQuery cdn was undefined, etc. So it was becoming a thing that was more and more unbelievable every time. So I finally broke down and just forked your pen with the loremPixel images and then changed that by hand - and of course that worked. Then I took a 5 min snack break and came back and the pen opened to a blank page. After so many strange obstacles in a row - I was in total disbelief. Then I opened another Pen and that one was blank, and EVERY Pen I opened with that grid was blank. So I thought I was in the Twilight Zone and then I thought - IT has to be loremPixel. SO I tried to log on to their site and the site was temporarily down. What are the odds of that happening within 5 min of a string of obstacles for something so simple... I'll add a link to that pen once I see that lorempix is back up, I want to see it working before I include it.

Strike some of that. Chrome got me again. I opened the file in Safari and my additions worked. My Chrome all of the sudden doesn't apply my recent saves when I open it to view on my desktop. But if you still want to help, I'm wondering if I can change the tween to a timeline cuz I want to animate the div left but also control the opacity at a different rate. So the opacity fades in just as the div is settling into place.

Hey Joe - are you out there? I'm stumped again. I kept your original code cuz I wanted to have it return at a faster speed. Problem is, if I try to add any more links or it stops working. I have a total of 5 links in my site and the first 3 work great. But I can't add or alter the code in anyway or it breaks. I don't understand how the buttons refer to the specific ID's in the JS cus nothing is named there, but then I can't rename anything or add anything. Could you please help me finish it enough to use it, I'm so close to finally having this done. Todd

Yeah, I was afraid that was the case. I think I can come up with a clever way of naming the images by a standardized category system and then use a sort filter from UI kit.

Thanks for the input and update on my code in the other forum. I asked you a question over there and am also posting it here to be thorough. My main purpose for the sortable gallery is to have my client sort his photographs on his end as a way for me to see his desired order. Until now, he has been emailing me a long list of image numbers in a certain order and its a royal pain. I realize that the gallery you created opens each time with the order as the images are listed in the script. Is there any way possible to do like a data save that the page will reopen to? The optimum would be an administrator save and reset button for the state of the gallery and also a user reset button that just puts the images back to the order at page open after they have played with the drag feature. I hope this kind of thing isn't super complicated and time consuming. First let me know if its possible, and then what it would take to add it. Todd

I was on the road all Wed but got home and finally got a chance to play with this code in my website. I have to admit I was stumped at first, but I've integrated it and its working great. So I named the classes and ID's for clarity in the demo but, unfortunately, I needed to rename everything to sync. Being totally unfamiliar with the mechanics of the JS in this one, I was baffled that the names of the ID's weren't stated in the script and then I figured that this [ var target = _target.id; target = '#'+target.substr(4); ] calls for getting the ID of each link's target. And then I was stumped again when I changed the ID's and It broke the function. I'm curious how this works. I can leave the names Blue and Foo etc but I'll need to add a few more links and thought it'd be smart know the logic of it better before I tried. In my website, this function is actually moving screens from left offscreen into the viewport for fullPort videos and an (awesome sortable!!!) image gallery. I think I'll swap in Blake's update and then expand it from there. I'd love to know more about the math of this, a brief explanation or a doc reference would be appreciated. And Blake, regarding the draggable gallery, I realized today that its imperative that I can have my client sort the images on his end and that I can open it to see the order he has chosen. Is this possible? I'll post this question over in our Sortable Gallery forum with a little more detail. Joe - thanks for the idea and code. I'm looking for a consultant as I'm a month behind schedule and the more I learn, the more I realize how much I don't know. I'll need to stick to design with the help of a coder. If you or anyone you know would be interested, let me know and we can discuss. Todd Gregory Haney

That looks great Joe! So many of the other solutions I saw on overstack were overkill, 3-4 paragraphs of JS Yours is compendious and to the point. Would it be easy to have each box's own button send it back as well? Click to the left, click again and back to the right, like a toggle.

My demo on codepen has 3 buttons and 3 boxes. It's a simplified model that just needs the help of a selector filter like :not() I just need the animations to go one at a time like an accordion: If div "A" is open, then clicking the button to open "B" will close "A" first, then open "B" . . . same with "C" & "D" My Demo should be pretty close - its just missing a way to filter and maybe clear, I've seen some major overkill for this and I'd like to keep its simple with the way I'm altering between Class and Id's of buttons and divs. I've put 20+ hours into building jquery functions and following overkill after overkill on stack overflow and then never finding any docs on how to include GSAP - so I scrapped everything and started over as simple as I could with a GSAP timeline. It seems like this should be pretty easy for anyone who knows GSAP well enough. I can never find docs that answer anything about functionality or integration, theres a lot of talk "about" the animations, but rarely useful examples of syntax. So can anybody help me?

Check out the grid in Safari, its off center for some reason....

Dev tools is great - how did I survive without it? I'm doing the tutorials, but in the meantime - I made a pen of a hybrid of the YTPlayer plugin and the draggable grid. It hit me that the rest of my site wasn't relevant to the conflict, so I made this pen: http://codepen.io/code-a-la-mode/pen/vOveWP If you delete line 31: <div id="list"></div> (the grid div#list) the BG video appears as the grid goes away and does the opposite when you paste the code back. SideNote: I'm guessing the conflict will be so simple and obvious to you that it'll be funny. I have major holes in my knowledge cuz I started with Zero understanding of code and have only learned by taking apart websites and then searching the web through a mess of horrible (and often incorrect) explanations etc... If I get this big design bid I'm going to need to hire a freelance coder/co-designer. But do you think that if I just stick to the Greensock framework I could get enough support from full membership to handle the developing myself - or should I find someone in a position like yours for freelance support, and is that ever done? or would there be a conflict of interest with the company that the support-individual is associated with? Just spitballing - any input would be appreciated...

I was tired and totally misread what you said about the Plunkit site. I was thinking I couldn't attach my own. No worries - I'm caught up sleep finally and I get what to do about uploading the site... I'll give the devtools a shot first, It's time I learned it anyhow. Ive been learning so many different things all at once lately that it felt like one more new thing and my brain would blow. But the dev tools thing is a must right now...

I went to Plunker and pasted all my files. I didn't know whether to include my heading with links, or name my new files the same, or if it connects them for you etc etc and - of course - no instruction from plunker. So I assumed the files would connect internally and just named the new files new names. I opened it in preview and it just acted like there was no style attached - oh, I just realized I forgot to include the dependencies, I assume I would need local copies of "draggable" by why couldn't I just link them.. Why can't anybody just leave basic instructions. http://plnkr.co/edit/v5svgk6k3AZXKybAO5O7?p=preview If the plunker pen isn't just the flip of a switch from making it work you can just grab a copy of my desktop file from my FTP at: Server: ftp.skybluepreviews.com username: upload@skybluepreviews.com password: upload File Is named: player+draggable

Thanks, man. I'll get this all "Plunked up" and then we can get to the bottom of this video player thing...