Jump to content
Search Community

Qamar Aziz

Members

  • Posts

    16

  • Joined

  • Last visited

Qamar Aziz's Achievements

  • Collaborator Rare
  • One Month Later
  • Week One Done
  • Reacting Well Rare
  • First Post Rare

Recent Badges

1

Reputation

1

Community Answers

  1. Qamar Aziz
    Ok let me try, thank you so much for pushing further with the ScrollTo plugin. Once I achieved will share here
  2. Qamar Aziz
    But I feel it's still hard to achieve something like I shared, maybe there is another way around it as I want to scroll the page.
  3. Qamar Aziz started following While Animating SVG DashOffset using GSAP, the timeline not matches exactly , How to use Scrollbar in GSAP animation? , How to stagger Clip-path point animation using GSAP? and 1 other
  4. Qamar Aziz
    I was wondering if there is any workaround where we can create a scrollbar using GSAP, I have attached the codepen. Basically, I wanted to try how to drag the blue box and make the page scroll up or down.
  5. Qamar Aziz
    Thank you so much for the clarification, will look into SVG and the course you shared. One of the Good animation for Scroll in View and Hover animation for Product images
  6. Qamar Aziz
    Thank you so much @Carl Your approach made my day. I took your course one of the amazing courses out there on GSAP. I was thinking about how you added two more points in clip-path making it a staggered animation onUpdate was trying to understand from the below image I created Feeling a little overwhelmed by advanced clip-path animation if I have to create points manually, is there a way we can simplify things? Would love to know about using SVG for this 99% of the time. Also tried with the points shown in the image, but couldn't get the desired results for from: 'start' or 'end' https://codepen.io/azizqamar7/pen/vYMaMXr
  7. Qamar Aziz
    I'm thinking why the timeline animation is 1 sec, although the total has to be 2 sec right?
  8. Qamar Aziz
    Thank you for helping with this, I believe I have figured it out.https://codepen.io/azizqamar7/pen/vYMaMXr
  9. Qamar Aziz
    I was trying to achieve the clip-path stagger animation using GSAP similar to this website: https://alphatango.com/work if you hover over the below image we can easily see how the clip-path is changing. Interestingly, I achieved very close to it, but not exactly what's there is the alphatango site. Can anyone have an idea of how we go about it? Attached the codepen
  10. Qamar Aziz
    Thank you so much for letting me know about the performance issue with CSS Transition and GSAP duration difference in animation. So you are suggesting changing the title, content, and index as I add to the same timeline and start from 0s? but this won't work as Images as stacked upon each other so they are hidden from behind. Any idea how do I make right image for right title, content, index even if I have to approach the same by stacking each other as they will be visible from behind. I just want the content to update correctly while scrubbing. Any method will sound good
  11. Qamar Aziz
    I have added a Scrolltrigger Interaction where content switches based on the slide image active. When I'm scrolling in the content switching is very easy as I'm running a function changeSlideContent(index) onStart. When I scrub back to top, any idea how do I switch title, content, index, and dot with respect to their image active. For each slide Image, there is a data attribute through which content is changing. Any idea how to achieve this smoothly? I have attached the codepen link. I tried the whole day figuring out this, hoping the community will have my answers
  12. Qamar Aziz
    Now I get it. Thank you for making this clear.
  13. Qamar Aziz
    Got it. Can we set autoAlpha between 0 and 1 (Like 0.2)? And what happens to visibility if we set any value between 0 and 1?
  14. Qamar Aziz
    Yeah, I get it DrawSVG plugin is so cool. I just wanted to try using other methods. Thank you so much for the hint. I calculated the path -length and reversed its path using this codepen and it worked as DrawSVG. https://codepen.io/azizqamar7/pen/QWoYbZB
  15. Qamar Aziz
    I was trying to animate SVG using the DashOffset property. When the animation ends, the timeline is not aligned with the SVG strokeDashoffset. I know we have to match the exact offset to hide the strokes but, is it possible to make align both?
  16. Qamar Aziz
    Thank You so much @Rodrigo The switch of both images is very smooth now. How does'autoAlpha' help make it visible or hidden? I thought it was only used for opacity switch.
×
×
  • Create New...