Jump to content

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


  • Posts

  • Joined

  • Last visited

About ektorp

  1. Many thanks Jack for your help and assistance.
  2. 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.
  3. Thank you @OSUblake for the simple and obvious issue with this...it's most appreciated.
  4. 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.
  5. @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.
  6. 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.
  7. This is what I thought. Thanks for the confirmation PointC...it's much appreciated.
  8. 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.
  9. 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?
  10. ektorp

    Wavy Text

    Perfect. Thanks so much OSUblake. Yeah, a part of me didn't believe a stagger was the best solution for this...I just wasn't sure of a better approach. Thanks again.
  11. ektorp

    Wavy Text

    Thank you ohem for your response. Yes, I see how playing with the timing and eases produces different effects but it is still not the result I am looking for. The whole timeline plays through each character one at a time and when the timeline ends the whole timeline and each character repeats itself. What I need is for each character to always be animating. Currently, regardless of the timing or ease setting, each character plays and then stops, and then doesn't start again until the whole timeline completes and restarts itself. For what I need, each character should never stop. They will be continuously animating vertically with each next character staggering in which should create a fluid wavy text animation. I hope this helps with explaining the effect I need. Thanks again ohem for your response.
  12. ektorp

    Wavy Text

    I am trying to create a wavy text effect using SplitText and Timeline staggers. Below is what I have so far but it isn't exactly giving me the result I need. You can see the whole thing does stagger a wavy text effect but I need the animation effect to be more fluid. Basically, every letter should be moving at all times and each next letter would would be slightly staggered to give a continuous looping wavy text effect. If it were just a column of divs it would be a bit more simple but the text is dynamic and I am trying to make use of SplitText and staggered timelines to get the results I need. Any help would be greatly appreciated. http://codepen.io/bdang/pen/YWAWOo/
  13. This is a recent duplicate issue as you can see below. Basically, setting the 'left' property requires setting it's 'position' property as well while using transforms such as 'x' do not require a 'position' setting. Rodrigo sums it up pretty well: http://greensock.com/forums/topic/12374-having-trouble-animating-a-jpg/
  14. you simply need to set the position attribute for your image. just change your img css to the following and you should be good: img { position: relative; display: block; width:200px; }
  15. I just created a similar slider below. It uses GSAP Draggable and performs quite well on all screens. I am now looking to make it loop infinitely as you swipe through the slides. I am not clear on how the infinite looping is done. Any help on getting this to work like this ExtraSlider would be much appreciated. http://codepen.io/bdang/pen/db82c6c86dfef17951df744ed8e3a42a