Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

4 Newbie

About jeepee3

  • Rank
  1. @ZachSaucier Well specifically, how to kill both animation and draggable instances on window resize and recalculate. My method above fails to kill the current instances exists on resize, and I understand how that's the wrong way to go and is the reason for the breakdown. Your method doesn't use the kill() method, which I noticed elsewhere, so I'm just looking for the most efficient way to do this.
  2. @ZachSaucier Man, I have tried in vain to learn from that demo and take what I need for mine but it's just not working. Any additional direction would be much appreciated.
  3. @ZachSaucier! I never thanked you for this 🤠 Now I've run into a new issue. The carousel works great on load, the onRelease function works great. But when the window is resized or just scrolled on mobile, the carousel breaks down if you swipe it again. I think it's the window resize function that's causing this but I need the values to be recalculated on resize. Ideally, I'd like to have 3 showing at <768px and 5 showing on anything larger. Is there a better way than this to recalculate these values smoothly on window resize and could this include a cellWidth window%
  4. Thanks @ZachSaucier. I get that I can use onThrowComplete and onDragEnd callbacks to know when the whole slider has moved but I'm unclear as to how to actually identify the active slide, so I can grab it's data-attribute or whatever. From there, I know how to use that to switch out content below. This is where the updates happen to the active slide .to(element, cellStep, { scale: 1, repeat: 1, yoyo: true }, 0.5 - cellStep); but where would the function to grab attributes from it go? or something equivalent to toggleClass() ?
  5. I modified this slider a while ago to include a (somewhat) arch effect and now I want to expand it to display content below the slider which changes dependent on the 'active' slider at the top. I could do this with some simple fadeIn/hide direction based on matching data attributes but since className is out with GSAP3, I'm not sure how to throw this function into the mix.
  6. Thank you so much @PointC, huge help today. I've worked this into my project now and everything is working in tandem now
  7. @PointC I'm still not seeing a working carousel after these updates though. The error is gone now, but the slider build is still not working properly.
  8. Thanks @PointC, but I noticed that your demo with updated Draggable is still not working as it was here: https://codepen.io/glenn_pot/pen/NWRoJjp
  9. Thanks for the super quick reply @ZachSaucier. This is the TweenMax, Draggable, ThrowProps portion of my code, which works but I guess now needs to be updated. https://codepen.io/glenn_pot/pen/NWRoJjp I read the guide you shared and swapped out TweenLite and TweenMax instances and I'm getting "Uncaught ReferenceError: Draggable is not defined" https://codepen.io/glenn_pot/pen/VwKRpYe
  10. I'm running two completely separate functions and loading 4 libraries/plugins: /gsap.min.js /TweenMax.min.js /Draggable.min.js /ThrowPropsPlugin.min.js function #1 is uses the gsap.timeline tool function #2 is uses TweenLite, Draggable and ThrowPropsPlugin. #1 works great if I comment out the TweenMax, Draggable and ThrowProps scripts. #2 works great if I comment out the gsap.min.js script. Is there some obvious reason why they won't work together?
  11. jeepee3

    Floating Animation

    Thanks @mikel! I think I got it using gsaps .toArray() method. https://codepen.io/glenn_pot/pen/wvzmYLv
  12. jeepee3

    Floating Animation

    Hi @ZachSaucier, @OSUblake. Could you point me in the right direction for applying this to multiple elements on the page, each moving independently of each other?