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