Gsap on inline Block

[Gazzawazza]

Hi - hopefully not too daft a question but I cant figure how to get the divs to open from top to bottom while keeping the list <li> inline at the top.
In other words the x3 red drawers should stay inline at the top while the content div opens downwards.

I guess Im missing the blindingly obvious but I just can see it...

Thanks for any help given

gareth

See the Pen MWyrzGg by Gazzawazza (@Gazzawazza) on CodePen

[ZachSaucier]

Hey Gazzawazza.

 

Set vertical-align: top; on ul.catControl li.

 

By the way you're making a couple of the (minor) common GSAP mistakes. I recommend the article on the subject  

[Gazzawazza]

Wow.. 

First of all thanks for your quick response and answering my question.

Second.. cant believe I missed that... 

Whoops. 

 

Not surprised I'm making common mistakes though will read the article you sent. Much appreciated. Would you give me an indication to which mistakes I'm making please?? 

 

 

 

[ZachSaucier]

Using the old syntax and using strings for numerical values.

[Gazzawazza]

Hi, Ive been reading through the common mistakes - still have some to rectify such as storing numbers in strings.

However, Im confused how to pass a variable into the timeline.
I am using $Work = $this.find("ul.List-Prices-Three > li"); within a .on Click event and then calling play()

The closest I have got is to call tl1.play(0); from the function play1(); which is outside of the click event

$Work passes into play1(); ok but I cannot figure how then to pass $Work into the timeline which is outside of the play1(); function

 

 

 

[ZachSaucier]

Your $Work variable is inside of your click function which means it can't be accessed outside of that function. I think you'd learn a lot from my article about animating efficiently, especially the section about loops and the section about control methods. It might also be helpful to not use jQuery as it abstracts some things which make understanding what's going on more difficult. It is, of course, possible with jQuery but just a little harder to think through because of what jQuery does for you.