Transitioning a repeating animation into a scrubbed animation

[Bharateshwar]

I'm trying to transition a repeating tween to scroll controlled one. 

I was able to achieve what I want here but I have a few concerns:

1. The code I've written only works coz it's a circular path and I'm faking the transition by rotating the circle svg. This effect won't work perfectly if I change the shape to a square.

2. I don't like how I have to pause/play the initialAnimation, create/kill the scrolltriggers on onEnter and onLeaveback callbacks.



Questions:
1. Is there a better and legit way to do this, such that the effect can be achieved on any kind of path? 
2. If not, is the way I do pause/play of the initialAnimation, and how I create/kill the additional scrolltriggers a good way to do it?
3. Given the code I've written, how would one handle the window resize to align the blocks to the path again? is it by killing and triggering everything again?


Thanks in advance!

 

See the Pen eYaRZGm by bharateshwar (@bharateshwar) on CodePen

[Rodrigo]

Hi,

 

That is not the easiest thing to achieve TBH, but maybe the posts and demos Jack created in this thread can provide some inspiration:

 

Hopefully this helps.

Happy Tweening!

[Bharateshwar]

Thanks for the above. I think its kinda same as what I'm doing, i.e updating the progress/position of something. (Can't really say I understand that code).
I'm fine with that I guess. 

Now, 
I'm trying to avoid 2 scrolltriggers for my animation. (as in the first code pen)

Previously, I was creating a second scrollTrigger onEnter of the first ScrollTrigger, and that was working fine as I think the new rolling motion path animation was being calculated AFTER I was rotating my svg. 

But now, as I've removed the second scrolltrigger, I'm assuming the motion path for the scrub linked rolling animation is calculated before rotating and hence the jump on start of the scrubbed animation.

Question: 
Is there a way to tell the animation to do the calculations after the scroll trigger starts? Or creating a new scrolltrigger is the only way? 

See the Pen pompzJw?editors=1010 by bharateshwar (@bharateshwar) on CodePen

[Bharateshwar]

I'm concerned about creating/killing scrolltriggers the way I did in my first codepen. Not sure if that's a good way as scrollTriggers are supposed to do calculations beforehand for performance reasons. 

Also, would it be better to manually create and control the playhead of my scrubbed animation using onUpdate callback of the scrollTrigger? (I think that's possible to do?)

[Rodrigo]

Hi,

 

Again, this is not the simplest thing to achieve. TBH I can't think of a simple way to do this without spending quite some time. Unfortunately we don't have the time resources to provide general consulting and resolve complex logic issues.

 

The main issue is this, you have a running animation then scrolltrigger will take those elements and start animating them in the same way that the animation is working. By default ScrollTrigger will take the animation from progress: 0 to 1 for the scroll amount defined by the start/end points in the ScrollTrigger config. The problem arises to move the progress smoothly to one or somehow force the ScrollTrigger instance to start with the progress the animation has when the ScrollTrigger instance becomes active.

 

Maybe another way is to just forget about animating the same properties with ScrollTrigger and just find a way to update the time value of the looping animation using ScrollTrigger's onUpdate callback and pause the looping animation using the onEnter callback and resume the animation using the onLeaveBack callback. I came up with this option as I was writing this, but unfortunately I don't have time right now to create something a quick proof of concept. I'll see if I can create something in the upcoming days and in the meantime you can get a crack at it and see what you can come up with.

 

Happy Tweening!

[Bharateshwar]

hey, I think I can manage without a POC or logic solutions, no worries there, thanks. 

Rest, I think we're both saying the same thing in terms of solution, I just need a bit guidance for the below.
Sorry If I seem to ask the same questions again n again, but I don't think I understand if you've tried to answer these doubts. 
 

18 hours ago, Rodrigo said:

somehow force the ScrollTrigger instance to start with the progress the animation has when the ScrollTrigger instance becomes active.

1. Is there a way to do the above for a scroll trigger?

2. I have what I want, but I'm doing it by initializing a SECOND scrolltrigger onEnter of the first one. (Which takes care of forcing the NEW scroll trigger's animation progress). So, is this a bad thing to do (i.e creating and killing a second scrollTrigger on onEnter and onLeaveBack of the first one) ? In terms of performance, etc?

3. I was also thinking about the approach where I control the initial animation manually using onUpdate of the scrollTrigger, but is this approach better or the one with two scrolltriggers? 

[GreenSock]

Are you trying to do this?: 

See the Pen bGyaWZr?editors=0010 by GreenSock (@GreenSock) on CodePen

[Bharateshwar]

hi,
Thanks for the above but I wasn't looking for the actual implementation. 
As I've mentioned before, I already had the solution you gave in mind; I just have questions that I need answers to. 
The website I'm making is going to be really animations heavy, so I'm just concerned about the performance impact of the different approaches and possible solutions there are for this animation requirement.

Question 1

Quote

Is there a way to do the above for a scroll trigger?

I understand how your solution might seem to be the answer to the above question, but that was not what I was asking. The solution is using an onUpdate callback to control an animation which is separate from the scrollTrigger. What I meant to ask was if there is a way to offset the ScrollTrigger linked animation, i.e. the animation supplied to scrollTrigger itself. 

To recap my other questions that I've asked in detail earlier, here's a shorter version.

Question 2
creating and killing a second scrollTrigger on onEnter and onLeaveBack of the first one: is this a bad thing to do ? In terms of performance, etc?

Question 3
of the two solutions (i.e 1. creating a second scrollTrigger, and 2. adjusting initial animation on onUpdate of the first scrollTrigger itself), which one is more performant?  
 

[GreenSock]

16 hours ago, Bharateshwar said:

What I meant to ask was if there is a way to offset the ScrollTrigger linked animation, i.e. the animation supplied to scrollTrigger itself. 

To "offset" the animation? Not sure I understand what you mean, but you can animate one animation with another animation. So for example, you could pause() your main animation, and then create a tween of that animation's playhead such that it animates it from a time that's offset (not zero). And you could attach that tween to the ScrollTrigger.

 

let animation = gsap.timeline();
animation.to(...).to(...);
animation.pause();

let tween = gsap.fromTo(animation, {
  time: 0.5
}, {
  time: animation.duration(), 
  duration: animation.duration() - 0.5, 
  ease: "none",
  scrollTrigger: {
    ...
  }
});

 

16 hours ago, Bharateshwar said:

creating and killing a second scrollTrigger on onEnter and onLeaveBack of the first one: is this a bad thing to do ? In terms of performance, etc?

I'm not sure how exactly you'd qualify something as "bad", but it's not ideal performance-wise. I personally try to avoid creating anything new during scroll just because scrolling is so performance-sensitive. It's usually smarter to pre-create things so that they're ready to rock-n-roll at a moment's notice during scroll. I don't think I've ever seen a situation that called for creating a ScrollTrigger inside of an onEnter/onLeaveBack. That kinda sounds like an engineering problem potentially. But hey, in the real world (not theoretical), the way you create your ScrollTrigger in an onEnter may be total fine and not cause any noticeable issues whatsoever. I'd suggest running tests. 

 

16 hours ago, Bharateshwar said:

of the two solutions (i.e 1. creating a second scrollTrigger, and 2. adjusting initial animation on onUpdate of the first scrollTrigger itself), which one is more performant?  

Probably #2. 

[Bharateshwar]

Perfect! These were the answers I was looking for. Thanks @GreenSock