Jump to content
Search Community

TextPlugin - reverse not working

Vivodionisio test
Moderator Tag

Recommended Posts

Your second forEach loop is also adding a mouseenter, but I think you meant to use mouseleave. Just making that change won't work though because you're creating a new timeline on each enter/leave event. You'd probably want to create the timelines and listeners in one loop and then play/reverse on enter/leave. Something like this.

 

See the Pen 1a5ddca48c06989a4f5bb5b33f1f8ddf by PointC (@PointC) on CodePen

 

Happy tweening.

:)

 

PS I also switched your variable declaration to use the GSAP utils.toArray method rather than the spread operator and a nodelist. Not that what you did was wrong. I just didn't know if you knew about the utility method.

  • Like 3
Link to comment
Share on other sites

Thats a very nice solution, and exactly what I was going for, and I had forgotten about the utils method so I appreciate the reminder! Thanks @PointC!

 

Unfortunately I realise my problem is actually a little more complex so I've made a new pen (flowing on from yours) to include an initial animation for the buttons along a motion path. Now the reverse animation is behaving more like a repeat... I don't suppose you can see what's causing that?

 

See the Pen zYRRgBL?editors=1111 by saulnewbury (@saulnewbury) on CodePen

Edited by Vivodionisio
I forgot a link to the pen. It's now included.
Link to comment
Share on other sites

5 hours ago, Vivodionisio said:

Now the reverse animation is behaving more like a repeat... I don't suppose you can see what's causing that?

Yep - looks like you've gone back to the original way of creating a new timeline on each mouseenter event. You'll want to create one timeline for each button and play/reverse on enter/leave.

 

See the Pen 97b85ae7f0116ee69975b94071d17e76 by PointC (@PointC) on CodePen

 

I think you were trying to create the buttons like that again because your bounding client rect values were off as the motionPath animation hadn't completed yet. That's why I moved your button creation into a function and called it when the motion path animations are done. Jut my two cents, but you probably wouldn't really need to use the boundingClientRect() if you just wrapped each button and paragraph into a little div, grid or flex wrapper of some sort.

 

Happy tweening.

 

  • Like 2
Link to comment
Share on other sites

Hi @PointC

 

Yes, exactly! Thats what I was trying to remedy.

 

I think you this is the one! I used buttons for the minimal demo, but for the real thing I’m using icons as part of a larger SVG which also includes the path for the motion tween. I’ve done it this way to preserve the relative positions of the elements for responsive purposes. 

 

image.png.35eeba3b9e41b859164f5f6621b0552b.png

 

Can I ask how it is I’ve been creating new timelines on each mouse enter? And how your approach isn’t doing that? I thought I was just triggering the timeline.  

 

And also, when you called this.anim.reversed(!this.anim.reversed()) in your response to my initial query, I was a bit confused as to how the timeline was being triggered as it seemed to me this would merely change the reversed value to its opposite? I realise you’d assigned the function to btn.anim – did that line of code also call the function, and in turn run the animation code?

 

Thanks for all your help!

Link to comment
Share on other sites

First , I didn't realize this was the same project as stickman. I'd love to see this when it's all done. :)

 

Okay, the way you had it wired, you had these listeners:

btn.addEventListener("mouseenter", () => {doCoolStuff(btn, idx)});
btn.addEventListener("mouseleave", () => {doCoolStuff(btn, idx)});

Inside that doCoolStuff() function you call the typeText() function.

btn.anim = typeText(p, rect);

Inside that function a timeline is created and returned. This is happening on every mouse enter/leave event. That's why the text wasn't working correctly. A bunch of timelines are now competing to control the same element.

 

The big difference with mine is we loop through the buttons one time only to create the timelines. The mouse enter/leave events then play/reverse that timeline. The mouse events do not call the timeline creation function at all. That's all done ahead of time. 

 

Make sense?

  • Like 2
Link to comment
Share on other sites

Hi @PointC

 

Aha! Yes, thanks for the explanation. That's making sense, I can see how I'm making timelines with each mouse event so that enter and leave events don't correspond, hence the 'repeat' behaviour, and how you've avoided this, calling the timeline creation function just once for each button, and storing the value ahead of time. Nice!

 

I believe I’ve been using the motionPathPlugin for animating the buttons (icons) into position. Did you mean I could be putting it to further use?

 

It is indeed the stickman project, which is part of the portfolio website I'm building. I only have a couple of pieces to showcase at the moment, but hoping it'll help me land my first employed position as a developer 🤞

 

I'd be thrilled to show you once it's done : ) 

  • Like 2
Link to comment
Share on other sites

4 hours ago, Vivodionisio said:

I believe I’ve been using the motionPathPlugin for animating the buttons (icons) into position. Did you mean I could be putting it to further use?

Nope - just making sure you were using it on the stickman project as I couldn't remember seeing it in that thread. What you have here with the buttons on the path is great. 

 

4 hours ago, Vivodionisio said:

I'd be thrilled to show you once it's done : ) 

Looking forward to it. :) 

  • Like 2
Link to comment
Share on other sites

  • 3 weeks later...

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