Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Shah Sadikov

onComplete callback function question

Go to solution Solved by PointC,

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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.

:)

 

  • Like 4
Link to comment
Share on other sites

@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

Link to comment
Share on other sites

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.

:)

 

 

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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. :) 

  • Like 2
Link to comment
Share on other sites

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: 

image.thumb.png.4e8a5e60c7be6ebe237da9396d7e851e.png

 

What is happening technically when the element leaves the view at the top and re-renders again below? 

 

Thank you again!

Shah

Link to comment
Share on other sites

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?

  • Like 3
Link to comment
Share on other sites

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.  

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×