DrawSVG Reveal Image On Scroll

[spearquit]

Hi all,

 

First off - i'm so sorry. I've got the Business Green membership because the dev that I partner with loves GSAP. However, he's been taken sick suddenly and i need to pick up some front end requirements. I'm just a graphic designer with a little front end awareness so if i'm asking real noob stuff, feel free to tell me to go away.

 

We're trying to reveal a number of images on scroll, using drawSVG as a mask. An example of what i'm trying to achieve is here: https://groupeafn.com/en/, where the path reveals the image. I've kinda guessed that we'll need a mix of drawSVG, scrolltrigger and interaction observers.

 

I can see how we can use DrawSVG to to reveal an image here: 

 

And I can see that interaction observer w/ scrolltrigger has been used here to trigger on drawSVG scroll: 

See the Pen aLxJbZ by PointC (@PointC) on CodePen

 

Am I barking up the wrong tree trying to combine the two? What's the best approach to achieve this?

 

Many thanks,

 

Rich

 

 

 

 

 

 

See the Pen PdOeaN by PointC (@PointC) on CodePen

[PointC]

Hi @spearquit 

 

Welcome to the forum.

 

Looks like you found one of my old Intersection Observer demos from a few years ago. No need for that any longer. All you'll need is GSAP, DrawSVG and the ScrollTrigger plugin. 

 

Lots of demos to get you started here.

https://greensock.com/st-demos/

 

It should be fairly straightforward to trigger the mask reveal on scroll, but feel free to post a demo if you get stuck.

 

Happy tweening and welcome aboard.

 

[spearquit]

Ah so I did @PointC! I keep stumbling across your work on here, it's really useful.

 

I've created a simple codepen where each brushstroke reveals itself on scroll. I can play with these basics until I'm happy: 

See the Pen NWbVGJM by spearquit (@spearquit) on CodePen

 

But as there's gonna be quite a lot of them across, I'm not sure what the most elegant way is to loop them? 

[ZachSaucier]

31 minutes ago, spearquit said:

I'm not sure what the most elegant way is to loop them?

Use a loop  I talk more about that in my article about animating efficiently (I recommend reading the whole thing).

[spearquit]

Hi @ZachSaucier,

 

Thanks so much for that article, it really helped. I've looped it and it's much cleaner.

 

How should I go about adjusting individual animations? eg let's say I wanted to change the duration of the second brush. I'll add an additional class to that element and then overwrite it? What's the cleanest way to do that?

 

See the Pen NWbVGJM by spearquit (@spearquit) on CodePen

[ZachSaucier]

2 hours ago, spearquit said:

let's say I wanted to change the duration of the second brush. I'll add an additional class to that element and then overwrite it? What's the cleanest way to do that?

There's a lot of ways to do that sort of thing. You could use data attributes and then refer to those in the loop. Or you could use classes to do something similar. Or keep a map of elements to vars in a JS object. Or some other ways. Most likely whatever comes intuitively to you is fine