How to use ScrollTrigger with different behaviors for the same element?

[Pedro Rezende]

Hi everyone o/

 

I'm trying to animate a clip-path using CSS variables. The idea basic idea is: I need to move the clip-path circle to the center when the user scrolls, and then reveal the cat progressively. If the user is on top of the screen, they can interact with parts of the cat only.

 

So the idea of my implementation was: 

- When user scrolls down, disable the mouse move effect

- One timeline would handle the circle growth (and other elements in the future) with a scrub effect

- The second timeline is only responsible to nicely move the circle to the center of the screen when user scrolls

- Start growing while it moves towards the center is a desired effect

 

The problem of my current implementation below is the conflict between the two timelines, making a very weird effect when you scroll down and return to the top of the page. It also changes based on the initial mouse position.

 

So any help would be much appreciated!

 

All the best for you all

 

 

See the Pen WNLoMNJ by prznd (@prznd) on CodePen

[alig01]

Hey, just my 2 cents.

 

Wouldn't it be better to reveal the image from the position the mouse is currently at?

You're letting the user explore the image, and the area they're most interested in would be where their mouse is right now. So why not expand the clip-path from there? This would remove a lot of custom logic and simplify the implementation. And if you still don't like it, at least you would have a good working code base for further changes.

 

Start simple and increase complexity instead of juggling too many things.

 

My approach right now would be to:

1. Fork your current codepen so that your current progress is not lost.
2. Remove anything unnecessary. 
3. Keep the mouse movement logic.
4. Create a simple timeline with scrolltrigger that increases the radius.

 

Edit:

Also I wouldn't control the same element with two different timelines. Instead just use one. Look in the docs for how to position animations in a timeline. There is also a helpful interactive demo to visualize the parameters 

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

Also you retrieve the wrong properties from getBoundingClientRect() (doc),  sectionWidth -> width. My bad, I didn't look closely enough ^^

[Pedro Rezende]

Hey @alig01!

 

Thank you for the reply!

 

So the problem is that in the real world case, we're gonna have some content to be presented in the center of the section. So we don't need to position the clip-path in the center synchronously, but it should expand from the center. 

 

Also, I guess it's not possible to use one single timeline because the move animation should be set on scroll, but the main timeline (growing circle + other content) should use scrub. I don't know if it's possible to remove the scrub for only one piece of the timeline though (will check that). 

 

Re the getBoundingClientRect, doing something like const {width: sectionWidth} = getBoundingClientRect()} is a shorthand to extract the width prop to sectionWidth variable  . But thank you for the attention and pointing that out!

 

Best regards!

 

[alig01]

No problem always happy to help if I can.

 

Another option you could try, would be the following:

1. Use gsap.set() to center your x,y values so that the timeline doesn't start in the upper left corner (It's always important to get everything in position before you animate). 
2. Once your own scrolling threshold is reached, use xTo() and yTo() to move the clippath to the center. 
3. Control only the radius in your timeline, as you already do. 

This way the animation will be more smooth and feel more natural, at least for me.

It is worth mentioning that there is also the .invalidate() method, which clears any initialization data. 

 

Edit:

Something like this, I replaced the approach of step 2. with the onStart function of the timeline.

Since we only control the radius and no --x, --y values, there shouldn't be any conflicts (maybe my assumption is wrong).

See the Pen Jjwbwbw?editors=0010 by alig01 (@alig01) on CodePen

 

If you move your mouse and scroll at the same time, than the clip-path grows in place instead of moving towards the center.

Hope this helps and good luck with your project