Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
D.Cus

effect of viewport tracking element that moves along motionPath

Recommended Posts

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

Link to post
Share on other sites

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).

  • Like 4
Link to post
Share on other sites

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

  • Like 4
Link to post
Share on other sites

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

  • Like 2
Link to post
Share on other sites

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

 

Link to post
Share on other sites

@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?

Link to post
Share on other sites
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.

  • Like 1
Link to post
Share on other sites

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

 

 

 

  • Like 3
Link to post
Share on other sites

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. 

  • Like 2
Link to post
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.

×