Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Greg Stager

MotionPath in Front and Behind an Object

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 4
Link to comment
Share on other sites

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

Seems easier than a mask, anyway.

Link to comment
Share on other sites

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

  • Like 4
Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

:)

 

  • Like 4
Link to comment
Share on other sites

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! 😉

  • Like 4
Link to comment
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.

×