Jump to content
Search Community

Animating HTML option tag - TimelineMax

keepRunning test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi Greensock Community,

 

First and foremost, It's been three days since I started learning GSAP (I'm a super newbie) about this web animation technology.  I have this HTML select which I want to animate the HTML option(s) tag when the user clicks the HTML select tag. I make a basic animation to test out, but the element (options) tag is not animating but when I checked the developer tool it seems TimelineMax is working I'm not sure if the option tag elements itself is can't be animated.  Please need suggestion on this.

See the Pen MVQQaW by pfcglen (@pfcglen) on CodePen

Link to comment
Share on other sites

You can't animate option tags, plus styling them consistently is almost impossible. You can instead use something like jQuery UI which replaces your select tag with custom HTML that you can style or animate as you like. There are many other libraries/frameworks that do same thing but be sure to check if they are accessible.

  • Like 6
Link to comment
Share on other sites

Hello @keepRunning and welcome to the GreenSock Forum!

 

Yeah browsers wont even let you style specific CSS for <option> HTML elements. Chrome or other webkit based browsers used to allow CSS to style both <select> and <option> elements, but they have been pretty poopy pants about styling <option> tags lately. So the browser will reject certain CSS properties for visual, layout, and transforms on <option> tags. The HTML DOM interface won't allow it. :) The browsers only allow things like font-size, font-family, font-variant, font-style, color, background-color, background, etc like Blake said above

 

When i look at the spec for <option> tags there is no mention of this

 

https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement

https://www.w3.org/TR/html50/forms.html#the-option-element

 

Only other route is like Sahil advised is where the original <select> tag is hidden. And then you create a custom dropdown with animated option tag using <ul> and <li> tags.. or use a jQuery UI dropdown select that is jQuery custom HTML.

 

Happy Tweening! :)

  • Like 4
Link to comment
Share on other sites

Always good info from the Oracle of CSS. 

 

This is one of those things that should be so simple, but is made into Mission Impossible. It reminds me of vertically centering something back in the day. It took a team of 16 people working 12 hours shifts for 6-8 weeks to vertically center some content in a div. :D

  • Like 2
  • Haha 1
Link to comment
Share on other sites

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