Jump to content
Search Community

MotionPath in Front and Behind an Object

Greg Stager test
Moderator Tag

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

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

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.
×
×
  • Create New...