Learning GSAP 3: 2 FAQs Using Timeline with 2 Scenes and Modal Popup from text link

[Yaya]

Hi there, It's been almost 1 year since I joined the Greensock Club and I gotta say...  it's been so FUN!

I learned enough to outsource and communicate with more experienced GSAPers for my client projects. I really need to get past the newbie phase so that I can personally code for quick turnarounds. I've reviewed several codepens, tuts and the Version 3 Cheat Sheet to generate my first attempt at the following concepts:

1) Creating links that make modals appear:
Click link to  FAQ Question and see modal of Answer. Then, close modal to return to Questions.

2) Nesting Timelines where each timeline is a Question/Answer set.

3) Avoid repeating code where it's not necessary
Example: Adding the following on both timelines:
gsap.set (".question", {text-decoraton:none, line-height: 1.5em, color: #158dd3});

----------
The ultimate goal is to code blocks (of any content) and hide/reveal/animate blocks when the user clicks on a link. Less scrolling down the page.  I'm not there yet.  Thank you in advance for taking the time to check out my code and offering me guidance.

See the Pen JjYBzgd by yayaCreates (@yayaCreates) on CodePen

[Shaun Gorneau]

Hi @Yaya!

 

Awesome that you are taking the steps to understand the work you're managing! That's a big step and one you're clearly capable of!

 

Based on your last sentence 

 

Quote

The ultimate goal is to code blocks (of any content) and hide/reveal/animate blocks when the user clicks on a link. Less scrolling down the page.  I'm not there yet.  Thank you in advance for taking the time to check out my code and offering me guidance.

 

You would simplify this greatly by using a few click events and simple timelines to do this without the need for GSAP to do a lot of CSS work. Have a look here,

 

See the Pen qBOMNPG by sgorneau (@sgorneau) on CodePen

 

Happy tweening!

 

Shaun

 

EDIT: Sorry Zach, I don't know how I jumped in front of you 🥺

[ZachSaucier]

10 hours ago, Yaya said:

It's been almost 1 year since I joined the Greensock Club and I gotta say...  it's been so FUN!

So glad to hear that!

 

First things first: Use the developer tools! They are invaluable when debugging what's going wrong. For example, in your CodePen if you open up the console (F12), you will see that there are errors. Most the ones it throws at the start are because you have values that should be strings but are not in quotation marks like 1.5em and #158dd3. JS doesn't know how to parse those unless you make them strings. The syntax highlighting in the code editor can also be helpful in seeing errors (if things aren't colored the way they should be).

 

Other errors that the dev tools can reveals (after fixing others):

• You used a semi-colon instead of a comma after your width value. 

• It looks like you mistakenly closed the .fromTo() and then were trying to add a click event? .fromTos should have two vars parameters - the fromVars and toVars. 

  var tween = gsap.fromTo(".question"), {color: "#158dd3", ease:"power1.in"}
    document.querySelector(".a-Login").onclick = () => tween.play();
  });

   

• ease:"ease.in" is not valid. Maybe you mean "power1.in"? You can use our ease visualizer to generate eases that you want to use.
• You should use camelCase for multi-word properties. I.e. textDecoration instead of text-decoration.
• You should make sure to close the parenthesis when creating a timeline.
• Special properties like ease and duration should go in the toVars of .fromTo()s
• It doesn't make much sense to add the tweens to a master timeline in this case. That's good when you want to chain animations. In this case, you want the individual animations to fire when the respective link is clicked.

After fixing all of those errors, your modals open! 

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

 

To make your code more DRY (don't repeat yourself), you could make your functions more generalized by using parameters. For example in this case maybe you want to pass in the link element and the correct modal to the function and use those arguments as the targets of your click listener and tweens. I talk more about how to do that and other handy tricks in my article on animating efficiently. 

 

I highly recommend going through the Getting Started article again and make sure that you have a full grasp of the basics

 

 

[ZachSaucier]

8 minutes ago, Shaun Gorneau said:

Sorry Zach, I don't know how I jumped in front of you 🥺

No problem! It's likely my fault - I had this question open while answering others and likely missed the fact that you were drafting an answer. I'm glad you answered! Our answers are fairly different but both helpful I'd say  

[PointC]

25 minutes ago, Shaun Gorneau said:

Sorry Zach, I don't know how I jumped in front of you 🥺

It's okay Shaun. We're all trying to stay one step ahead of Zach. He's pretty quick so we need all the help we can get. 

 

BTW - good to see you. 

[Shaun Gorneau]

14 minutes ago, PointC said:

It's okay Shaun. We're all trying to stay one step ahead of Zach. He's pretty quick so we need all the help we can get. 

 

BTW - good to see you. 

 

I'm coming up for air for a few weeks, hopefully I'll be around here a lot in that time! 👍

[Yaya]

@Shaun Gorneau thank you for such a simple solution! You can probably whip that up in minutes compared to the 8+ hours I spent yesterday on my effort. That really comes in handy.

 

[Yaya]

@ZachSaucier I can't express how much I appreciate your detailed response. Each tip helps me "fish" instead of reaching out to others to fish for me. Instead of going straight to your codepen, I addressed each suggestion you made and changed my own code. I still needed your final codepen at the end to correct some things I didn't quite understand. Now, I have more tools in my toolbox!

Also, I took your advice and checked out the tips for DRY methods (and other goodies).  I can see where changes can be made, such as separating .fromto into .to and .from. I may make that a separate pen so others may compare.

I have one question that I wish to clarify: Adding quotes around strings
I get that. Backgrounds, colors, text styles need those.

I noticed in your code  that width: 0, width: "100%"
-Can I assume as a general rule that there is no need for quotes around strings that have a value of 0?
- I relied on the Basics block from the GSAP V3 cheat sheet, but didn't understand these details until this thread.

Thanks again!
Mary

[ZachSaucier]

1 hour ago, Yaya said:

Can I assume as a general rule that there is no need for quotes around strings that have a value of 0?

Yep  

 

2 hours ago, Yaya said:

I relied on the Basics block from the GSAP V3 cheat sheet, but didn't understand these details until this thread.

I recommend the Getting Started article for getting a more thorough understanding of things. Then maybe the cheatsheet for a quick lookup (or use the docs to do that).

[Yaya]

@ZachSaucier Great! Yes, the docs and I have been getting acquainted. There is nothing like doing vs. reading. Thread closed! Thanks so much!