mylismyli Posted July 27, 2020 Share Posted July 27, 2020 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 More sharing options...
ZachSaucier Posted July 27, 2020 Share Posted July 27, 2020 Hey Li. It seems to work for me.  In what circumstances is it not working? In a particular viewport size? In a particular browser? On a particular OS? Link to comment Share on other sites More sharing options...
mylismyli Posted July 27, 2020 Author Share Posted July 27, 2020 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 More sharing options...
mikel Posted July 27, 2020 Share Posted July 27, 2020 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 3 Link to comment Share on other sites More sharing options...
mylismyli Posted July 28, 2020 Author Share Posted July 28, 2020 Thank you very much! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now