pixeldroid

This might be helpful for using GSAP with WordPress.

This might be helpful.

Very cool! But I'm not going to spend 3 hrs driving myself crazy to solve it

Hi All: The question of using GSAP in WordPress has come up several times over the years, including a couple of questions from me. I finally got around to figuring it out and I wrote a tutorial on how this can be done. If anyone has suggestions or corrections, I'd appreciate passing them along. Hopefully it will be helpful as non-WordPress GSAPers continue to want to use your fantastic library in WordPress. Thanks.

To clarify, in the codePen example, you don't use "add" to insert the label. This suggests that a label is declared upon first useage. Is that correct? Thanks.

Thanks Carl!

Quick question about the TimelineMax Jump Start at: What is the purpose of "textEffect" in tl.staggerFrom(txt, 0.4, {alpha:0}, 0.06, "textEffect"); I don't understand the use of a string as the final param in this function call. Thanks.

Progress! I'm past the Reference Error. TweenLite is loading, but the div is not animating. I've beefed up the script, but no go: <script> document.addEventListener("DOMContentLoaded", function() { console.log("aa"); var theDiv= document.querySelector('#myDiv'); TweenLite.from(theDiv, 1, {left:-200, rotation:-90, scale:0, delay:1.5}); }); </script> console: myDiv: <div id="myDiv"> I'm a big Div</div> Hmmm

Hi All: I would like to install gsap into our WordPress site so I can call it from any page. For Example. In a WP page, I have <div id="myDiv"> I'm a big dumb Div</div> and in the scripts section, before the closing body tag: <script> TweenLite.from("#myDiv", 2, {opacity:0, delay:0.5}); </script> I'm using a "Functionality Plugin" which is a single plugin file which is used to organize/load custom plugins. The setup is thus: in mu-plugins/functionality-plugin.php, I have: if ( ! defined( 'FUNC_PLUGIN_URL' ) ) { define( 'FUNC_PLUGIN_URL', plugin_dir_url( __FILE__ ) ); } include( FUNC_PLUGIN_DIR . 'includes/load_gsap.php' ); In includes/load_gsap.php, I have tried to load gsap both locally and via cdn: function theme_gsap_script() { wp_enqueue_script( 'gsap-js', FUNC_PLUGIN_URL . 'js/TweenLite.min.js', array(), false, true ); wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenLite.min.js', array(), false, true ); } add_action( 'wp_enqueue_scripts', 'theme_gsap_script' ); Unfortunately, when I load the page, I get Uncaught ReferenceError: TweenLite is not defined Help will be appreciated!

Cool! Nice job.

Given a large project, are you suggesting that the more interactivity and dynamic content, the more useful React would be? Thanks for the reply.

What criterion would you use to decide to use something like React or Angular vs. straight JS/CSS/HTML for a project? Thanks.

Nice job. How about making it draggable?

I wish I had more time to study your examples Blake, but I used to be a woodworker, so I can help with this. What you do is place the first board with 8 inches on the ground, then carry the second board out to the end of it and reach as far as you can and place it so it has about 8 inches on the ground on the other side. Then just hop across and walk to the other side.

I'm impressed! The points change when the curve type is changed. Is that because of the math? Thanks for a great tool!