Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

4 Newbie

About T.Gregory

  • Rank
    Advanced Member

Recent Profile Visitors

2,006 profile views
  1. 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 conceptual
  2. 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 w
  3. 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='te
  4. 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?
  5. 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 som
  6. 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
  7. 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 d
  8. 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/java
  9. 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 o
  10. $(".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 timel
  11. 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 i
  12. 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 bette
  13. 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 fork
  14. 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.
  15. 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