Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

2 Newbie

1 Follower

About atulraj89

  • Rank

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Thanks a ton Mikel. I have invested time to debug it, and it was my blunder, Thanks again
  2. 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 scre
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. @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 carousel
  8. 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
  9. 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, b
  10. 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 whe
  11. Hello, @mikel Its nice idea, Thanks for it. @ZachSaucier Thanks for the learning path above.
  12. 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?
  13. 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
  14. Thanks a Ton @ZachSaucier, You are a life saver, but again this beginner need more help of yours, I have created the SVG , the way you guide me above, and results are now 99% what I wanted it, Thanks again, So 2 things I need your help and guidance on, 1. As you suggest just merge the layers and morph between states, but When I am merging the layers with AI, its wrapping all the layers in a G, group element, and as per docs, morphing do not work on whole Group, it works only on D attribute of a Path, So how to morph between states? So once I was not able to do this w