spearquit Posted March 16, 2021 Share Posted March 16, 2021 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 Link to comment Share on other sites More sharing options...
PointC Posted March 16, 2021 Share Posted March 16, 2021 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. 2 Link to comment Share on other sites More sharing options...
spearquit Posted March 17, 2021 Author Share Posted March 17, 2021 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? Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 17, 2021 Share Posted March 17, 2021 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). Link to comment Share on other sites More sharing options...
spearquit Posted March 17, 2021 Author Share Posted March 17, 2021 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 17, 2021 Share Posted March 17, 2021 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now