effect of viewport tracking element that moves along motionPath

[D.Cus]

I have created a pen so a ball follows a motion path and removes the line as the ball tracks the path, however the next step is to give the impression that the viewport sticks with the ball at the same point on the screen by either applying translate x and y to either the container or svg.

 

This is proving rather hard to understand the logic behind this and also to achieve on my pen. I have seen a pen which does a similar thing but I really can't understand the logic behind this. 

 

See the Pen poNjygv?editors=1111 by darren-ignition (@darren-ignition) on CodePen.

 

 

See the Pen zYrPrgd by creativeocean (@creativeocean) on CodePen.

[elegantseagulls]

Hi @D.Cus,

 

What they're doing for logic is using GSAP's quickSetter tool (more info on that here: https://greensock.com/docs/v3/GSAP/gsap.quickSetter()) to track the position of the 'ball' on its motionPath (instead of mouseposition like in the quicksetter example) and apply that to the background element to center it to the ball's location on a slight delay. It's a pretty clever approach, really.

 

Another approach would be to fix your ball to the center of the viewport and just transform your background element along the motionPath (this element would contain your drawSVG element so that it moves in conjunction).

[mikel]

Hey @D.Cus,

 

The comments from @elegantseagulls are great.

 

Here another example:

If you want to fix a moving point, then let the field move in which the point moves - by exactly the px that the point moves.

 

See the Pen mdOergx by mikeK (@mikeK) on CodePen.

 

Happy tweening ...

Mikel

[ZachSaucier]

Another example of this sort of effect, using the same sort of approach as the bike one but using the onUpdate instead (which is probably better to use):

See the Pen LYYJNmQ?editors=0010 by osublake (@osublake) on CodePen.

[mikel]

Hey ZACH,

 

... looks better, is more readable.
Are there any other benefits?

 

See the Pen KKNdWZb?editors=0010 by mikeK (@mikeK) on CodePen.

 

Happy cleaning ...

Mikel

 

[D.Cus]

@mikel @ZachSaucier @elegantseagulls Thanks for the responses everything so far has been super helpful, I have done some another re hash taking influence from all comments:

See the Pen KKNdaLR?editors=1111 by darren-ignition (@darren-ignition) on CodePen.

Couple of questions why does my snap into position on first scroll, it doesn't really make the process very smooth?

Also how would I get the dot to stick at the end of the scrub I have tried a couple of onComplete options within the spark tween but it just fires on load?
And finally is this sort of thing very memory intense my fans seem to be kicking when I start playing with things within the pen?

[ZachSaucier]

1 hour ago, mikel said:

... looks better, is more readable.
Are there any other benefits?

The ticker runs every time that GSAP updates. The onUpdate runs every time the tween (or ScrollTrigger depending on what you apply it to) updates.

[mikel]

Hey @D.Cus,

 

"snap into position on first scroll": 

• position the SVG not the BODY
• position the circle in the SVG on the point: <circle class="spark" cx="71" cy="80" r="20"/>
• use e.g. start:'top 200px' so its not triggered in advance

See the Pen ZEBbXGG?editors=0010 by mikeK (@mikeK) on CodePen.

 

Happy tweening ...

Mikel

 

 

 

[ZachSaucier]

I think mikel addressed two of your points so I'll address the one he didn't answer:

1 hour ago, D.Cus said:

is this sort of thing very memory intense my fans seem to be kicking when I start playing with things within the pen?

Not particularly. All that's going on is some transforms and animating the stroke-dash properties of your SVG path. Those are all pretty performant.