Sahil

Do you mean something like this? When you repeat animation, same animation is repeated on same elements. So to achieve that you will have to do more than a simple tween. You can read about modifiers plugin in docs. And how are you creating your demos? your current demo uses TweenMax 1.18.0 while current version is 1.20.3.

What version of TweenMax are you using? It usually shows this error in FireFox when you are using old version of TweenMax.

@OSUblake Can we retrieve current easing value so it can be multiplied with end value which gives this approach ability to use easing?

@Nico You can do that by using modifiers plugin. Recent similar threads, UPDATE: @jmca @melissa Use 'tween.ratio' instead of 'tween.progress()' so you can use easing effects.

You had undefined variables in your demo that is why it wasn't working. You should look into how to debug JavaScript. Again the videos I had suggested, they walk you through all the basic details about how you can chain animations and last two videos show advanced approach of using functions for complex animations.

You need to set controller property 'vertical' to false.

Maybe you can do something like this by animating progress, if you don't want to use customEase.

You can do that with custom ease. https://greensock.com/docs/Easing/CustomEase

@msolari Another issue that puzzled me is, you are defining a 'tlcA' timeline which basically has no duration. So as soon as page loads, the 'tlcA' onComplete callback is called which animates the main animation. For this animation you don't really need to use any callbacks, you can do same thing by using one timeline. Though I don't see any benefit of setting opacity here. Well, just to add a little more, it also helps us a lot when demos are simple and all ids, classes and variable are have descriptive name. Again, feel free to ask any questions.

No we don't have any quota for questions, so feel free to ask questions whenever you get stuck. Just it makes it easy for us when someone reads/follows tutorial when we suggest something. So if are getting stuck on new issues or something is complex for you to understand everybody here will be happy to help. And sometimes it is easier to ask for help rather than banging your head for hours, so don't worry about it. As for your question, you are using a tween rather than timeline. You can always set it's 'paused' property to true so it won't auto play. Your fromTo tween isn't playing because you aren't calling that fadeIn function anywhere in your code. If you haven't seen already you should go through these videos which will help you a lot, https://www.youtube.com/watch?v=sXJKg8SUSLI https://www.youtube.com/watch?v=tMP1PCErrmE https://www.youtube.com/watch?v=QO1mLs96krY https://www.youtube.com/watch?v=ZbTI85lmu9Q https://www.youtube.com/watch?v=8ETMjqhQRCs

You can simply scroll to certain element and don't need to calculate offset. As to answer why it is scrolling randomly, you are trying to scroll to the offset of that slide. So when your 2nd slide is in center, it's offset is 0. So when you click on second link again, scrollTo plugin scrolls to 0 which is first slide. If you click on 3rd link, it doesn't animate because offset of 3rd slide is same as where current scroll is. Plus if you click too quick the whole animation gets messed up because now you are referencing offsets while slides are at random positions.

What do you expect to happen?

Here is how you can do it. _gsTransform object is attached by GSAP on any objects that it animates, it lets you access all transformation properties.

A simple solution would be to hide overflow. Or better solution would be to not wrap child element inside of it. As far as I can think at the moment, it will take a lot of calculation to determine relationship between both scales so child element doesn't overflow.

It's created but only on DOM tree, not visible in HTML. If you watch the video you will see what I am doing. It is like creating a element but never putting it in HTML. And trust me, it is least you have to worry about.

BTW have you created plugins before? Just guessing, it can happen that both instances are referencing same variables, it had happened with me. If not I will suggest to start with something really small and simple example, once you are sure your implementation is working then you can start working on this. Otherwise you will end up spending endless time on figuring why something isn't working.

Well that's just proxy target, so you don't have to use any extra html or use CSS to hide it, but I don't think it should be an issue. I had created video tutorial on it couple of weeks ago, see if it helps you. It explains the draggable part only, it's my first tutorial ever so I am not that fluent. The reason why both carousel respond to drag is, probably you are not isolating them. Plus I don't think using Modernizer would be good idea, because it just increases dependencies. @OSUblake can suggest what will be best approach to implement it as plugin/prototype. Plus he can also suggest what will be best approach to enable/disable draggable for touch devices.

That looks like you have done a lot of work. Are you planning to make it a plugin or just planning to use it on your site? One curious question, did you understand all the code? Well I have never created jQuery plugin and not sure if you need it to do it. Right now, if you duplicate the html, it just creates two slides that respond to each other so most probably you will have to rework everything. Here is how I had created a reusable function for another project. Though default values should be checked for 'undefined' instead of using OR operator. I don't know why it is behaving differently in your implementation, are you sure you copied everything? If you check my demo, it works without issues. I will take a look at it once you rework it. As for touch, I don't see any good reason to disable draggable for touch non-touch devices. If you change the cursor, user won't even notice it. I personally think it is good think to give user more options to interact rather than taking it away. In fact, I didn't know the original site was draggable on mobile. I just made demo with draggable as additional feature.

That's not really GSAP related question. Most of the javascript related answers can be found with a simple google search, it will be great if all questions asked on this forum are directly or indirectly GSAP related only.

@Carl he wants the text to be static, more like clipping effect. I didn't read it on first response either.

Ya, modifiers plugin gives you access to access calculated value on each frame, it gives you opportunity to modify these values before applying them. You can read more about in docs. It is really powerful feature. Following is thread with countless examples by @OSUblake, he basically requested this plugin and has done a lot of work to demonstrate all the crazy possibilities. Again the mapping function is something Blake posted, it lets you map two values in ratio. I am using it to avoid excluding height 'auto' of child element. Here is what happens if you don't use it. If you have played a lot with timelines, progress etc you will quickly understand what is going on. I don't fully understand mapping function either but I can see myself using it a lot in future, if you play with absolute values you will understand what is going on. Blake might explain it in detail once he reads it.

@friendlygiraffe whenever you are animating any element, make sure to set it's position. Otherwise you will see a lot of unexpected behavior. @craftedbygc When you are animating width, transform origin doesn't really matter. It is only taken in consideration when you are doing any transforms like scaling, animating skewX/skewY etc.

Here is similar thread. I am not completely sure but I remember reading @Jonathan's comment recently where he advises to not animate margins as it will cause browser to repaint layout.

I tried editing your pen, but it just seems too complex along with issues in css, html. I will post few links to video tutorial, that should cover most of the basics about how you can repeat animations etc and how to create complex animations with functions. I hope you will go through these tutorials, otherwise it just opens door for more questions. Also, try to post your questions with as simple example as possible with reduced codepen demo specific to the question. It makes it a lot easier to answer and will also help you understand quickly. https://www.youtube.com/watch?v=sXJKg8SUSLI https://www.youtube.com/watch?v=tMP1PCErrmE https://www.youtube.com/watch?v=QO1mLs96krY https://www.youtube.com/watch?v=ZbTI85lmu9Q https://www.youtube.com/watch?v=8ETMjqhQRCs

You had missing quotes and comma on line 9, I have changed timescale so you can see that animation stops after repeating twice. Didn't really understand your question about infinite repeating animation.