Footprints effects on scroll

[stepmond]

Hello, i am new on Greensock community, i saw differents scroll effects but i would like reproduce this fantastic effect!

Her when you scroll down, footprints appear 

waldspielgruppe-duedingen -

 

 I saw a line rendering somewhere made in Gsap but it is not my wish

[Cassie]

Hello there mate!

 

This is a really fun animation - So my advice is always to make the animation first, then hook it up to scroll.

 

That footprint animation would be great as an SVG - do you have any illustration experience or someone who could help you create the graphic?
 

 

[stepmond]

thanks, no more experience than novice in css and Gsap, but for the footprint it's seem its easy to find on Web

[Cassie]

Cool, when you have the graphic, pop back here with a minimal demo and we'll help you out.

[stepmond]

Sorry, i found a solution with elementor pro with minimal studing:I can make movment effects with fad in on scroll with manual editing the level with 1000 (it's make opacity brutally to 0 from 1). I keep my account greesock for futur projects more elaborated

 

[Cassie]

Ok sure thing!  It won't be hard with GSAP though, not much studying - something like this.
 

gsap.to('.footprints', {
  opacity: 1,
  stagger: 0.1,
  scrollTrigger: {
    start: 0,
    end: 'max',
    scrub: 1
  }
})

I just didn't want to jump ahead until you had a graphic to work with! Most of it is in setting up an SVG so it scales and has tidy paths to animate. ☺️

[stepmond]

Thanks, i will make a codepen demo, when i have some time, and come here for the link

[stepmond]

i don't know if i'm on the good way...

footprints appears too fast

See the Pen bGKJxNE by stepmond (@stepmond) on CodePen

[Reksa Andhika]

Trying to help, maybe this help, instead adding 1 by 1 class, you can just adding same class to each footprint.

See the Pen VwdNGLg by reksaandhika (@reksaandhika) on CodePen

[GreenSock]

Yep. Here's another option using ScrollTrigger.batch(): 

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

[stepmond]

Thanks, it's exactly what i want. Soon i will make a new demo codepen with non linear footprints : chrome developper mode will help for live position of footprints png

[stepmond]

Here my Codepen demo 

See the Pen bGKJxNE by stepmond (@stepmond) on CodePen

 

[Cassie]

Are you happy with this now? It looks good to me!

[stepmond]

Yes it's perfect; for footprints and more; thanks