GSAP with Vue. EnterBack not working properly with multiple scrollTriggers on timelines set up

[didkumi]

Hello,

Just started using the gsap library and really being amazed by the features.

However, I have a couple questions regarding set up and logic on my project.

 

First, as you can see in the demo, scrolling back up slowly animates everything correctly but scrolling back up quickly, the circles don't not fully tween and stays at old states. I've went through some other topics within the forum but could not exactly nail down the problem. I'm assuming it's to do with not having enough duration time but can't really seem to solve the issue. 

 

Also, the project is potentially going to grow in size and I was wondering if the set up I currently have is the right way to go... I plan to use d3 functions at some point as well.. 

 

Thanks in advance!

See the Pen LYxvrOp by 1jiky (@1jiky) on CodePen

[GreenSock]

I'm not totally sure what effect you're after, but keep in mind:

1. If you want to link the animation progress directly to the scrollbar so that it acts like a scrubber, use scrub: true (or a number for smooth scrubbing). 
2. The way you're doing it is with callbacks, but keep in mind that if the user scrolls very fast, those could fire in very quick succession (potentially on the same tick), so make sure you factor that into your logic. For example, you'd probably want to set overwrite: true or overwrite: "auto" to prevent conflicts where you're firing off multiple tweens attempting to control the same properties of the same objects. 

Are your callbacks being fired in the way/order you expected? 

 

As for your setup, there are tons of ways you could do it but in my brain this seems like a timeline that scrubs to me (or it should be) rather than callbacks that fire animations at a specific spot. But again, that's totally up to you regarding the effect you want. I'm just usually a fan of creating the animation(s) once and then just controlling them. Typically that's best for performance too. But if you want these dynamic so that they start using the property values wherever they're at currently (mid-tween), it's unavoidable. 

[OSUblake]

12 hours ago, didkumi said:

Also, the project is potentially going to grow in size and I was wondering if the set up I currently have is the right way to go...

 

I would say that you should always use refs instead of selector strings, otherwise you'll quickly run into conflicts with other components that have same ids/class names.

 

12 hours ago, didkumi said:

I plan to use d3 functions at some point as well.. 

 

Which ones? You might be surprised how much gsap can do.

https://greensock.com/docs/v3/GSAP/UtilityMethods

 

const posX = d3.scaleLinear()
        .domain([0, 100])
        .range([0, this.viewport.clientWidth]);

// same as this
const posX = gsap.utils.mapRange(0, 100, 0, this.viewport.clientWidth);

 

Or just using the plain DOM/SVG APIs.

d3.select(chart).attr(
      "viewBox",
      `0 0 ${chart.clientWidth} ${chart.clientHeight}`
    );

// same as this...
chart.setAttribute(`0 0 ${chart.clientWidth} ${chart.clientHeight}`);

 

[didkumi]

Hi, thank you for answering.

 

25 minutes ago, GreenSock said:

The way you're doing it is with callbacks, but keep in mind that if the user scrolls very fast, those could fire in very quick succession (potentially on the same tick), so make sure you factor that into your logic. For example, you'd probably want to set overwrite: true or overwrite: "auto" to prevent conflicts where you're firing off multiple tweens attempting to control the same properties of the same objects. 

As for the codepen example, the blue circle is supposed to become smaller in size with the red circle. The problem is half resolved, by adding a position mark ("<") to all the tweens after the first tween it forces all the elements to tween at once per scrollTrigger...

 

28 minutes ago, GreenSock said:

Are your callbacks being fired in the way/order you expected? 

But as you mentioned, the unsolved issue is that now I don't have the option to start the tweens at different positions or else it will start collapsing like above. 

 

31 minutes ago, GreenSock said:

As for your setup, there are tons of ways you could do it but in my brain this seems like a timeline that scrubs to me (or it should be) rather than callbacks that fire animations at a specific spot. But again, that's totally up to you regarding the effect you want. I'm just usually a fan of creating the animation(s) once and then just controlling them. Typically that's best for performance too. But if you want these dynamic so that they start using the property values wherever they're at currently (mid-tween), it's unavoidable. 

I don't think scrub could be an option for me as I cannot let the users see the in between states of the value based elements. My plan is to have text scrolling on the left (the A,B,C in the demo) scroll triggering the elements in a pinned SVG container. I hope I've explained myself better. So would an alternative from using callbacks you say is a scenario where I create separate timeline of tweens triggered by each text container..? So something like below..? 

 

const TL_1 = gsap.timelines({
	scrollTrigger: {
      trigger: "div1"
    }
});

const TL_2 = gsap.timelines({
	scrollTrigger: {
      trigger: "div2"
    }
});

TL_1.to().to().to()
TL_2.to().to().to()

Not quite sure how to tackle the structuring as you say while trying to avoid conflicts. I would really appreciate if you could give me some guidelines.

 

[didkumi]

33 minutes ago, OSUblake said:

I would say that you should always use refs instead of selector strings, otherwise you'll quickly run into conflicts with other components that have same ids/class names.

 

 

Well noted, thank you for the tip! Didn't know about the util functions.