Shah Sadikov

Dear Craig @PointC, Thank you so much for taking the time to share this detailed explanation with the demo! This makes total sense! Now I understand how the y/xPercents work with the height of itself.

Dear Craig @PointC, Sorry to bother you again! I have studied the code with slow motion and am trying to understand how is the element re-rendered at the point indicated below: What is happening technically when the element leaves the view at the top and re-renders again below? Thank you again! Shah

Thank you so much!!!

Wow ! This is precisely what I was trying to accomplish!! What an elegant solution! Thank you so much!!! Can I use parts of your code ??

Dear Craig @PointC, As always, thank you very much for your quick responses. I have updated the codepen to show what I am trying to accomplish visually. Here is a detailed explanation: Step 1. div element .box enterers the view on load. Step 2. on button click, it send the element out of view. what I am trying to accomplish next is to restart the animation with step 1 when Step 2 ends animating. Visually it looks as if Step 2 while sending the .box element out of view, also brings another .box element into view; thus, making a cycle every time the (same) button is clicked. I tried to emulate it on my updated codepen, alas, in a very limited way. Thank you in advance! Shah

@elegantseagulls and @PointC, thank you very much for the quick response! I have tried what what you suggested and realized what was happening. Thank you for the explanation. However, it doesn't necessarily solve the problem I was working on. What I am trying to accomplish is: on page load - element enters the viewport from the bottom (-50%) on click - element exits the viewport, let's say: transform: translateY(-500px); on exit - it resets and reloads the animation from the beginning. I have tried both .restart() and .invalidate() but to no avail. What is the best way to accomplish this? Also, is transform: translate a better alternative for bottom/top animation for performance? Thank you again! Shah

Hello! I have a quick question in regards to onComplete callback function. In my example above (codepen), when I use the callback function with my tl1, it works as expected. However, when I use it with the tl2, which is activated through event listener, the callback function isn't firing. I was wondering if you can help me understand what I am missing? Thank you in advance! Shah

Thank you very much for the complete information/explanation. This is much appreciated! I will know this moving forward. Also, thank you for this great library! It makes animation process seamless and enjoyable. Shah

@OSUblake, thank you so much! Understood!

Dear Mr. Craig @PointC, Thank you very much for your quick response with the solution, and for the welcome, it's much appreciated! If I may ask a follow up question: why is the TextPlugin registered while the other, RoughEase, isn't? Because the other plugin is working without it being registered. Thank you again! Shah

Hello, I am new to GSAP and getting experience by doing smaller projects. I have attached one such example. The GSAP function I have used in the CodePen example works as expected on-premises but not on CodePen (I left a comment above that function separated by //==== ). I also tried to use the function without "an arrow" but just as "function(word)"; however, still not getting it to work. I look forward to reading your feedback. Thank you in advance! Shah