Text Link to Initiate Animation

[cookiejar]

I am putting together reading comprehension stories for young learners. Attached is a CodePen for one of the quizzes to convey the general idea. The stories and quizzes will have static graphics and hyperlinks, of course. 

 

I want some text links to trigger GSAP animations, such as moving a pirate ship or fruit popping out of a cannon. I can’t figure out how to make a text link initiate an animation. Help is appreciated. (This is not scroll trigger; simply a hyperlink trigger.) 

See the Pen XWRGMjg by e35c (@e35c) on CodePen

[GreenSock]

Welcome to the forums, @cookiejar.

 

Here's the basic idea: 

See the Pen 8c99177f28870c47b1e65cbbaa21709f?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Of course you could create your animation instances (timelines or tweens) and initially set paused: true and then in your click event handler, just restart() or play() them or whatever. 

 

I hope that helps.

[cookiejar]

Thank you for your reply. I added your example to mine, but it doesn't animate. What am I missing?

[OSUblake]

33 minutes ago, cookiejar said:

Thank you for your reply. I added your example to mine, but it doesn't animate. What am I missing?

 

You have a bunch of code that is interfering with the links, like your setupLinks function. You also have some invalid HTML. That's why it's a funny color in the editor.

<ol class="custom-counter"   list-style-type="lower-alpha"";>

 

[cookiejar]

Thanks OSUblake. Cleaning up the HTML is easy; the functions, no so much. They’re needed for the hypertext, but seem to catch the click needed to trigger a GSAP animation. Again, thank you. 

[iDad5]

Hi, it seems you have cleaned up the HTML (at least I don't see any of the 'funny colors' OSUblake mentioned ).

 

As far as I can tell by a cursory  look at you JS, you can either use the current linkCallback function to do what you want, or ad an additional function outside the existing ones to handle that animation.

 

Which one you prefer may depend on various things, but as it seems to me the script isn't entirely your own doing, I probably would go with a function outside the existing code, that is called every time a link is called.

 

Let's say that function is called triggerAnimation 

 

To make it work, I would give the link that should trigger the animation a class or an id that relates to a certain animation.

 

at the end of the existing  linkCallback function I would call the triggerAnimation function with 'this' as parameter.

 

Inside the triggerAnimation I would look for the class or id and then start the animation as needed.

 

I don't know if that helps, but that could be one way to tackle it. Good luck!

 

PS.: As the basic functionality of links currently often show new content, it might be that you have to think about where you want to show the animation. Inside the old content or the new, and then you will have to adjust your logic accordingly.

Edited August 15, 2021 by iDad5
Post Scriptum

[cookiejar]

Much appreciated, iDad5. Thank you. 

 

I have been over-thinking the problem for my purposes and simply need to call a function with the GSAP animation. Works now.