onComplete callback function question

[Shah Sadikov 3 Likes (Newbie)]

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

[elegantseagulls 1,429 Likes (Superhero)]

Your onComplete is working (put a console.log, or debug breakpoint in and see)! What's happening, however, is that, tl1 isn't animating any thing that will cause changes to the element (add a rotation and it should work). You may also want to consider that animating bottom and top properties is not very performant from a browser standpoint.

[PointC 14,188 Likes (Superhero)]

In addition to the excellent info from @elegantseagulls, your onComplete for tl2 doesn't fire on subsequent clicks (if that's your goal) because that timeline has already played. You'd need to use:

send.addEventListener("click", (e) => {
  tl2.play(0);
});

 

Happy tweening.

 

[Shah Sadikov 3 Likes (Newbie)]

@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

[PointC 14,188 Likes (Superhero)]

x/y are better than top/left. You can use the GSAP shorthand like y:-500.

 

I'm not sure I follow your reset question.

The element animates into view on page load. (no problem)

A button sends the element back out of view. (no problem)

After it animates out of view it resets. How does it start again? Another button click? The same button that made it exit?

 

If you have a revised demo, that would be great.

 

Happy tweening.

 

 

[Shah Sadikov 3 Likes (Newbie)]

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

[PointC 14,188 Likes (Superhero)]

Okay, I think I understand. Is this what you need it to do?

 

See the Pen ca4d3807850dfc1444f3273ce0365138 by PointC (@PointC) on CodePen

 

 

[Shah Sadikov 3 Likes (Newbie)]

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 ??

[PointC 14,188 Likes (Superhero)]

17 minutes ago, Shah Sadikov said:

Can I use parts of your code ??

Of course you can. Use it all or any parts you like. Have fun.  

[Shah Sadikov 3 Likes (Newbie)]

Thank you so much!!!

[Shah Sadikov 3 Likes (Newbie)]

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

[PointC 14,188 Likes (Superhero)]

yPercent and xPercent are ways of aligning (translating) the element relative to itself in percentages. Super useful for centering the target or, in this case, hiding it just above or below the top/bottom of the window. 

 

Here's a basic example. Just a simple div 100px x 100px.

See the Pen 0e45afe970b94555a8cfef422944ec97 by PointC (@PointC) on CodePen

 

Notice a yPercent of 100 moved it down by the height of itself? Same thing for xPercent:100. You can use negative values as well.

 

So, what is happening in the demo? I'm just using that as a little cheat to make sure the element is fully out of view. At the bottom of the screen the yPercent is 100, in the middle of the screen it goes to 50 and at the top it goes back to 0. If we left it at 50, only half of the box would disappear at the top before if reappeared at the bottom. It would probably be so fast you may not notice, but this ensures it's completely out of view.

 

You do not have to use yPercent like I did. Another approach would be to get the height of your target element and add/subtract that value from the inner height variable when you tween the box. It's entirely up to you. I just found it quicker and easier to use yPercent in this case.

 

Does that make sense?

[Shah Sadikov 3 Likes (Newbie)]

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.