MotionPath in Front and Behind an Object

[Greg Stager]

Ok - I need a nudge down the right path on this one. (pun intended ?) From what I read so far - it seems as though I might need to create a mask that is the same size as my circle and try to animate it across the front of the box at the same time the circle passes behind it so that it gives the appearance of the circle passing in front of the box.

 

I want to have the effect of the circle "orbiting" the box such that it passes behind the box on one side and in front on the other side.

Right now it is really good at passing behind the box on both sides but I am trying to figure out how to get it to look like it is passing in front on the right side and staying behind on the left.

 

See the Pen BaozyJd by Arelwynn (@Arelwynn) on CodePen.

[Greg Stager]

Ugh - this totally went off when embedding it to the forum - for now - best viewed at 50% on this page or out at the codepen site.

[OSUblake]

I would put a copy of the green box behind the circle, and toggle the visibility of the front box when it goes above and below the box.

 

Well that's how you would need to do it in svg as there is no z-index.

[Greg Stager]

Good thinking - I just might be able to pull that off.

Seems easier than a mask, anyway.

[mikel]

Hey @Greg Stager,

 

Here is an example which could give some idea (still old syntax):

 

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

 

Happy tweening ...

Mikel

[Greg Stager]

OK - I got the sample I was playing with to work the way I was visioning.

Now to use the real images and see if it will behave the same way.

@mikel I like that example and you make a good point about old syntax. Thank you for putting that in your post.

 

I think I am too new to gsap that I do not always recognize what is new and what is old, or how old it is. I search forums or watch videos and sometimes get stuck trying things that will never work for me due to the mismatch of versions. I try to look at the age of the post as a guideline but in a case like this - it is a new post and so someone else who is learning this like me would be looking at this not necessarily know that it was old.

 

[Greg Stager]

OK - so how do I fix the broken codepen positioning?

I have tried positioning with percentages, straight up pixels, and using gsap.set for scaling to 50% since that seems the best view when you set that in the embedded codepen above.

It only seems to work closest to my actual codepen when dropping from 1x to 0.5x

 

Edit: I am going to take a guess at my own question.

It might have something to do with the viewbox parameters. I admit I don't fully understand them. I used the numbers I did because they were the ones that allowed me to view the objects on my screen without being wildly huge or only showing a piece of it. I derived them by simply changing the values and watching how things moved on screen and nudged things where I wanted them but it is still a bit confusing to me.

[PointC]

If you want to create this effect with a mask or clipPath, you just need a duplicate target. Maybe something like this.

 

See the Pen yLYJbjL by PointC (@PointC) on CodePen.

 

Hopefully that helps. Happy tweening.

 

[Shrug ¯\_(ツ)_/¯]

On 4/18/2020 at 11:16 AM, Greg Stager said:

I think I am too new to gsap that I do not always recognize what is new and what is old, or how old it is. I search forums or watch videos and sometimes get stuck trying things that will never work for me due to the mismatch of versions. I try to look at the age of the post as a guideline but in a case like this - it is a new post and so someone else who is learning this like me would be looking at this not necessarily know that it was old.

 

Ha, I was looking at a CodePen earlier today that was using the older TweenMax syntax, but using the newer duration and it caused slight brain fog. The best bet is to stick purely with trusted learning sources that are up to date and use GSAP 3. Otherwise it can get confusing really fast with old syntax or even worse mixed old and new syntax, which can really start to make your head spin. You can see a nice clean overview of the version (v2 vs v3) differences in the GSAP 3 Migration Guide.

 

GreenSock :

• https://greensock.com/get-started/
• https://greensock.com/learning/
• https://greensock.com/docs/
• https://codepen.io/collection/ANaOod
• https://www.youtube.com/user/GreenSockLearning/videos

 

SnorklTV by @Carl :

• https://www.youtube.com/user/snorklTV/videos
• https://www.youtube.com/playlist?list=PLSkIx8U0TMvi4lb_gC9yYaFEoSxPyi5V6
• https://www.creativecodingclub.com/bundles/creative-coding-club

• https://codepen.io/snorkltv

 

Otherwise it can become quite challenge wading through everything thats out there - gsap. for the win! ?