Jump to content
Search Community

Attrplugin

Fahim test
Moderator Tag

Go to solution Solved by jamiejefferson,

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

Hello crispedge, and welcome to the GreenSock Forum!

 

If it is an attribute than GSAP AttrPlugin can use it.

 

Open your browser inspector and inspect the box.. you will see the data-attribute value change.

 

Example:

See the Pen LilGx by jonathan (@jonathan) on CodePen

 

I put the tween to yoyo back and forth forever so you can see the changes,

var box = document.getElementById("box");

TweenMax.to(box, 1, {attr:{"data-my-attribute":1000} });

:

Don't forget to wrap your data attribute in quotes

 

Note: a common mistake is to forget to wrap attributes in a attr:{} object which is essential for specifying your intent.

 

GSAP at its core can manipulate/animate any object or property

 

Hope this helps! :)

  • Like 1
Link to comment
Share on other sites

Hi Jonathan,

 

This example makes sense.

 

can i also use something like setting these below attributes and get the element animate using the attributes via AttrPlugin.

 

data-ca-bgsize="100% 100%"
data-ca-move="left"
data-ca-rows="20"
data-ca-columns="20"
data-ca-bgposition="0 0"
data-ca-bgrepeat="no-repeat"
Link to comment
Share on other sites

Some of those properties you listed are for CSS. You wont be able to animate an element by just those data attributes, since they are not associated with anything to animate, and can be anything you name them.

  • What are you trying to animate?
  • Are you trying to animate an SVG type of element?
  • Why not just animate the object using CSS with GSAP?
  • Are you just storing those values in a data-attribute and then want to access those data attributes to animate at a later tiime?

:)

  • Like 2
Link to comment
Share on other sites

  • Solution

Only data-ca-rows and data-ca-columns in that selection would be directly animatable with AttrPlugin since they are plain numeric values. AttrPlugin won't be able to tween a value like "100% 100%" or "no-repeat". Only the CSSPlugin has the extra logic to handle complex values like that since it's required by many CSS rules. You could get around this by animating values on a proxy object and applying them to your element's attributes onUpdate.

  • Like 4
Link to comment
Share on other sites

As of now i am just trying to learn javascript and then a bit GSAP. SVG and canvas is all above my brain level as of now. But i know data-attribute will play a good role in what i will be making. It helps to make the element more powerful by storing associate values it can be css properties or animation properties. Sometime you want a store css properties so that you can use them in .set() and sometimes .to(), from(), fromTo(). I just trying to figure things out so that i can really understand GSAP and JS. Got some information its real valuable but still need a bit of more clarity. 

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