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!

That is cool. How about draggable handles and anchor points?

Thanks for that. Between these examples and the link to the flour sack demo you posted elsewhere on this forum, I can see a bright future for jscript based animation.

Cool work Blake! Thanks for sharing.

The reason you developed a null object is that you allowed your counter (array index) to surpass the size of the the array. So when you called TweenLite on slide[3], the object didn't exist. Here's a version which uses the js modulus (%) operator, which useful for things that cycle. http://codepen.io/pixeldroid/pen/wKaEaP

Cool!

Oops. I put my suggestions on the YouTube page... Here they are: Suggestions: mix, mixem, mixm, mxm, ripple, ripl, rypl, rpl, stir, stirem, vary

Incredible. You guys did a great job writing this course. I finished the tutorial and wanted to post and say thanks for the GSAP course. Nice job covering the bases which for me outlined how to use GSAP, HTML, CSS, and JQuery to transition from envisioning the Flash stage to envisioning the HTML stage. This was my most extensive use of Netbeans (recommended above) for JS editing, so I wanted to add to the list of useful features in their IDE (beyond the usual syntax highlighting type features): Clickable navigation includes lists of: CSS Rules, Classes, IDs and Imports HTML Elements JS Vars and Functions Live connection to Chrome - ie save in NB automatically updates Chrome preview. Chrome highlighting mode where mouseover identifies elements. Built in Server that launches with application Silent CSS error checking - checked the entire tutorial for errors in CSS files. Open multiple instances of a document, drag/drop to create view panels which host a tabbed display of open docs, split views. Disclosure: I have nothing to gain from promoting NB - its just a great, free IDE.

The feature that I find the most useful when editing code is a variable/function list which can be used to navigate the document. I Sublime, it can be invoked and searched when needed, but then it disappears. In Netbeans it is always present and you can observe all of your functions. I find this very useful for efficiency and it also leads to renaming functions to keep the code organized. That said, it appears that Sublime does a better job of code completion w/GSAP. For many years I did AS development (w/GSAP of course) and used FlashDevelop, which I really liked and has a great code navigator. I haven't upgraded it for years, but revisiting their website, I see that they also support JScript, so it would be worth giving that a try. http://www.flashdevelop.org/

FWIW, here is an example of such a tool: tweenui.com/ The author announced on the GSAP forum here: http://greensock.com/forums/topic/6650-html5-animation-tool-powered-by-greensock/

FWIW, I've been working with the free NetBeans IDE for years and have found it to be an excellent tool for this kind of development. The GSAP book recommends the Sublime Text Editor, which I've tried a few times over the years, but have found NetBeans to be more feature rich.