flash08

Thanks. I have used GSAP animations before on all sorts of (non-WordPress) sites with little issue. I am going to get back to exploring the problems I experienced with using GSAP in WordPress, but for now I am going to go the jQuery route with an adaptation of the Owl Carousel script, as it runs without any issues within WP - including within the widget's context.

Yes, that was it - thank you! I am finding a lot of inconsistencies across the various places I can place JS code within WordPress. I suspect that this is due to nested <div> elements and the existing CSS for the theme with which I am working. But at least for the time being, I've got GSAP scripts actually running. (I had noticed that someone actually wrote a WP plug for Greensock, but it apparently was abandoned - and it's not on the WP plugins repository, so best left alone, for now. Thanks to all for their help!

Thanks so much for your help. I am not sure why this does not work within WordPress, but I am assuming it has (again) to do with the way the WordPress uses jQuery in compatibility mode. I have the TweenLite script enqueued in WordPress properly (checked in the page headers, and it's there), but upon trying to use the JS here, I still receive this error: Uncaught ReferenceError: TweenLite is not defined Something obviously not specified correctly.

I've run into another small snag - probably due to the way that WordPress uses jQuery in compatibility mode. I've updated the pen, and it runs fine here. But inside a WordPress environment, the slides change, but their positions shift down the page as each new slide loads. When the four are done, the sequence starts again at the top of the page. (Unfortunately, since I am still testing, I cannot point to a live instance here...) I found that in order to get any Javascript to run within WordPress, I had to change all of the variable declarations like this: Standard syntax : var images = $('div.tslide') New syntax : var images = jQuery('div.tslide') I am thinking that the position:absolute rule in the CSS file might be the answer, and tried adding this: top: 0px; But that doesn't seem to have any effect on the slides moving positions down the page as they change. The updated pen is at:

Thanks! For some reason, the movement animation is not working properly within the WordPress structure. I can move the slides off screen, but their travel is visible on screen, and looks odd, within certain WordPress templates - and not on others. I could add some alpha tweens, but instead, modified an existing slide switcher pen to work with my text "slides", here: I am going to work out some autoAlpha tweens for the slides, so they can fade in and out more gradually, but I have to look up the syntax. I don't have too much call for animation, and my GSAP chops get pretty rusty over time!

I'm working on a lightweight text slider for use on WordPress sites. The slider's context appears to be an issue: on some sites, contained within a widget, the animation works perfectly. On others, using a different WP theme, when the animation runs, the "slides" do slide, but instead of sliding out of view, they just slide to the far right side of the screen, underneath the other content. The "offscreen" slides remain partially visible under that content. I am pretty sure this is concerned with the distance the "slides" move, which I'll admit I don't fully understand. The basic code was forked off of another similar pen, I think, but a long time ago. The basic issue here is that the available plugs for basic WP animation are beasts: tons and tons of code, enough to slow page loading times by many seconds. TweenLIte, of course, is extremely lightweight. I'd be grateful if someone could explain the movement pieces of this TweenLite animation, so that I could figure out where the "offscreen" slides need to "go" to remain invisible.

Thanks, that looks promising!

As a former user of Adobe Edge, which has apparently been abandoned, I am going to have to rewrite a couple of Edge animations in GSAP. I am thinking of using Timeline Max to create what is essentially an animation that just changes the image a viewer sees, according to what button he clicks. The idea is that, for instance, when a viewer clicks on button 4 (in a series of numbered buttons), the timeline advances to the designated frame and stops. Same action for all buttons. Are there any examples of this type of "animation" using Timeline Max that anyone knows of?

OK, so I've properly enqueued TweenMax.min.js in my Wordpress install, in my child theme's functions.php file. It's loaded, as a check of the page shows. Just to make sure it's working, I added this test code to a page's footer code: <script type="text/javascript"> var blinkText = document.getElementsByClassName("blinking"); function blink() { TweenMax.to(blinkText, 0.3, { autoAlpha: 0, delay: 0.3, onComplete: function() { TweenMax.to(blinkText, 0.3, { autoAlpha: 1, delay: 0.3, onComplete: blink }); } }); } blink(); </script> When this page loads, the text doesn't blink and the DOM inspector shows an error, reporting "Uncaught ReferenceError: TweenMax is not defined." I don't have much JS experience, but obviously I've missed something simple, and obvious. Can someone help me out here? TIA! SOLVED: Ach, what a pain. It was just a case of script loading and timing. I changed the example code to what I pasted in below, and it works fine in WP, via the OH Add Script Header Footer plug. This plug makes it simple to add things like GSAP scripts on a per-page basis without having to create separate files in the WP child theme. <script type='text/javascript'> // wait until DOM is ready document.addEventListener("DOMContentLoaded", function(event) { // wait until window is loaded (images, stylesheets, JS, and links) window.onload = function() { //fade out and set visibility:hidden TweenMax.to(blinking, 2, {autoAlpha:0}); //in 2 seconds, fade back in with visibility:visible TweenMax.to(blinking, 2, {autoAlpha:1, delay:2}); }; }); </script>

Thanks. I did some experimenting on a Joomla 3.4 site under development, and since MooTools apparently isn't being loaded by anything, TweenMax works perfectly, as expected. I suspect you have figured out why it didn't work with the earlier 2.54x version. I am in the midst of some year-end site updating, and boy, Joomla! is no simple matter when it comes to this stuff! Virtually EVERYTHING needs to be fixed or changed, aside from importing of users and articles. VERY time consuming. I finished updating the 3 or 4 Wordpress sites I run, and that took maybe five minutes apiece to get to the latest versions. No messing with incompatible menus or non-importable modules, etc. Very different tools, I guess.

Thanks - I'll have to give those a look.

I'm getting to like WP more and more. For sites that don't need a lot of complicated forms and such (I use Fabrik with Joomla! sites for this...) I use WP frequently. I haven't had much opportunity to examine what the current level of (plug-in derived, I guess) ACL that WP might offer. With a lot of users/rights, Joomla! seems to be the logical choice.

I'm going to check on that later when I can get back to this thing. I used to really enjoy working on Joomla! sites, but lately the whole upgrade thing has been an enormous burden. The upgrades proceed pretty simply until you reach a level where the templates don't "translate" and you have to go in manually fuss with the db. But for many things that require things like custom PHP scripting and ease of editing - except for system updates - Joomla! is still on my list. I do a lot of Wordpress development as well, but that's another story... My "other" plan is to try and get GSAP working on my Joomla! test platform, and then puzzle out why it doesn't work in the site I'm editing. Thanks again for your help!

Thanks, but that doesn't seem to do anything. Oddly enough, I was able to get this TweenMax code working (http://codepen.io/MAW/pen/MKgrKr) on a large e-commerce site that was apparently written with a "casual" attitude toward HTML5 coding. No big deal - add a line to load TweenMax.min.js to the bottom of the page, insert the small piece of JS, and I was good to go. With Joomla!, it seems that there is something else afoot. I have added other Javascript to the site without any problem, but for some reason, TweenMax is proving difficult. There are no JS errors being reported. I really need to update this Joomla! site to 3.x, but the upgrade is a real minefield of incompatibility problems with some of the extensions currently being used.

Thanks for the tip - but still no joy. I've inserted the Javascript like this, in the template's index.php file: <jdoc:include type="modules" name="debug" /> <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/javascript/TweenMax.min.js"></script> <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/javascript/news_ticker.js"></script> </body> I am not exactly sure what's going on at this point. A look at the site via the browser's Console tool show no JS errors.