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.

Trying to use some TweenMax animations on a couple of Joomla! sites, versions 2.58 and 3.x I ordinarily just add the TweenMax.min.js to a site somewhere in the headers, and it's no exception with Joomla. A custom template, code inserted into the index.php file, thusly: <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/javascript/TweenMax.min.js"></script> </head> That apparently works without tripping up anything. But when I try to use a small .js file with theTweenMax script (inside a Joomla custom module) that relies on the TweenMax code, nada. Nothing much around here that addressed this issue. Does anyone have some idea of how to make TweenMax behave with Joomla? TIA!

Thanks to all! I am just AMAZED at what GSAP can do!

I'm trying to come up with a lightweight "news ticker" type of animation. Just maybe 2 different lines of text, one replacing the other in a loop. No problem with the looping or the use of the TextPlugIn. But the docs allude to how one can create custom delimeters to change the way the animation works with the text. I've played around with the jQuery news tickers out there, but thus far, none of them seem to work reliably in the context of a client's e-commerce site, which apparently was constructed by someone who had no real concept of good HTML5 coding practice. I have a different TweenMax animation running on that site now, so it wouldn't be an issue to just write a different TweenMax animation - it just works. How do custom delimeters for theTextPlugIn work? TIA!

I need to do a small "news ticker" type animation - it would just consist of text scrolling along a single line. I spent a considerable amont of time looking around for somethig like this, and all of the references I found were either old Flash-based things, or jQuery code that is many years old. Is there a simple way to use Tweenmax to create a horizontal text scroller? Ideally, I'd like it to just use a bunch of <li> elements as sequential text scrolls. TIA!

Thanks to you both! I guess it's time to do some more Javascript research. I was wondering, as all of the examples of onCompleteParams seem to be AS-oriented. So, if I wanted to passm more than 1 parameter, is it just stated like this? onCompleteParams: [pointer, text],

I am using TweenMax to create some small banner ads. The client wants some timed things, no problem. But I'm wondering why in the following code, I have to declare "var pointer" more than once. Why is the initial declaration (is it not a global variable here?) not available to the endseq function? That is, if I remove the var pointer line (in blue) from the endseq function, the code breaks. Stupid question, I know, but JS is not my cup of tea. <script> window.onload = function(){ var pointer = document.getElementById("arrow"); var text = document.getElementById("message"); TweenMax.to(pointer, .8, {x:-30, repeat:6, yoyo:true}); TweenMax.to(text, .8, {repeat:6, border:"2px solid white", yoyo:true, color:"white", onComplete:endseq}); } function endseq(){ var pointer = document.getElementById("arrow"); TweenMax.to(pointer, 1.9, {rotation:360}); TweenMax.to(pointer, .8, {x:-5, repeat:0}); } </script>

Thanks - but this results in the same behavior - a pulsing box, and a pulsing object. I guess the thinking is: 1.) Wait for the object to complete it's tween to move to the new position; 2.) After that's done, fire off the box shadow effect Possibly I need a different way to refer to the object once it has moved?

I've got an animation where the user clicks a button, which causes a shape object to move to a specific position. Like this: // move pointer object TweenMax.to (myobject, .75, {x:43, y:18, ease:Bounce.easeOut}); So, now myobject is in a new position. If I try to add an effect, such as a repeating pulse/box shadow like this: TweenMax.fromTo(myobject, 0.7, { boxShadow: "0px 0px 0px 0px rgba(0,255,0,0.3)" }, {boxShadow: "0px 0px 20px 10px rgba(0,255,0,0.7)", repeat: -1, yoyo: true, ease: Linear.easeNone }); What I get is a pulsing object (it's just a circle with a fill) in it's current position, AND a pulsing square box shadowed area offset from the new position. I just want the moved object to pulse after it reaches its new position. I've attached a small screen shot. I think this is pretty simple, but I can't seem to get it...

I've been working on learning GSAP in anticipation of doing some banners. The basic idea is to hide all text boxes, then sequentially Tween their opacity and position with some Easing effects. Here's a small example: <div style="width:750px; height:90px"> <div class="box" id="first"><p>some text here</p> </div> <div class="box" id="second"><p>some text here</p> </div> <div class="box" id="third"><p>some text here</p> </div> The CSS2 method of hiding elements was either: .box { display:none: } or .box { visibility:hidden; } For CSS3 (and GSAP), I've found that I have to use (the second line being for IE8 browsers): .box { opacity:0; filter: Alpha(opacity=0); } And then just tween away to make them visible. But it occurs to me that there must be a "standard" way of hiding text box elements in order to animate them into position from their initial -invisible - starting positions. Would the best method be to just set overflow to hidden, and then position the "idle" boxes outside of the containing div, i.e. : .box { overflow:hidden; position:absolute; top:-200px; } In short, how are elements initially positioned "off the stage" so that they can be Tweened into position and displayed?

Thank you! I'm going to save that info for the future. Right now there are only text-based banners planned, and we are bogged down in corporate web font licensing issues...