atulraj89

I need to create the background on my site similar to this(just learning purpose.), it should be interactive as the given example and I need a custom shape in BG where right now a D like shape is. is it possible with GSAP only? if not then by Which library it can be achieved. Example site: https://www.ddd.it/

Thanks a ton Mikel. I have invested time to debug it, and it was my blunder, Thanks again

Hello All, I am having a small issue while morhping with Timeline, Check the given codepen on smaller screen (Like mobile), and see the animation of "AIM", so problem here is , I have given the same time to all three paths to morph but as you can see , sometimes A, I , M are having different morph rate, or you can say speed, ideally the whole AIM word should morph as the same time as I have used "<" this operator in TL. why this is going different, beside all other words are morphing together as per the timeline. I hope I am able to explain what is the problem here. Here is the screenshot of the problem for more clarification. as you can see the m is faster than AI, NOTE: it will be very hard to see this problem here, you need to open it in codepen window and make the result side smaller in width, re-run it 2 or 3 times to see the exact effect

Thanks @ZachSaucier, I did the same way, Thanks again

Hello @ZachSaucier, Yes I have the index in active slide, I should Edit the main questions headline, Actually I need to add class on the section (scroll-able section) with the current index of active slide, So I want to know is there any GSAP way to do this, or I need to add it manually by JS like this. So what I am doing here, removing class active from all the slides and adding the class only on selected index and this is what I need. just want to know is this ok to do it like this or is there any GSAP way to do this? I mentioned this in question body.

Hello Everyone, in Timeline, I want to get the index of current animated item, How to do that? for example when scrolling or dragging in this vertical slider, dots animating and animated dot has active class, I want to get the index of the animated dot, or you can say active dot and add the same active class on the sections, so they can relate and I can style the specific section. note: This is vertical slider created by CRAIG, I just modified it as per my needs.

Hello Everyone, Maybe someone also come here like I did searching for the same clip-path issue on Mozila. So its fixed in the latest versions, All you need to do is update your firefox mozila. and clip-path issue will be fixed.

I have already tried this, but its not working , check this latest example, I have did some modifications and made it as I needed, but that problem of window scroll while the mouse on the masterWrap is still there, Can you please have a look. https://codepen.io/atulraj89/pen/ExPMoqj So the need is, when I am using mouseWheel to run slider and my Mouse is over the slider, its should not scroll the window, olny slider needs to run.

@PointC, Thanks Craig, Its awesome and helped me a lot, but after modification it has a small problem, I should't say this a problem but a small UX issue, Just mentioning here, so that you will suggest some solution of that as well. So once you are using it in a window sized 100vh or less, or body's overflow hidden, then with mouse wheel scroll its working superb as expected, but when you use it within a page which has scroll or more content in body, then with mouse wheel scroll its scrolling the items and page too. ideally if we have mouse over the #masterWrap, then only carousels should move not the body, But its completely understood as this is not a normal slider and a full page slider, so its working a expected.

Hello @PointC, Thanks for the solution, awesome it is, Actually initially I want to show only first 3 items, that's why that padding was there, but its messing with the drag. One more question: is it possible to loop it, like infinite scroll? Thanks Again

Hi @PointC First of all thanks for this awesome Slider. I have left private message to you, but after reading the complete thread I feel I should Ask it here , so it will maybe useful for someone else too. So using the example of yours, which is a full page slider, I am trying to create a slider which is not full page and shows 5 items at a time, I have forked the pen and create this, with a small function which will run this on keyboard up and down arrow key too. https://codepen.io/atulraj89/pen/yLewvZe So my problem is, related to dragging, Everything is working as expected, but while dragging, after item-15, I am not able to drag it further, Because of height, I can see item 16 and 17, but not 18, is it possible to drag it to the end like its working with Mouse wheel and keyboard?and same thing happening while dragging back to upwards, I am not able to drag it before item 3. So how drag function working here, how you calculating the drag area? I have tried to find the code related to it but not able to, need your expertise on this.

Hello All, I am creating vertical slider kind of functionality, with smooth scroll. I have found in a discussion the window smooth behave by @OSUblake , https://codepen.io/osublake/pen/QqPqbN, but its a smooth scroll which depends on the mouse wheel, and its scrolling depending on the mouse wheel speed, I have 2 questions here, 1. in this example whole window is scrolling with smoothness, is it possible to apply same thing on a div? 2. if yes, then is it possible with GSAP to scroll one item at a time. like in the given image, I want one test item to scroll with one mouse wheel stroke and smoothly, Just an Idea needed. Here is the thing Which I am creating, Note: I have shockingly green, if any paid plugin need to use in this example to achieve the result.

Hello, @mikel Its nice idea, Thanks for it. @ZachSaucier Thanks for the learning path above.

Just watched it, Thanks a lot for the support, Love this community, Any path if you can suggest me to learn GSAP in and out?

Hey @ZachSaucier, Thanks a ton, Everything now working as expected, as you suggested to use GSAP's Timeline to sequence things more easily. I have tried this, but I am stuck with syntax, when I using Timeline, each and every item going as per TL, which Mean, first M is animating and once it complete the animation, then the h starts animating, But I want a set of GSAP animation to run once and then the second once, For Example, when I am converting the below code to TL based, every line is executing after the previous one completes, And yes this is the use of TL. // animate M in aim for first effect gsap.to("#m-o", { duration: 2, morphSVG: "#m-fc" }) // animate high for first effect gsap.to("#h-o", { duration: 2, morphSVG: "#h-fc" }) gsap.to("#hi-o", { duration: 2, morphSVG: "#hi-fc" }) gsap.to("#hig-o", { duration: 2, morphSVG: "#hig-fc" }) gsap.to("#high-o", { duration: 2, morphSVG: "#high-fc" }) gsap.to("#dot-1-o", { duration: 2, morphSVG: "#dot1-fc" }) But I want this whole animation run at once, and then the second part of my animation, for which I am using delay for now, gsap.to("#a-o", { duration: 2, morphSVG: "#a-sc", delay: 2}) gsap.to("#ai-o", { duration: 2, morphSVG: "#i-sc", delay: 2}) gsap.to("#m-o", { duration: 2, morphSVG: "#m-sc", delay: 2}) // animate high for second effect gsap.to("#h-o", { duration: 2, morphSVG: "#h-sc", delay: 2}) gsap.to("#hi-o", { duration: 2, morphSVG: "#hi-sc", delay: 2}) gsap.to("#hig-o", { duration: 2, morphSVG: "#hig-sc", delay: 2}) gsap.to("#high-o", { duration: 2, morphSVG: "#high-sc", delay: 2}) how to use it in TL, so that the upper code will run and then the below part, which is using delay for now.