Charlyta Posted October 5, 2021 Share Posted October 5, 2021 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 More sharing options...
Cassie Posted October 5, 2021 Share Posted October 5, 2021 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/ 3 1 Link to comment Share on other sites More sharing options...
Charlyta Posted October 5, 2021 Author Share Posted October 5, 2021 Thanks Cassie for your fast response and for the demo. I have modificated my first example to show what I need. Thanks!! Link to comment Share on other sites More sharing options...
Solution OSUblake Posted October 5, 2021 Solution Share Posted October 5, 2021 Hi @Charlyta Is this what you're trying to do? See the Pen mdwZQYG by GreenSock (@GreenSock) on CodePen 3 1 Link to comment Share on other sites More sharing options...
Charlyta Posted October 6, 2021 Author Share Posted October 6, 2021 Hi @OSUblake Yes! Thanks by your lesson! I think this line have to be mentioned in Gsap tutorials or documentation: gsap.to(`.article[data-number="${number}"]`, Thanks for your really apreciate help! Link to comment Share on other sites More sharing options...
OSUblake Posted October 6, 2021 Share Posted October 6, 2021 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 }) 4 Link to comment Share on other sites More sharing options...
Charlyta Posted October 6, 2021 Author Share Posted October 6, 2021 I must to refresh my knowledge so! 🧐 Thanks for the appointment 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now