ImageSequenceHelper: Scrubbing... without scrubbing?

[Tony Geek]

Hi there,

I'm looking to implement some logic similar to of course, Apple. The section in particular I'm looking at is found here: https://www.apple.com/macbook-neo/#performance

Here's my issue. I'm trying to create animations that don't scrub inside of a timeline that does scrub. I've hacked together a demo using the AirPod demo, whereby a text element is set to fade in and out, but not have the opacity scrubbed - it just fades in once it hits a scroll point (i.e. 50%), and then out again after a scroll point. But I can't seem to make a way for the progress of this non-scrubbing animation to link with the scrubbing animation of the ImageSequenceHelper. I thought that it might be easier if I adapted the imageSequenceHelper to return a timeline rather than a tween, but that hasn't seem to have helped.

I'm guessing it's just the way that I'm juggling timelines. In my actual scenario I've got a few more timelines for different parts of the sequence, but I can only ever get them to play before or after the imageSequence - not during it. If I try and attach the animations to the imageSequence timeline itself, they scrub - understandably. I'm just looking for a way to create non-scrubbing animations play alongside a scrubbing animation. Any help would be greatly appreciated.

See the Pen GgjrjyB?editors=1010 by tonycre8-the-bold (@tonycre8-the-bold) on CodePen.

[mvaneijgen]

You just have to adjust your start trigger to be in the center of the other ScrollTriggers center, so getting its end and dividing that by 2 will get you the half (if you have a real project where that animation start lower down the page, you have to do some more math), but you just create a separate ScrollTrigger which is independent of the other one and just do something when at X pixels on the page. Hope it helps and happy tweening! 

 

See the Pen MYjJJgV?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[Tony Geek]

Thanks for that bit of code - it's definitely aided in my approach. However I still haven't been able to solve my local problem frustratingly. When following your logic in positioning, I'm hitting roadblocks where the start position doesn't actually line up. It probably something to do with the fact I'm pinning multiple timelines in the same spot and so the start position seems to be getting impossible to trace. And even if it is traced, it's not adhered to well by other timelines. Either way, I'll mark the solution as it's helpful to others and does solve the problem I proposed via my codepen.