Shah Sadikov
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Shah Sadikov
-
-
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 ??
-
2
-
-
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
See the Pen LYQGWmO by shahsadikov (@shahsadikov) on CodePen
-
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
-
1
-
-
@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
See the Pen LYewOov?editors=0110 by shahsadikov (@shahsadikov) on CodePen
onComplete callback function question
in GSAP
Posted
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.