Jump to content
GreenSock

ektorp

ShockinglyGreen
  • Posts

    27
  • Joined

  • Last visited

About ektorp

  1. Thank you team Greensock for the feedback and tips. This definitely got me pushed in the direction I needed. Thanks again.
  2. Hi - I am in need of a draggable range slider. Searching through the great Greensock forums, I found an example that fits my base need quite nicely. The extra enhancement I need is to basically have 2 of the range sliders on the page where the interaction with one will affect and update the other - basically, an onscreen duplicate. For this, I believe I would just need to loop through the 2 elements and create the Draggables. Where I have gotten it so far is if you drag any of the 2nd bottom knobs it updates the 1st top range slider as needed. But if you click the 2nd bottom range bar it only properly updates the 1st top. And if you drag the 1st top knobs, it only affects the top range slider. I am not sure if Draggable is not looped correctly to make the necessary updates or if something else is being missed with the Draggable set up. Again, I just need 2 of the exact same range sliders on the page where an interaction with one will properly update the other. Any help and assistance with this is greatly appreciated. Here is the original example if there is a simpler way to duplicate the range slider. https://codepen.io/bdang/pen/NWaEeBY
  3. Thanks Jack. I completely missed the event bubbling with this. It makes perfect sense. Thanks for the simple explanation and example solution.
  4. Hi - I simply want to set an animation based on whether or not it is currently animating. I see GSAP's isTweening but it does not seem to be working as expected. In my simple CodePen example, I simply want to click the button and then show the box, and then click anywhere on the document or page, to then hide or fade out the box. If you click the button super fast multiple times it does then seem to work. So I think there is some basic step in this simple request that I am missing. Any help would be greatly appreciated.
  5. Great, thx for confirming @OSUblake. I know this simple...I just find this a bit easier and faster than the native JS syntax, especially when already using GSAP. Another nice benefit here is not having to manually loop through various groups of content elements and set values. GSAP does this with a single line of code.
  6. @GreenSock Yes, I have found myself using GSAP a lot lately with just setting various CSS properties as shown above - the typical things we did with jQuery. I am not using jQuery much anymore like many of us and using GSAP like this is super useful as a utility type library, of course in addition to animations. Is GSAP commonly used this way and is it recommended or are there any possible considerations to keep in mind with this approach? By this approach, I mean using GSAP to extensively manipulate DOM elements by showing, hiding, and instantly setting any CSS property to an element, and not necessarily animating it.
  7. Thank you akapowl for the great but simple resolve for this. I knew it was something quite fundamental. And thanks for confirming the CSS transition issue as well...it's much appreciated.
  8. Hi team GSAP, I am running into a (I believe) a basic issue with ScrollTrigger animating a clip-path on scroll. Viewing the code pen, the start and end triggers are set correctly. But as you scroll, the clip-path is not animating...it is just jumping at the end point. The intention is to have it start to reveal the whole image starting on 95% and completing at 50% with scroll scrubbing in place. I believe it is an issue with how the clipPath is set up because if I simply replace the "clipPath" animation property with "opacity" it works fine. Another interesting thing that came up is that if I add the css "transition" property on the element it does animate it at the end point. This is a bit strange as I do not recall GSAP ever requiring default properties directly in the CSS. Any help with this would be greatly appreciated.
  9. Many thanks Jack for your help and assistance.
  10. I am having some strange issues come up with a basic set up with Draggable. I am creating a simple carousel-like set up with Draggable to swipe through page panels. It is working for the most part but there are some issues. On page load, it needs to default to PANEL 2 which it does. 1 - There are top tab items that when clicked, they slide to the appropriate panel as expected using simple GSAP. But once a tab other than the first (PANEL 1) is clicked, and I attempt to drag the panels, the panels get shifted and disoriented. 2 - Resizing the browser creates an issue with the draggable panels. Before doing any dragging, if you click any of the tabs, and then resize the browser, everything resizes accordingly and is fine. But once you Drag the panels, and then resize the browser, then panels get shifted and disoriented again. 3 - Is there a snapComplete event? I looked through the documentation and could not find anything that resembles such an event. If you click a tab it slides to the appropriate tab and sets the active tab. The active tab needs to also be set when the Drag and Snap is complete. How would this be done with no SnapComplete-like event? I have a function for this, (ie. setNav(1)), but do not see how or where I can use this with Draggable. Any help and assistance with getting these issues resolved is very much appreciated.
  11. Thank you @OSUblake for the simple and obvious issue with this...it's most appreciated.
  12. Thanks again @Cassie for your assistance with this. I did get your implementation working as needed without any errors. Thanks again for this. If possible, for future reference, it would be great to know why my initial (now public) implementation was getting the JS error.
  13. @Cassie Thank you Cassie for the response. Ok yes, this is a cleaner approach...thank you for this. I have made the codepen public. Can you now view it to see the error? Again, the error only happens when you scroll down the page and the refresh the page. The scroll effect then breaks and gives the error with initialization.
  14. Hello. I am trying to recreate a simple scroll effect to toggle the page header/navigation based on the user's scroll direction as done on https://www.gm.com/. I have a basic setup in my attached codepen. 1 - Is this an acceptable approach or is there a better way to set this up as far as performance and optimization? 2 - On initial page load, everything seems to be fine as a user's scroll up and down the page. But if you scroll down into the page, and then hit the browser's refresh button, it gets an error saying that my scroll function cannot be accessed before initialization. I have tried a few different things to get this resolved with no luck. Any help and assistance with this is greatly appreciated.
  15. This is what I thought. Thanks for the confirmation PointC...it's much appreciated.
×