Jump to content
Search Community

Getting the data attribute to display div

Charlyta test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

Hello. It´s my first animation using Gsap trying to understand and recreate in my own way an example that appears on tympanus. 

I would like to know what is the better way to show a div based in data attribute.  In my example always shows the same div but the data is different. 

Any help will be really appreciate.

See the Pen abwgGjK by carlos-turpin-trives (@carlos-turpin-trives) on CodePen

Link to comment
Share on other sites

Hi Charlyta,

 

The attached demo is quite complex. We ask for minimal demos here to make it easier to parse and help find a solution. 

Maybe this demo will help, or at least serve as a good starting point to figure out the logic you need.


See the Pen mdwZBGW by GreenSock (@GreenSock) on CodePen

 

I also noticed that you're using deprecated syntax. Check out the migration guide here.
 

https://greensock.com/3-migration/

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

3 minutes ago, Charlyta said:

I think this line have to be mentioned in Gsap tutorials or documentation: 

 

That's just a data attribute selector, and it isn't specific to GSAP. It's the same you would use in CSS.

https://css-tricks.com/almanac/selectors/a/attribute/

 

The string tilde ` and the ${} is a template literal, which is just JavaScript, so again, it's not specific to GSAP.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

 

It could be re-written like this.

tl.to('.article[data-number="' + number + '"]', { duration: 1, opacity: 1 })

 

  • Like 4
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...