Easing Function Not Displaying

[Susan]

What did I miss out here, why the easing function isn't working? Thank you.

See the Pen ZaJXQy by susansiow (@susansiow) on CodePen

[GreenSock]

I didn't see any problem. Did you mean Linear.easeNone? Also, it looks like you've got a commented-out tween that animates the "top" using the default ease (Power1.easeOut), so maybe that's what's confusing you. "y" and "top" both affect the element's vertical position and you've got two different eases at play. See what I mean? 

[Susan]

Hi GreenSock,

 

Yes, I have commented-out the "top" code, because I would like to try the Linear.easeNone animation but the #light isn't displaying and animating.

 

Please assist, thank you.

[GreenSock]

It's not displaying because you've got opacity set to 0 in your CSS (so it's invisible). And you're trying to target an object named "light" in the tween instead of using selector text like "#light". Here's a fixed fork: 

See the Pen mqqmOQ?editors=0010 by anon (@anon) on CodePen

 

Does that help?

[Susan]

Hi GreenSock,

 

Thank you so much for pointing out my negligence, I have missed out he opacity value!

 

Another question, TweenMax allows id to have no # beside the name? As you can see below, I did not include the # but the id is rendered together with the code.

 

TweenMax.to(light, 2.5, { opacity: 0.5, ease: Power0.easeOut, y: -50, repeat: -1 });

 

Kindly advise, thank you.

[Sahil]

Interesting. It happens because 'named elements' (elements that have id or name) are added to document object as properties, that's why it works. But in general you should stick to writing string as '#light', it saves you from potential conflict issues where you might use variable with same name as id.

 

If that's confusing you, using light works in most browsers but I will suggest to practice using '#light'.

 

Here you can read more if you are interested.

[Susan]

Thank you @Sahil for the kind information, happy weekend!