Jump to content
Search Community

Sajidul Islam

Members

  • Posts

    38

  • Joined

  • Last visited

Recent Profile Visitors

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

Sajidul Islam's Achievements

  • Dedicated Rare
  • One Year In
  • Collaborator Rare
  • One Month Later
  • Week One Done

Recent Badges

4

Reputation

  1. Sajidul Islam
    Hi @Rodrigo, Thanks you very much for pointing out the issue. It worked as expected. I was thinking something is wrong with my GSAP code where the actual issue was with my markup. Thanks a lot!
  2. Sajidul Islam started following How to push element's furthur to animate new element? , On Hover SVG animation , Auto Adjust element and pin height and 1 other
  3. Sajidul Islam
    Hi, I would like to get help to fix an issue I'm encountering with the DrawSVG plugin and GSAP. I would like to animate my SVG element on hover and when I mouse leave it should revert. Currently, It's working fine except- If there are are multiple buttons all animation are executing at the same time when I hove any of the element, which I don't want. I want to execute the animation individually for each button. How can I achieve this effect? Many Thanks, Sajidul
  4. Sajidul Islam
    Hi @GreenSock, Yes it works. But the problem is, Since I can't use CSS transition I must have to use it within GSAP. In this case, How can I apply the timeline here which will make the triggered element's inner div's height auto? which is currently handled by CSS? And as usual it will reverse the element on reverse scroll. In summary, How can I achieve the same effect with timeline and apply the animations if needed?
  5. Sajidul Islam
    Hi @mvaneijgen I've find out the scroll issue is happening only when I use scrollSmoother. I've updated my pen with scrollSmoother. Please try to scroll back and forth and you will see when you try to reverse scroll, it stacks on the Heading 4. I Can share a video recording if you're unable to reproduce the issue.
  6. Sajidul Islam
    Hi @mvaneijgen, Sorry to bother you again. Actually I tried to apply your above solutions on my live code and unfortunately, the issue is remains same, Maybe it's because I didn't apply it properly. It's still opening before reach at the top. When the Heading 2 is active and you start scrolling Heading 3 is active(before reaching the top). Another issue is, When I used ScrolTrigger refresh, It's stuck at the pinned element and looks like browser is infinite loading. In this link I tried to replicate my issue, Could you please help and let me know How I can fix this? https://codepen.io/sajidulislam0/full/poYEoBE
  7. Sajidul Islam
    This is exactly what I wanted, Thanks a lot.
  8. Sajidul Islam
    Hi, I'm having some issues when I tried to hide an element with height initially and on scroll add a class to make the height auto. The problem is, when I add the class and use the auto height CSS, it's not adjusting the pin height. If I resize the browser a bit, it works. Because of that, my next element's are sometimes triggering before reaching the top or starting the scrollTrigger. In summary, I have 2 problem- 1. Auto adjust pin height while change the element height. 2. All element should start 100px before reaching the top. I think this issue will fix if we can fix the first issue. Ant help would be appreciated, Many Thanks, Sajidul
  9. Sajidul Islam
    Hi @mvaneijgen, This is exactly what I was looking for. Just one thing, Could you please help to add the code to pause the element for specific time? Lets say I want to pause the element for 2 sec after finishing the Opacity 0.4 and before starting the next timeline?
  10. Sajidul Islam
    Hi, I've been struggling to make an animation and I couldn't find a way to do this. As per my demo, Lets say I have 4 different section and timeline. An elements should start animating from the first timeline and it will continue from the second timeline and so on. In my demo it's bit jumpy and Its not smooth at all. (Please see the comment's inside the code for more details) I tried to do it with addPause and it didn't work as expected. Any help would be highly appreciated. Many Thanks, Sajidul
  11. Sajidul Islam
    Thank You!
  12. Sajidul Islam
    @Toso If you see the item keeps moving even though there are no element's left to animate. I want to stop the animation(pushing left) if there are no item's left. In this image, you see the item's are keeps scrolling. But I want it to be stopped if this is the last item (.block-single)
  13. Sajidul Islam
    @Toso Wow, this is what I wanted. Just one this, Is it possible to stop animating if the item is last item? Something, I did on my pen initially?
  14. Sajidul Islam
    @Toso Thanks for the update, Now if you see, my expected output is when you first scroll. but after that it's not pushing more left/continuously when the new item are animating. It's only happening for the first scroll. I just need it to be keep continuing.
  15. Sajidul Islam
    Hi @Toso, Thanks for the pen. It's almost there. Except, I want to previously animated item to be pushed at the same time new item is animating. How can I do it?
  16. Sajidul Islam
    Hi, I want the previously animated items to continue moving towards the left as new items are animated. I've created a demo where all of the repeated item's are animating on the same place. What I want is, first scroll should move an element by 315px(element's width) and when user scroll's again, previous item will add more 315px to move it left and new item will appear their. Any help would be appreciated. Many Thanks, Sajidul
×
×
  • Create New...