Jump to content

G. Scott

  • Posts

  • Joined

  • Last visited

Everything posted by G. Scott

  1. Ah! yes that will do the trick! I really should have thought of that considering that was basically what I was doing with my own code before ScrollTrigger. Guess thats why you're a superhero haha. Thanks for taking the time! (And sorry about the "minimal demo"... been running on empty:-)
  2. Sorry for the delay... busy week. Anyway, here is a very rough codepen to show you what I mean. When you scroll down, the pink highlight width animates (0->100%) when it is about 20% up from the bottom... perfect! Now when you scroll back up, you will see the line reset (width = 0) at the same point that it started. That is NOT what I want. I want the pink highlight to remain STATIC until until I have scrolled far enough back up that it is out of the view port again. THEN it should reset and animate all over again when I scroll back down. Basically I like to animate objects once they are up a little from the bottom of the viewport. https://codepen.io/g3logic/pen/xxVwGxO
  3. Loving ScrollTrigger but seem to have hit a bit of a snag. Is it possible to reset the animation when the element is below the viewport, instead of below the start position? So for example if I wanted to animate the width of an element from 0 to 100% when it reached 50% up the screen, I'd like it to remain at that width until I scroll back up and the element is completely out of view below the viewport, and then reset/restart. As it is, in this example setting the last toggleAction parameter to reset causes the element to disappear while its still in the viewport. It would be a similar issue if I wanted to fade in an element when it enters the screen. It would be nice to be able to trigger the fade-in a little ways up the screen, and remain on the screen until the user scrolled back up past the element again, and then have it fade in all over again if they started scrolling down again.
  4. Sheesh! I thought you guys forgot about me! Guess I forgot to follow the topic... my bad:-) I was up against it so I worked through an alternate solution. But will look at the example you provided and see if it shines any light. THANKS!
  5. Having a hard time using the ThrowProps Plugin, specifically accessing the overshootTolerance, minDuration and maxDuration. (Also having a hard time accessing the ThrowProps help page on your site... Spinner keeps spinning but text doesn't expand. Anyway, after hours with this and reading other forum questions, the only way I can seem to access any of these settings is to reference the ThrowPropsPlugin like this before I call my ThrowPropsPlugin.to function: ThrowPropsPlugin[0].overshootTolerance = .2; ThrowPropsPlugin.to($div, {throwProps:{x:{end:900, velocity:"auto"}}, onComplete:function(){ alert("Completed!"); }}); Is this the best way? Its the only way I can seem to make it work. But secondly, when I DO set the overshootTolerance, the onComplete function never fires! Works perfectly as long as I don't set the overshootTolerance, however I need to control the end position and how much it is overshooting the bounds. Also tried snapping, however the way the div snaps back to the original position if you don't flick it hard enough is undesirable. I know you guys like Codepen, but I'm in a bit of a time crunch right now. Hoping I can get a little guidance. THANKS!
  6. Thanks for the reply! Yes, thats what I suspected. I'll continue checking since I think thats really the correct way to go... even though it doesn't break anything if I don't. As always, GSAP rocks! THANKS!
  7. Hi! In the example below, I'm wondering if its ok if you try to tween myElement if the selector found no elements to match? var myElement = $(div).find('.foundit'); Typically I check to be sure the element exists with something like... if(myElement.length > 0){... before I would tween it. But in a project I am currently working on, I realized that I forgot to do this, yet no errors are being thrown when the element is empty. So maybe I have been adding the conditional statement unnecessarily? Thanks for your thoughts!
  8. OK, thinking there may be a better way to do this. Have an image moving across the screen left to right and being controlled with cursor position relative to containing div. The further right, the faster the image moves left. The further left, the faster the image moves right. All of this as an endless loop. While working on the left to right movement/speed etc, I discovered that plugging in negative values to the timeScale of the tween resulted in it moving in the opposite direction! EXCELLENT! Saved me some math:-) Anyway, the only caveat is that it will not loop past the beginning point. So if we allow the movement to loop left to right 5 times and then reverse direction, it will only loop back the other way 5 times and then stop at the original starting point. Basically can't move right to left until we've moved left to right (makes sense but bummed me out). So for the halibut, I set the seek to a huge number (28800 = 8 hours) when I initialize the tween and POW! I was in business. Unless someone were to mouse over the right side for 8 hours, it will never stop... this is exactly what I was going for. But I was just wondering if there was any drawback to this or a better way. As it is, I've accomplished everything with just a few lines of code. Any advice? THANKS!
  9. OK, I figured it out. The cursor needs to be an absolute URL for some reason. This works: cursor:"url(http://path/to/images/cursor.png), default"
  10. Is there any way to use a url value for the cursor property? Trying to use a custom image for the cursor and this doesn't work: cursor: "url(images/image.png) auto" I am able to achieve in the HTML by adding as a style to the div. But Draggable overwrites the style. Maybe there's a way to stop that from happening? THANKS!
  11. Yes, Thanks! I think the onThrowUpdate is what I'm looking for. However I can't seem to get the results I want with throwResistance. It should basically feel like once it starts moving, it won't stop. Using a high minDuration seems to be achieving that for me. Are there drawbacks?
  12. Struggling a little with Draggable + throwProps. First time using this and am trying to build a div containing a long single row of objects (images, etc) that is draggable left to right, continues moving endlessly on release, and loops. So far, setting a VERY high minDuration does the trick as far as movement and overall feel. However I need a way to poll the offset position of the objects inside of the container so I can reposition as needed to achieve the endless loop. I feel like some kind of listener where I can retrieve the X position of the objects would work best... at least thats the way I typically do it when using simple click events to trigger the movement. Are there any listeners in place that I can tap into? Or maybe there is a better way to do all of this? Feels like I'm very close
  13. I have a situation where a slideshow is dissolving between images. I am using TimelineMax and allowing the slideshow to loop endlessly. I need to give the user the ability to pause and restart the slideshow... easy enough using pause(). However I would like to make sure that if an image has already started tweening (dissolving into the next image), that the tween doesn't pause part way through... resulting in two semi-transparent images on top of each other. Is there a way to pause the timeline but allow any existing tweens to complete first?
  14. In a situation right now where I would like to tween a class and found this post. Am wondering, any way to remove the class once its been added? I'm thinking I will probably just need to define a second class that removes the properties in that were defined in the class that was added. But figured it was a question worth asking...
  15. G. Scott

    Scale + Chrome

    Carl, THANK YOU SO MUCH! Silky smooth now... even more so than when I was animating the bg images. The only problem I had was that the images jumped momentarily over top of another layer (png with transparency). Setting the z to a negative value (z:-0.01) solved that problem. You are the bomb! Guy
  16. G. Scott

    Scale + Chrome

    I'm wondering if there is any solution to the jerky performance in Chrome when using scale. Getting stuck between a rock and a hard place here. If I use scale to zoom images in and out (ie if creating a Ken Burns effect), it looks beautiful in every browser except Chrome for some reason. VERY jerky. But if I simply animate width and height, it looks perfect in Chrome, but terrible in Safari. Scale is my first choice because its less code and allows for transformOrigin, etc... super slick! However I have been avoiding it solely because of the way it performs in Chrome. My solution thus far has been to animate the width and height of background images instead... which oddly enough, works smoothly in all browsers. And THESE are the times I miss Flash...
  17. Very happy to see the CDN link. I'm a little befuddled about which version to choose. I am inclined to use "latest", but am concerned about any major updates that may break functionality... such as the case with 1.8.3 and the new quotation mark notation needed in TimelineLite, etc. Thoughts? If I were to choose 1.8.4 for example, will that continue to be available for the foreseeable future? Thanks as always...
  18. I replied too soon... should have tried it first. THIS IS SICK COOL! Had no idea I could tween the timeScale property. Thanks again, Carl!!!
  19. WOW! Thats exactly what I meant. Never thought of approaching it like that. Thanks SO MUCH! Can't wait to try it out!
  20. I used to accomplish this in AS and trying to figure out if there's and easy way to do this using JS + GSAP. Lets say I have a long image that I am scrolling horizontally. If I set the end coordinate, I can CLICK on an arrow and use TweenMax.to to scroll from x:0 to x:endpoint. Easy enough. But if I want to control the scrolling using MOUSEOVER instead... I could still set the same endpoint, etc. But if I roll OFF of the arrow, is there a way I can interrupt the tween + easing, and ease to a stop? UpdateTo allows me change the endpoint, but doesn't seem to allow me to interrupt the tween and basically reverse it so the movement ends smoothly. Using linear easing is no problem. But I'd really like to try to accomplish this using easeInEaseOut. Thanks for any suggestions!
  21. Thanks, Carl... I would agree with everything you said and appreciate your as sample. Coming from an as background as well, really miss it sometimes now that most of my projects are jQuery (thanks, Steve) although I am still picking up some Flash gigs here and there. I would also agree about sorting through larger objects. I definitely keep track of them by assigning an active class so that I'm not tweening anything more than I have to. Thinking about the example I gave with the buttons, I really should have thought that through more. I think most of the time I am inclined to tween objects that are already tweened, is when a user experience allows multiple bits of interaction, and I need to quickly be able to set everything back to square one. So if there are a few objects that have been clicked causing them to move, or change color, etc... I may just call a function to reset everything. Which may mean that some items in a class are changing back, while others may have never been changed to begin with. In this situation, I can achieve ALL of this with a simple TweenMax.allTo and POOF! Again, my not be the most efficiant use of resources, but there's something to be said for keeping the code to a minimum. Guess I'll continue on a case by case basis... but glad to hear your thoughts as well. Don't feel so guilty now!
  22. OK, I've wondered about this for the longest time and have decided to ask for your opinions... I find myself building a lot of user interface stuff (menus, etc) and I'm always at odds of how to handle this. For a super basic example, consider this: Suppose I have five menu items and I want to have the the active one at full opacity and the other four at half opacity. So when a menu item is clicked, it goes to full opacity and the one that was at full opacity fades to half opacity. Simple, right? In jQuery, I can assign an "activeButton" class to the one that has been clicked and then use that as the selector to fade it when another is clicked... and then of course un-assign that class to the old button and assign it to the new active button. OR (and here is where I think this may be cheating) I can tell ALL of the other buttons to fade, even though only one of them really needs to fade and be on my way! I've done it both ways and never noticed any difference or performance hit from tweening all of them... but I'm not sure if there are other ramifications. I used to do the same thing in AS at times, but honestly with jQuery, using not() makes it too easy: $('.menuButtons').not('#thisButton') Thoughts? If something is being asked to tween to X even though its already at X, does it take up much in the way of resources? So should I be losing sleep over this? I find myself "cheating" when I'm in a time crunch, but maybe there's no problem with it?
  23. Sorry guys, I had assumed that I was using v12 since I had just downloaded it from the GS homepage, but it was v11. I had no idea that the ability had been added in v12... so I'm a happy camper now... Thanks!