MotionPath + Scroll Trigger

[dzestis94]

Hi, 

 

Can anyone explain how I could move element by custom path coordinates (ScrollTrigger Included) along all the sections of the page until it reaches footer. 

 

I can't figure out how to achieve this...

 

 

For any help or ideas I would be appreciated! 

See the Pen gOzqELe by dzestis94 (@dzestis94) on CodePen

[alig01]

Hey, 

 

there's a YouTube video that shows what you're probably trying to accomplish.
You should definitely watch it Scroll-Driven SVG Path

[dzestis94]

For some reason my element stops  when it reaches second section....

[akapowl]

 

Hey there @dzestis94

 

59 minutes ago, dzestis94 said:

For some reason my element stops  when it reaches second section....

 

Your element has position: absolute so if you tween it down 100vh like you did, it will tween into your second section. It would need to be position: fixed for it to behave like what you probably expected as the outcome with the values you set for the path.

 

Also, since you have set the end of all your ScrollTriggers to an absolute value of 100 via defaults, it would only scrub over the distance of 100px (from scroll-position 0 to 100) and that's probably not what you want either.

 

I'm not sure if this is what you had in mind, but here's an example for how you could go about it. I kept the position of the element absolute, but changed the values of the path and the end of the ScrollTrigger instead, to match that absolute position of the element.

 

See the Pen qBYgzwP by akapowl (@akapowl) on CodePen

 

[dzestis94]

Okay, thank you for this example, but by any chance is it possible to set 'end' height which depends of how many sections are on the page? Because I would like to use the same animation on separate pages. And some pages has 10 section and some only 3. So it adds extra blank space below foote... 

[GreenSock]

You can make it as dynamic as you want. Here's a demo where I slap a data-x attribute into each section and it handles everything automatically: 

See the Pen OJZqXXv?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Add as many sections as you want. 

 

Good luck!

[dzestis94]

@GreenSock Thank you for this example! This is almost what I want to achieve!  One thing, I won't use data-attributes, because I have created dinamically sections with ACF on Wordpress. 

And here is updated my pen 

See the Pen gOzELQm by dzestis94 (@dzestis94) on CodePen

 with timeline animation which should play only on first section. How I could stop that animation when I reach second section, and  start ScrollTrigger from that point where animation stopped, but in the same way have the same path? 
 

[GreenSock]

I'm not sure I understand your goal correctly, but here's a quick idea: 

See the Pen oNdVBYY?editors=1010 by GreenSock (@GreenSock) on CodePen

 

You can use a ScrollTrigger with a callback to do whatever you want to that animation (pause, resume, etc.)

[dzestis94]

Let me clarify. So let say I have timeline animation where my element moves from side to side by custom path. But that animation runs only on first section.  When I reach second section,  animation stops and my element starts trigger by scroll from that point where animation stopped on first section. But motion path which starts from second section will be the same all the time. I hope it make sense now :)

[GreenSock]

Sorry, I'm pretty lost. It sounds like a logical impossibility if you want the first animation to run and then the element picks up from wherever that happens to be at scroll-time...AND you want it to always be exactly the same. It can't be dynamic (wherever it is when the user starts scrolling) AND ALSO exactly the same every time. 🤷‍♂️

[dzestis94]

Sorry if I couldn't explain it properly. 

So at the end I decided to have an element which appears from section no.2 and then moves along all the rest of sections through the page on ScrollTrigger by motion path. Ideally opacity 0 would be set at the start and then in a middle of section 2 it changes to 0.5. Is it achievable? 

And is there any chance to refuse data atrribute for x property? 

[Rodrigo]

Hi,

10 hours ago, dzestis94 said:

So at the end I decided to have an element which appears from section no.2 and then moves along all the rest of sections through the page on ScrollTrigger by motion path. Ideally opacity 0 would be set at the start and then in a middle of section 2 it changes to 0.5. Is it achievable? 

Can you provide a minimal demo of this approach? 

 

10 hours ago, dzestis94 said:

And is there any chance to refuse data atrribute for x property? 

You can get your data from anywhere you want, but at the end if you want a dynamic sections amount, you'll also need a dynamic way to get the data for each specific section and most important a way to set that data so you can get it in JS and then pass it to GSAP.

 

I believe there are ways in Wordpress to do that, probaly shortcodes or something of the sorts, but my knowledge of Wordpress is very limited.

 

Happy Tweening!

[dzestis94]

Hey @Rodrigo! 
Thank you for your response. Yeah I can share my demo: 

See the Pen MWGxqdv by dzestis94 (@dzestis94) on CodePen

 

So I have a path which I created with MotionPath helper. Which starts from second section.

I'm stuck now for a while and I can't find a way how to track the ball in the center of the screen. Because now on some sections it moves too fast and it disappears from viewport.  Ideally I would like to stop the ball before footer, that means always on last section.

Also it's not responsive either. On my big screen it's fine, but on my iMac mini pro, the ball leaves the path.... 

 

[Rodrigo]

Hi,

 

I think this was addressed by @Cassie in this thread right?

 

Please let us know, since these two threads seem to be related.

 

Happy Tweening!