Jump to content
Search Community

ScrollTrigger MotionPath on a Fixed Element with -X translation

bhiler test
Moderator Tag

Recommended Posts

I have been working with scrollTrigger to achieve a project that needs to have a horizontal scroll concept. I have used the gsap (horizontal scroll sections) example to try this functionality and it works but moves quicker than needed and will quickly move past design elements. The issue I am running into is I need my motion path to translate off screen along the -x axis as the same value as the my scrollTop. I cant quiet get the functionality to work.

 

In the codepen I have the tractor following the motionpath svg and I am translating the line on the -x to try to compensate for the scroll. But I am loosing the tractor in the frame, it will start in frame and end but cannot see it throughout the animation. 

See the Pen Rwprpmr by ben-hiler (@ben-hiler) on CodePen

Link to comment
Share on other sites

  • 2 weeks later...

Been trying to get to solution based off the pens provided but running into two issued.

 

  1. The follow motion of the bee is going from the last point to the first point instead of following the svg line in order. Is causing me a issue when it comes to doing a DrawSVG on the line behind the bee.
    1. I can reverse the line to make the Bee travel the desired direction, but then the drawSVG will not work trailing the bee.
  2. I can get the svg line to scale to be the correct size but the path does not scale accordingly so my Bee does not track on the svg line. 

 

I was trying to search the forms and docs for a solution, but did not have luck doing a reverse() with the clamping. 

 

See the Pen YzZQEjd by ben-hiler (@ben-hiler) on CodePen

Link to comment
Share on other sites

1) You can make SVG lines draw in reverse by using negative values.

See the Pen 6c488770e1fafb9a05cf3d2a7e23b2e8 by cassie-codes (@cassie-codes) on CodePen


 

Could you put the bee in the SVG?
 

13 hours ago, bhiler said:

I can get the svg line to scale to be the correct size but the path does not scale accordingly so my Bee does not track on the svg line. 


Then you could just transform the SVG position on scroll like this.

See the Pen 2dae9b5123c33d36e5d2069bc7da17e2 by cassie-codes (@cassie-codes) on CodePen

  • Like 3
Link to comment
Share on other sites

My demo is only designed for a fixed size, so no relative units like vw. And I don't know what you mean by responsive. The bee will always be in the center unless it's near the edge of the world, which is by design. 

 

I'm using certain values for a reason, and they need to be adjusted for what ever you're doing.

 

Just setting the SVG to match the world/background size i.e. a fixed size.

gsap.set("#svg", { 
  width: 5000,
  height: 5000
});

 

My SVG has a viewBox of 1000 x 1000, so I scale the motion path coordinates by 5 so it will be 5000 x 5000 to fit the world.

matrix: { a: 5, b: 0, c: 0, d: 5, e: 0, f: 0 },

 

You probably shouldn't even have matrix in there. I just did that because I ripped that motion path from another demo, and didn't scale it up in Illustrator because I was experimenting with different world sizes based on a variable.

 

Just make your path and world/background the same size.

 

If you want everything to be responsive, like scaling up and down, then you can put the background/world inside the SVG, and let the SVG scale everything. The caveat to that is that moving around a huge background inside an SVG might be slow. Depends on how complicated the background is. Not a gsap issue. Just a SVG rendering issue.

 

  • Like 5
Link to comment
Share on other sites

  • 2 weeks later...

@OSUblake that all makes sense I am not sure if I was clear enough on the last post. But your response cleared up most of the issues I was having. 

 

I have a working prototype now that I am happy with, I am creating the path with code on load so it creates a appropriate path each load, but run into issues with window resizing. I added a line update when the window resizes but the animation does not update to the new size. I am assuming I need to use the "invalidateOnRefresh: true" in the correct way to solve this issues. 

 

I found some of other post about responsiveness inside the animations but still running into issues. 

 

See the Pen dyvqomN by ben-hiler (@ben-hiler) on CodePen

 

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