Jump to content

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


  • Posts

  • Joined

  • Last visited

About ektorp

  1. Thanks Jack. I completely missed the event bubbling with this. It makes perfect sense. Thanks for the simple explanation and example solution.
  2. 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.
  3. 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.
  4. @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.
  5. 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.
  6. 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.
  7. Many thanks Jack for your help and assistance.
  8. 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.
  9. Thank you @OSUblake for the simple and obvious issue with this...it's most appreciated.
  10. 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.
  11. @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.
  12. 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.
  13. This is what I thought. Thanks for the confirmation PointC...it's much appreciated.
  14. I have seen that pretty much all of the SVG animations involve embedding the XML directly into the page and using GSAP to manipulate the various properties and attributes. I am looking to see if it is possible to animate SVG by simply embedding it in an <img> tag. Here is a simple example I am looking to do to tween the SVG color on rollover but it doesn't seem to be taking it. These SVG elements are going to be implemented through a CMS so I was thinking that including them with an <img> tag would make much sense...but I wanted to see if there might be any limitations with this type of implementation.
  15. I have a header animation using SplitText. There are 2 main steps to this header animation. The header letters first animate 'y' into place and then when it is complete it does a wavy text animation effect. It is technically working but the transition from step 1 to step 2 is a bit rough and jerky. I've tried making small adjustments to the pixel values but nothing seems to be working quite well. Can anything be done to smoothen the experience?