Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

26 Newbie

About Trapti

  • Rank

Profile Information

  • Gender
    Not Telling
  • Location
  • Interests
    SVG, animations, CSS, layouts, frontend

Recent Profile Visitors

546 profile views
  1. Hey, I am interested. I do not have angular experience but I have worked with react. Portfolio: http://iamtrapti.com/ Codepen Greensock collection: https://codepen.io/collection/DqPvMe One of my writing on SVG and animation: https://css-tricks.com/how-to-get-handwriting-animation-with-irregular-svg-strokes/ Email: reach.trapti@gmail.com
  2. It is difficult to see problem this way. It would be helpful if you can create a demo in Codepen. this line does not seem right to me, you are targeting all the box inside the group it should be ".group .box". Flip.getState('.group, .box');
  3. Hey, It will be really helpful if you can create a sample demo of your task. Read this on how to create demo.
  4. @sam_tween_journeyer hey, Here it is with scroll trigger. https://codepen.io/tripti1410/pen/rNmVymx?editors=1010
  5. Before splitting filter out the content which you don't want using JS.
  6. Trapti

    Project Grid

    hey, I am not exactly sure what you are actually looking for. But here is what my understanding is. After looking at the website. They have used CSS Grid to create the layout. Regarding different size of image they are placing image as contained in the respective container where it will maintain its aspect ratio and render how much ever height it needs. This is one reason you are seeing varying image size. Another reason is they are spreading image in multiple spans (for eg 2 columns). Regarding the animation (I am assuming you are talking about hover ) it can be done in
  7. Please add a demo codepen where you have added the content and how you want to animate those along with the video. It will be helpful to understand.
  8. Hey, I tried doing it with split text. One timeline is for animating the texts, and other for taking the container up. Adjust the time and distance according to your actual text. Hope this helps. https://codepen.io/tripti1410/pen/YzVPpjP
  9. Hey, This article will help. https://www.motiontricks.com/svg-dashed-line-animation/
  10. Hey, I can help you build this animation. Portfolio: http://iamtrapti.com/ Codepen Greensock collection: https://codepen.io/collection/DqPvMe Email: reach.trapti@gmail.com
  11. hey, I am interested in working with you. I have sent you an email. Thanks Trapti https://iamtrapti.com/
  12. @kamran If you see the code both the paragraphs are being targeted separately. You need to adjust the time and distance for both of them according to your need. If you are not familiar with syntax check ScrollTrigger Docs.
  13. Hey, @Kamran Here is a quick fix on what I understood you need https://codepen.io/tripti1410/pen/yLMvYeE . You modify the values according to your need. Suggestions: 1. You are using older versions of GSAP and Scroll. 2. Markup has unnecessary elements(divs). h1 tag should be 1 in a page.
  14. Hey, Here is the quick demo. It is not perfect, but I hope It helps. https://codepen.io/tripti1410/pen/gOmYBZb
  15. Thank you so much for your help.