ektorp

Many thanks Jack for your help and assistance.

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.

Thank you @OSUblake for the simple and obvious issue with this...it's most appreciated.

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.

@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.

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.

This is what I thought. Thanks for the confirmation PointC...it's much appreciated.

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.

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?

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.

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.

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/

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/

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; }

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

With the help of Draggable, I've put together a swipe carousel gallery using test place holder assets. It's pretty straight forward and works the way a standard touch based carousel would work. Performance on mobile and tablets is great. I am now looking to implement an infinite or looping carousel that continuously rotates through the slide items as you swipe through. I know there are various jQuery plugins that do this but I am looking to do my own custom solution using GSAP. I've seen some examples doing this using div or slide "clones" but haven't really figured out how this is implemented. Based on the Draggable carousel I currently have in place, is there a straight forward way to let it run infinitely? It would basically continuously loop through if you swipe through or use the navigation arrows. Any help would be greatly appreciated.

I would like to get the community’s input on some thoughts about the current state of interactive development. I have been a flash developer for the past decade, and like the rest of us, have adapted to industry dynamics now using JavaScript & CSS for interactive work previously done in Flash. Coming from a Flash background GSAP JS has been amazing and I have been able to do awesome work with it. My work, like the rest of us, involves using GSAP JS to animate and manipulate DOM elements to create interactive effects. My question is…is this really and truly HTML5? I was recently in a project team meeting getting compliments on the HTML5 project I recently did using GSAP JS. I’m sure it’s not uncommon for those of us using GSAP JS to get similar responses. Although I appreciate the positive feedback, I feel it is a bit misleading as I do not feel it is true HTML5. Yes, TweenMax can manipulate any JS property and canvas elements but I, and I believe the most of us, are simply using JavaScript to manipulate simple page DOM elements. As long as everything looks and works fine, a part of me wants to let people say and think what they like, but faced in front of a client is this appropriate to sell a feature or technology I do not feel is truly and technically HTML5? I would appreciate feedback on this subject.

Thank you Jack for your feedback. It is very informative. Would it be possible to get a couple of references to iOS (iPhone/iPad) apps that we know have used the Throwprops plugin?

I am looking to create an iPad app with an image gallery with a standard scrolling thumbnail tray that scrolls. Clicking on a thumbnail will launch a full sized image. The best example I've seen of this using Flash/AIR is with Redbull's Illume iPad app. Does anyone know if Throwprops was used for this scrolling panel used in the gallery thumbnails. If not, do you know if Throwprops can achieve this level of performance. The performance is indistinguishable from a native iOS app. I am definitely interested in becoming a Greensock member and getting the plugin and was just wondering if this is the performance we can expect with the Throwprops plugin. Any feedback would be greatly appreciated.