[ScrollTrigger issues in Nuxt components when navigating pages]

@Code32 Did you find a solution for this issue? I am facing the same one

[How to set ScrollTrigger onLeave action to trigger function only once]

@mikel Great solution! Not sure how it slipped my eye Thank you very much for the quick response, have a nice day!

[How to set ScrollTrigger onLeave action to trigger function only once]

Hi, I am working on the NuxtJS GSAP application and using ScrollTrigger to animate elements based on the scrolled position.
First of all, I am amazing how great this plugin works, but I have a question regading the actions.
So, as mentioned in the documentation, using onLeave fires at the end of the animation, which is exactly what I need, since when the scrollTrigger animation is done, I want to call another function. The issue I have is that the onLeave fires every time the scrollTrigger is done (In case user scrolls up and then scrolls down) and what I need is to fire this additional function only once, the first time scrollTrigger animation is done. 
Is there a way of doing it once?

          onLeave: () => this.functionName(),

[Create transition - from smaller image to fullscreen on new page]

On 3/5/2019 at 2:37 AM, smallio said:

We must be both working on a very similar site judging from your last post & now this one haha. Anyway, It's a complex topic often using barba.js & other libraries to do AJAX transitions for fluidity. I'm working on a project tiles to project page transition for a personal project using barba & gsap. I'm happy to inbox you that when I'm done & see what you can extract from it.  

 

That being said... I've learned a lot from the following sources:

 

To start you off getBoundingClientRect is your friend & helps if you want to do something like this (half page transition)

 

This next example is probably what you need (not using gsap though). You can easily convert over & use timelines etc with it.

 

Here is one using Vue & GSAP together 

 

Here is React & GSAP

 

And finally, this one is mostly css but I've included it anyway incase you want to learn from it.

 

Hope that all helps!

Did you manage to recreate something like this and can you share a link so we can check it out

[How to call new TimelineMax when first one is done?]

Hii, good morning! So, I am making this hold to play button, It is animating the button when holding and it is supposed to trigger new animation when its over. Can someone just tell me how do I trigger next timelineMax on complete

See the Pen exzmMp by lukagurovic (@lukagurovic) on CodePen

I tried to make them pen as short as possible

[Cannot create property '_gsTweenID' on number '570']

Thank you very much for your help. Not only quick and accurate response but also practically shown. GSAP is my new favourite!!! Have a great day and thank you a lot!

[Cannot create property '_gsTweenID' on number '570']

Hi, so I am trying to rebuild this canvas peace which has Gsap powered animation in it. https://codepen.io/fcordillot/pen/xRdEPx 

I tried to build my own code for this as you can see here 

 

But when I add TweenMax code to the if statement on the line "105"  I start getting errors. Can someone help?

You can see the TweenMax code commented above the if statement 

See the Pen WLWbKQ by lukagurovic (@lukagurovic) on CodePen

See the Pen xRdEPx by fcordillot (@fcordillot) on CodePen

See the Pen WLWbKQ by lukagurovic (@lukagurovic) on CodePen