Jump to content

G. Scott

  • Posts

  • Joined

  • Last visited

About G. Scott

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

3,641 profile views

G. Scott's Achievements

  • Week One Done
  • One Month Later
  • One Year In

Recent Badges



  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...