Jump to content
Search Community

Multiple scroll trigger with scrub

Louienator test
Moderator Tag

Recommended Posts

Hi, good day. I'm just wondering why my code didn't work. is there something i lack or wrongly implemented? thanks

Here's my fiddle:
https://jsfiddle.net/louiemiguelveloso/de7txkfg/106/

I want the animation to start from the start as soon as i enter the next screen..

 

it's like when you enter a specific screen and while scrolling foot steps will appear like walking.

Link to comment
Share on other sites

I noticed a few things: 

  1. You used the same selector for "footPrint" and footPrintTwo" (".box"). I assume you meant to use ".box2" for footPrintTwo?
  2. You have a typo: start: 'botttom bottom'
  3. You're creating a whole timeline for each and then adding only one tween which is totally fine but you could simplify it to using just the tween (and no timeline). 
  4. autoAlpha: true is not a valid value. I assume you meant autoAlpha: 0
  5. Are you trying to pin each section while those animations occur? If so, here's a demo that I think simplifies things quite a bit and [maybe?] delivers what you were looking for: 

See the Pen mdjgMxp by GreenSock (@GreenSock) on CodePen

 

Does that help? 

Link to comment
Share on other sites

Hi Jack,

 

Yes.. this is what i meant.. Been confused with the 'start' and 'end' setting.. Now i know, that you can add multiple class in querySelectorAll method.. thank you so much for this and simplified my code.. thanks a lot!

And by the way, do you have a link for a documentation or explanation with regards to this code "gsap.utils.toArray"

Link to comment
Share on other sites

Can you be VERY specific about what exactly you expect? It's working precisely as it should according to your code, so I'm not sure what you want to be different. 

 

The last part doesn't show the animation because you've got the "start" set to "top top", meaning when that last section's top hits the top of the viewport, that's when it would begin the scrubbing animation...but it's impossible to scroll PAST where the top of the last section hits the top of the viewport, so you'll never see that animation scrub. 

 

This is all just logic stuff in how you're setting it up. I'm just not sure what you want, so I'm having a hard time advising you. 

Link to comment
Share on other sites

I'm still not sure what you expect, but here's a quick fork with a guess: 

See the Pen jOpRYGX by GreenSock (@GreenSock) on CodePen

 

I had to adjust the start/end for the very first one and the very last one so that the first one starts later than normal to correspond to the 0 position, and the last one ends early so that when the scrolling stops, it's complete. 

Link to comment
Share on other sites

hi Jack, apologies for the late response. Try to see the footprint while scrolling.. i want that everytime  you scroll, footprints will show.. but my problem is that, after i've added the trigger class in the footer, the spaces on sections increased. here's the video..

i've used this fiddle:

https://jsfiddle.net/louiemiguelveloso/de7txkfg/172/

https://www.loom.com/share/f2f5d36925f642d5867a841c31650f4f

Link to comment
Share on other sites

4 hours ago, Louienator said:

after i've added the trigger class in the footer, the spaces on sections increased.

You added margin-bottom, that's why they're spaced out more. It has nothing to do with ScrollTrigger. You can eliminate ScrollTrigger completely and your spacing remains the same. 

 

4 hours ago, Louienator said:

Try to see the footprint while scrolling.. i want that everytime  you scroll, footprints will show..

Sorry, I'm still completely lost. I watched your video and I see the footprints happening on scroll. I have no idea what you think is broken or what you want to work differently. The demos I provided show the footprints happening on scroll - what's wrong? I think I've provided a lot of options for you already, so hopefully you can tweak the values to get whatever effect you want. Good luck. 

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...