Can not replicate this with inteactions

Design
1

I have a design that animates the progressbar around the “back-to-top” button with queryselector and wants to move it over to interactions with greensock instead.

But I can not for the life of me get this to work.

Any interaction wisard here that can help me out?

Link to the design:

https://test.meetmario.dev/

github: GitHub - meetmariodev/test: Have a design I need help with

2

I did find this discussion about implementing gsap in the way I try to do here:

https://gsap.com/community/forums/topic/32401-how-to-make-back-to-top-with-progress-indicator-locomotive-scroll/

Any Idea on how to add this with interactions or should I go about it the manual way.

Would sure like to learn how to translate gsap from examples into actionable things in pinegrow desktop app… :sweat_smile:

3

I have managed to convert the Javascript to gsap code, not through pinegrow but manually. Now a new problem … I have the navigation getting cut off when scrolling down and then scroll a bit up again. You can see it in the test site. It is driving me insane.

Anyone having an idea where I did it wrong?

4

Hi Mario,

I’ve implemented your GSAP back-to-top button with the circular progress animation. I’ve created a fork of your repository and submitted a Pull Request with these changes.

The implementation includes:

  • GSAP animations for smooth transitions
  • Circular progress indicator
  • Mobile-friendly design
  • Detailed documentation

Hope that helps :crossed_fingers:

5

Will check it as soon as my kids have gone to sleep. Thx for your help!