Jump to content
Search Community

resize motion path with window size

mylismyli test
Moderator Tag

Recommended Posts

Hello everyone 🙂
I am quiet new to greensock. Currently I am using ScrollTrigger and the MotionPathPlugin. 

 

Here is what I have: https://kwizda.gugler.at/

the tractor is moving on the path perfectly, but as you may see the path isn't moving in the free space given instead its overlapping with the content. On my screen it works perfectly fine, but by changing to another screen it's wrong. 

 

Do you have any idea how I could change the path related to the content? 

 

Here is my code: 

  gsap.registerPlugin(MotionPathPlugin, ScrollTrigger);
 
  gsap.set("#motionSVG", { scale: 0.8, autoAlpha: 1 });
  gsap.set("#tractor", {transformOrigin: "50% 50%"});
 
  gsap.to("#motionSVG", {
      scrollTrigger: {
          trigger: "#motionPath",
          start: "top 35%",
          end: "bottom 35%",
          scrub: 1,
          onUpdate: self => {
              gsap.to("#tractor", { rotation: () => self.direction === 1 ? 0 : -180, overwrite: 'auto', duration: 0.1,});
          }
      },
      duration: 10,
      ease: "none",
      immediateRender: true,
      motionPath: {
          path: "#motionPath",
          align: "#motionPath",
          alignOrigin: [0.5, 0.5],
          autoRotate: 90,
      }
  });
Link to comment
Share on other sites

Its not working on changing viewport sizes or different resolutions maybe? 

I am working with a mac laptop and an external screen. On the external screen the path is located perfect, but on the laptop screen (i think it has a different resolution) the path is going through the content. 

 

Should I provide screenshots?

Link to comment
Share on other sites

Hey @mylismyli,

 

htlm objects and svg objects flexible, responsive to coordinate is not so easy.
Theoretically, a simple solution would be to build everything - content and path - in a single SVG:

proportions to each other would always be the same and everything responsive based on the viewBox.

 

See the Pen OJMGqEK by mikeK (@mikeK) on CodePen

 

Or you define static data for content (html objects) as well as for the path (svg)

and then you can create several mediaQueries with adapted data depending on the window size.

 

Happy tweening ...

Mikel

  • Like 3
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...