Jump to content
Search Community

Killing and rebuilding timeline doesn't recalculate motionpath - responsive issue

utopian test
Moderator Tag

Recommended Posts

Hi there!

 

My issue is that I'm trying to rebuild my motionpath for my timelines when resizing the browser. I've read already that the motionpath plugin isn't responsive and from other forum posts, I read that we are supposed to kill our timeline and then rebuild it in order to resize it, but it isn't working for me. I was hoping I could have some help on this since I've spent almost all day trying to make this work and it doesn't seem to. :-) You can see the screenshot below after resizing the browser. It's as if the dom doesn't update the size of the svg path on resize.

 

image.thumb.png.b6ce0bae451d4dff233004845a79574c.png

 

I know there's quite a bit of code in the codepen I shared. However the functions to look at are: "textScroller()" - which has two functions in it which handle the motionpath text scrolling/sliding - "setupSlide()" for each clickable layers and resizeCheck() which when changing the browser size rebuilds the timelines after killing them.

 

Line 53 - I convert the polyline to path.

Lines 55 to 91 - I setup the variables based on screen size for delays on each timeline.to functions.

Lines 96 to 105 - I run through all my slides/layers and run the setupSlide() to setup the timelines

 

The timeline call is at line 118.

 

Hopefully this is helpful and not too much of a mess! Thanks for your help!!

See the Pen MWVjmQO by julienkos (@julienkos) on CodePen

Link to comment
Share on other sites

Hi there! Thanks so much for the demo. This looks like a fun project.

 

There's definitely a lot going on here though. Would it be possible to strip this back a bit? Maybe just one path, one word, without any of the spacing and background switching code? You'll be much more likely to get a helpful answer if there's less code to look at.

Ideally just isolate out the bit that you're struggling with.

Link to comment
Share on other sites

Yeah, I don't have time right now to dig into all that code but this looked wrong to me: 

var progress = tl.progress(); //record the progress so that we can match it with the new tween (jump to the same spot)
tl.kill(); //rewind and kill the original tween.
...

You're recording the progress but then never using that anywhere to revert it. 

 

Also, .kill() does NOT rewind the animation! I assume you meant something more like: 

var progress = tl.progress(); //record the progress so that we can match it with the new tween (jump to the same spot)
tl.progress(0).kill(); //rewind and kill the original tween.
// ...rebuild...
tl = rebuild(...);
tl.progress(progress); // jump to the previous spot!

If you do still need help, Cassie offered some excellent advice about stripping things back as much as possible - that'll significantly increase your chances of getting a solid answer.

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