Jump to content
Search Community

Tessa

Members
  • Posts

    4
  • Joined

  • Last visited

Everything posted by Tessa

  1. @ZachSaucier Thank you, this makes sense! I added a timeout in an attempt to detect if the user is actually trying to hover (so that it doesn't just stop abruptly every time the mouse happens to pass over the div). Even so, I'm wondering if there's a way to 'ease' the tween.kill() so that it's not as sudden? Or would I need to add to my auto scroll/slow down the animation itself as the cursor approaches the boundaries of the div? Thanks again for any insight! https://codepen.io/jsprac/pen/PoojEde
  2. Hello, I'm very new to GSAP and am trying to figure out how to pause a tween on the hover of a specific div. The code for the auto scroll was corrected in a previous forum post, but I'm now trying to make this slight adjustment because the aforementioned div is a slider. So when the mouse hovers over this div, the animation needs to pause in order for the user to click through the slides. I'm not sure if I need to assign a timeline to my tween, etc. in order to accomplish this? I've tried to implement some examples from the docs, but nothing has worked; just wanting to see if there's a method simpler than determining if the cursor is in its bounds. Any help is greatly appreciated!
  3. @ZachSaucier Wow - I am so grateful for your time and assistance ? If it's not too much trouble, I have a few follow-up questions. I'm not understanding the logic of the .set() call here/where it's even located since it appears to be implicit. I was reading the docs and realized I was completely mistaken with the xMove and yMove assignments. https://greensock.com/docs/v2/TimelineMax/set() 1. What are the 0 and 500 values actually referring to? $landingInnerContent.on("mousemove touchmove", function(e) { var xMove = "+=0", yMove = "+=0"; if (e.clientX > $landingWrapper.width() / 2) { xMove = "+=500"; } else { xMove = "-=500"; } if (e.clientY > $landingWrapper.height() / 2) { yMove = "+=500"; } else { yMove = "-=500"; 2. Additionally, the forum post that inspired me to try the ScrollToPlugin had eases (following the functions that I believe are the .set() calls you mentioned)... so, are these the calls for which it wouldn't make sense, or am I not following correctly? https://codepen.io/jonathan/pen/QjzZpO $landingInnerContent.on("mousemove touchmove", function(e) { if (e.clientX > $landingWrapper.width() / 2) { TweenMax.to($landingWrapper, 2, { scrollTo: { x: "+=175" }, ease: Power2.easeOut }); } else { TweenMax.to($landingWrapper, 2, { scrollTo: { x: "-=175" }, ease: Power2.easeOut 2. Additionally, the forum post that inspired me to try the ScrollToPlugin had eases (following the functions that I believe are the .set() calls you mentioned)... so, are these the calls for which it wouldn't make sense, or am I not following correctly? 3. More of a theoretical question, as I haven't attempted to implement yet, but I intend to make this 'grid' draggable on mobile (since there'll obviously be no pointer events to respond to for the scrolling). I will surely research all I can in the meantime, but do you know if I can use multiple GSAP libraries simultaneously/disable the Draggable for desktop? I'm afraid that I don't see how the Tweens were conflicting in my original code, and so I don't want to accidentally create more conflicts. No worries if this inquiry is too vague/unsupported. Thanks again for the corrections and helping me to learn!
  4. I'm trying to implement an 'auto scroll' of sorts based on mouse movement/position. I'm new to GSAP; I'm hoping someone can point out my errors/help me to make this animation smoother and continuous? Adapted from: Additionally, here is the live (very rough) preview on my site: https://www.tessa.studio/portfolio Thanks in advance. Edit: The parallax effects on hover are, or at least appear to be, independent of my issues with the ScrollToPlugin... It's still laggy when I comment that portion of the script out. These effects are the reason for wanting to scroll with mouse movements.
×
×
  • Create New...