Jump to content
Search Community

G. Scott

Premium
  • Posts

    29
  • Joined

  • Last visited

About G. Scott

Recent Profile Visitors

3,970 profile views

G. Scott's Achievements

  1. That is ridiculous! Thank you so much! I never even considered trying this... but it is now officially part of my gsap arsenal! LOL THANKS AGAIN, Jack! You make this fun!
  2. First of all, I have to confess that this is the first time I've included a codepen. I know it makes your life easier... I'm just usually up to my ears. But I'm glad I did this time and a little giddy that it wasn't something dumb that I was doing! ? Anyway, now that I see how easy it was I'll be sure to always include a codepen going forward. With regards to gsap.matchMedia... yes I have used it VERY successfully! Didn't think to on this for some reason. Would it make more sense with Draggable? Would it reset the position of the element when Draggable was disabled? Or would I still need to set the x coordinate back. Those GSAP utilities are sneaky powerful!
  3. I'm trying to enable and disable Draggable and it is causing an error: Uncaught Range Error: Maximum call stack size exceeded It's a snippet I've used many times and only throws the error in version 12+. You can see it in action in the CodePen. I'm using a matchMedia listener to trigger the Draggable div to enable on small screen, and disable on large. If you drag the browser window < 1024 you will see that it enables just fine. But if you drag it back out > 1025px wide, when it disables, it throws the error. Interestingly, if you don't actually interact with the draggable div, it won't throw the error. But if you enable it, then drag the element, and then disable it again, then you get the error. I checked and made sure the matchMedia listener is only firing when it changes, and not in any kind of loop. And again, if I switch to a version of Draggable < version 12, it works perfectly. Hope the CodePen is ok... don't use that too much:-)
  4. 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:-)
  5. 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
  6. 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.
  7. 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!
  8. 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!
  9. 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!
  10. 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!
  11. 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!
  12. 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"
  13. 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!
  14. 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?
  15. 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
×
×
  • Create New...