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

[utopian 12 Likes (Newbie)]

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.

 

 

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

[Cassie 5,660 Likes (Superhero)]

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.

[GreenSock 18,896 Likes (Superhero)]

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.

[utopian 12 Likes (Newbie)]

Hi there! Thanks for the advice on making a more minimal demo, here it is: 

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

. Thanks Jack for the message, I will review that and test it out tomorrow morning. Europe time here.  Have a great day guys and thanks for the amazing support!

[Cassie 5,660 Likes (Superhero)]

That's a little closer thanks!

Jack was right, you're not actually using the progress anywhere.

Here's a super stripped back version.

See the Pen JjLRyLy?editors=1011 by GreenSock (@GreenSock) on CodePen

[utopian 12 Likes (Newbie)]

Hi Cassie, thank you so much! This looks pretty perfect, I will try adjusting my code based on yours tomorrow. Thanks so much for the help!!

[Cassie 5,660 Likes (Superhero)]

Pleasure! It's hard to see the forest for the trees when you've got a lot going on, pop back if you get stuck. I'd recommend adding bits in super gradually. Get it working one bit at a time.

 

Good luck!