Scroll based effect like this one?

[nickraps]

Hi, is there a way to build the highlight and pan-to effects like in this one: https://www.air.org/magnifying-teachers-successes

 

The graphic and highlight in this one happens purely in a single Canvas element. So it's hard to tell how the calculation is done to highlight the exact element. This one is made with https://shorthand.com/

 

Is it possible to achieve the same effects with GSAP (or with an additional library)? What's the general approach?

 

Thanks.

[Rodrigo]

Hi,

 

Absolutely is mostly about scaling and positioning more than anything, I'd use transforms for the whole thing in order to have better performance. I'd strongly recommend you to get started without ScrollTrigger and once you have an animation that actually works the way you intend you can add ScrollTrigger back to the mix.

 

Happy Tweening!