Jump to content
Search Community

MotionPathPlugin and window resizes

Wrapped test
Moderator Tag

Recommended Posts

Hi everyone, first time poster here so please go easy on me.

 

I've been attempting to create a timeline for a project whereby an element will shrink in size, move to another element on the page and grow again tied to the page scroll event. Eventually it will need to move to a series of points on a page and follow the same series of animations for each point.

 

For this, I have attempted to utilise ScrollTrigger and MotionPathPlugin in order to handle the scroll events and element positions, the attached codepen URL shows the basis of the code that I am using for this purpose so far. I have had success in creating a timeline that does what I had envisioned between two elements so far; however, am having issues relating to window resize events.

 

Based on another post I read on the forum (don't have a link to it unfortunately), I attempted to kill the timeline and restart it passing the current progress in order to update the MotionPath values, but this doesn't seem to work.

 

Is anyone able to provide some insight as to why this is and perhaps point me in the right direction for solving this issue. Additionally, am I even going down the right path in order to achieve the result I desire? I predict I will run into issues when animating to a series of elements using the method I am so far. I thought about mapping a series of coordinates on the page based on the target elements and animating along that mapped path somehow.

 

Many thanks in advance.

 

*edit - updated pen to most recent code*

 

See the Pen Rwapvxv by MackinUK (@MackinUK) on CodePen

Link to comment
Share on other sites

Hey Wrapped and welcome to the GreenSock forums. Thanks for supporting GreenSock with a Club membership!

 

1 hour ago, Wrapped said:

first time poster here so please go easy on me.

We try to go easy on everyone, new or not :) 

 

What you're trying to do is actually quite complex. If at all possible, I highly recommend each start and end position in the same SVG. That way it has a consistent scale and distances and what you're trying to do becomes pretty trivial.

 

If that's not possible, it's a lot more complex.  Your start is a pretty good start.

 

In terms of resize and progress, you can't just use the same progress if the new progress should different.  Since you're using a scrub anyway just let the scrub figure out what percent it should be on resize.

 

Unfortunately we don't have the capacity to build it out for you but if you have specific questions we'll do our best to help :) 

  • Like 1
Link to comment
Share on other sites

Thanks for the reply,

 

I've decided to simplify the solution somewhat to make life easier but I'm still having issues with window resize events.

 

Is there some documentation that I may have missed relating to the values returned by MotionPathPlugin.getRelativePosition and how to have these values recalculated on window resize? I read somewhere that this isn't a feature by default due to the CPU overheads this would incur by having a constant listener for window resizes; however, is there some method I can use in order to make this responsive?

 

Many thanks.

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