pixeldroid

I'm also a Flash convert studying the GSAP book and would highly recommend it.

Hey Jonathan - its working! JQuery is being loaded by WP and also by some of the plugins. Both console.log() commands in your code execute. I do use Chrome Dev tools regularly for CSS stuff, I didn't realize how it could be used in this situation - very helpful. I'd imagine this can be improved, but for the record at this point: If there is a page element with ID "slide3", this code (in a "RawJS" VC element) will set it to 50% transparent: <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> <script> jQuery(document).ready(function(){ TweenMax.set('#slide3', {opacity: 0.5}); }); </script> Thanks a ton - onward to learn more GSAP/JS!

Jonathan: I like the idea of making sure that JQuery and GSAP are being loaded. If you have any ideas for a simple way to test this I'm all ears. I did change wp_enqueue ($in_footer) to false, but that didn't help. The problem is that WP has so many layers, I don't know when GSAP loads (or even if it does). I've attached a screen capture of what the page looks like in the 'Backend Editor' of Visual Composer. I'm wondering if we need a custom plugin that would call GSAP from anywhere in VC. Thanks for your help.

FWIW, I've been an avid FF user for over 10 years (probably 15), but I've noticed enough problems in recent months to switch to Chrome, and then because Chrome is bloated and has poor Bookmarking capabilities, to Slimjet.

$("#shadow2").on("click", function() { tl.to(".target", 1, {boxShadow: "none"}); or $("#shadow2").on("click", function() { tl.to(".target", 1, {boxShadow: "0px 0px 0px 0px blue"});

Hi All: It has been a few months since I started this thread. I've learned a bit of WP and I'm revisiting this issue. I'd like to get GSAP working inside WP and am starting with as simple an approach as possible. Our site has a Theme which uses Visual Composer. Within VC there is a "Raw HTML" and a "Raw JS" element. I've added the markup for Jonathan's slider (CSS and HTML) from Post #12 to a "Raw HTML" element. It displays almost correctly (the position of the numbers is a bit off). I've not been as successful getting JS to work. I've created a few "Raw JS" elements and popluated them with simple scripts, but the only JS command that works is: <script type="text/javascript"> alert("Enter your js here!" ); </script> Simple scripts that have failed are: <script> function onReady() { console.log('Here') } </script> <script> function onReady() { TweenMax.set('#slide3', {opacity: 0}); } </script> To load GSAP, I've tried loading it directly with <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> and also using the wp_enqueue_script method mentioned above by Jonathan. The fact that the simple "onReady" function doesn't work indicates that I'm probably doing something fundamentally incorrect. I've used enough WP plugins that call GSAP to know this can be done! Any help will be greatly appreciated. Thanks.

Thanks Jonathan! The Rev Slider is included w/our Theme. I took a quick look - it definitely looks better than Layer Slider - I'll test further... Thanks also for the image slider shell, I don't have time to start from scratch at this point - maybe sometime in the future...

Thanks Jonathan: Yes it does help - it helps me frame my question. I'm developing animated graphics for a Wordpress based site - it is a platform for a membership organization. We've purchased a Theme which includes the "Layer Slider" and I found a great (downloadable) example which can be viewed at: http://demo.theme-fusion.com/ - From the Sliders menu, choose Layer Slider/2D and 3D Transitions If you watch that slider, you will see a variety of clever animation and cool transitions between the slides, also the use of video. The slider uses the GS Toolkit for at least some (presumably most) of the animation. As mentioned, using that slider within WP, even running on a local server, is at least 1 order of magnitude slower than coding by hand, and provides access to only a tiny % of the potential offered by the GS toolkit. HOWEVER, the trade-off is that, transitions between slides, handling video, and placing the animation within the responsive design is handled by the slider. While I could do much more if I could write the code directly, it appears to me that it is a considerable learning curve to figure out how to implement GS into a project like this. Hence my post and my request that, if possible, a tutorial on accomplishing this task would be valuable (at least to me, hopefully others). Even better, perhaps GS could make a slider that would provide the basic embedding functionality and allow the end-users to simply write the code! That's basically what Flash was for me - it provided a object that I could embed in a web page or use in a self-running application, but I used GS to do most of the work. Ah, the good ol days...

Thanks Jonathan: If I can get this to work, I don't plan to use codepen, I want to place the code directly into a container (or even better, import it). I used Carl's advice for demo purposes - just to see if I could get it to work. I used GS quite extensively in my Flash days, so I'm comfortable animating with the code, the challenge is working with Wordpress - I'm at a bit of a loss on where to start. From the codepen example, I can see that GS will play in a WP theme. But I don't know how to install it within the theme and address the issues of adhering to the responsiveness of web-based media. I realize its a lot more work than using a slider. For example, to use video, we'd have to add a listener for when the video is done playing in order to pause the timeline. A tutorial on this would be great - considering the mass quantities of WP sites out there, I'd think a lot of (geeky) people would use it.

I'm making some progress on this project. We've chosen a WP Theme - the7, and I have begun figuring out how to work with WP. The theme includes some sliders to create animation. I've noticed that 2 of the sliders, Layered Slider and Revolution Slider, use Greensock JS. I've found that working w/the slider is at least 10 slower than coding, and the slider provides access to only a fraction of the potential of using GS. I followed Carl's suggestion to embed the codepen test. This works within the theme, but the GS stage does not scale when the page is resized. Is there a way for me to import a GS presentation which will inherit the behavior of the rest of the page for responsive design? This would include scaling and adjusting the visible stage based on the size/position of the containing div. As you probably know, there are many examples of these sliders on Themeforest. Thanks much.

Thanks for the replies.

Hi all: I have a project in which I'm going to create some courseware inside of Wordpress. As I've been researching the various WP-based learning management systems I've watched several tutorials which demonstrate the WP LMS plugins and I haven't found one that goes beyond using video and/or other flat media as the content. Is anyone using GSAP inside one of these WP plugins (eg "WP Courseware")? Thanks much.

Me too. Its been bugging me for over a year!

Found the answer on the Mozilla forums: Edit menu > Preferences > Content In the Fonts & Colors section, click Advanced Check the box for "Allow pages to choose their own fonts" and OK out. Reload, and the icons should appear. Thanks for the suggestions!

Actually, that is not a stupid question - I hadn't done that. However, it didn't help. Further, I ran FF in safe-mode and that didn't fix it either. Maybe I am the only guy in the world with this problem...

FF 28.0, Win7 Pro x64 Codepen is actually working today. I've been out of town for 6 weeks and didn't check it before posting. Probably FF or CodePen adjusted something. However, the star icons on this SitePoint page, http://www.sitepoint.com/store/the-ultimate-css-reference/, don't work (see pic above). The volunteer icon on this orphanage page (and others in the same row), http://indianorphanage.com don't display correctly. Both work in Chrome. I see this so commonly that I think of it as normal. When I inspect one of the stars ("icon-star") on the sitepoint page, both FF and Chrome show a number of CSS properties which have a strikethrough but the stars do display correctly in Chrome. Same occurs for the 'volunteer' icon on the orphanage page. When I load http://indianorphanage.com in FF, I get these console errors: Use of getUserData() or setUserData() is deprecated. Use WeakMap or element.dataset instead. requestNotifier.js:64 ReferenceError: jQuery is not defined jquery.themepunch.plugins.min.js:51 ReferenceError: jQuery is not defined jquery.themepunch.revolution.min.js:10 Use of getUserData() or setUserData() is deprecated. Use WeakMap or element.dataset instead. requestNotifier.js:64 Use of getUserData() or setUserData() is deprecated. Use WeakMap or element.dataset instead. requestNotifier.js:64 Same page in the Google Console: Uncaught ReferenceError: jQuery is not defined jquery.themepunch.plugins.min.js?rev=4.1.4&ver=3.9:51 Uncaught ReferenceError: jQuery is not defined jquery.themepunch.revolution.min.js?rev=4.1.4&ver=3.9:10 Resource interpreted as Font but transferred with MIME type x-font/woff: " event.returnValue is deprecated. Please use the standard event.preventDefault() instead. www-embed-player-vflWfXjsU.js:29 Thanks.

My apologies for being a bit off topic... On my computer it is very common to see a replacement icon rather than font symbols in FFox. Attached are examples from Codepen and SitePoint. The symbols on both these pages display properly in Chrome and IE. I can't be the only person who has this experience - it probably happens to many of our clients. Any ideas what causes it and how to avoid? Thanks.

Hi all: I have a new project w/a tight deadline and am looking for some help w/AS3 programming. I use a lot of GS code in my presentations. If you are fairly advanced w/AS3 and have time beginning next week, please PM here. Thanks much. Mitch

I was just checking it out earlier... Don't know if this is possible, but how about moving the centerpoint of elements? IE, the point around which it will rotate and scale? And then of course animating it

IE, if I'm looking for an experienced GSAP coder? Thanks.

What I was referring to is that the 'tour' in the html file is a simple hierarchy of divs which are dynamically populated by code in 'tour.js'. All the tour content is loaded from external files (the examples), the drop down menu, the code overlay and the button properties are all assigned when the tour is dynamically created. I used to do stuff like this in Flash using AS and xml, now I want to learn how to do it in JS...

Upon further investigation, I see that tour.js actually populates the divs in the tour container, so by the time I saved the code it was in its final form and bound for failure. See if I can figure that one out (though I wouldn't turn down any hints)...

This might be asking for too much, but in an effort to learn some advanced HTML5 I'm trying to rebuild the the very cool tour app on the GS JScript Jump Start Page I've built the basic framework and have been trying to add one slide at a time to see how it works and also to try to keep it functional as I go along. At this point I have the first 2 slides and the dropdown menu installed. I'm not getting any of the code in tour.js to work. I've uncommented all of the console comments but I'm not getting any output to the debug console (FF). I am getting an error that 'slideshow' is not defined in the html file, and I'm assuming that it should be getting the 'slideshow' object from tour.js. I've also tried adding breakpoints after the 'loadSlides()' function in tour.js, but in both Firebug and the FF Console, the code doesn't stop and offer the 'step in' option. Admittedly, I'm new to this process (still a Flash refugee), but if anyone has a tip or two to move me along, I'd greatly appreciate it.

As a followup: I found that using an svg container was the easiest way to accomplish this task. Adding backgrounds to divs or even stacking several images into single/multiple divs led to a variety of failed experiments (over many hours) - especially when trying to keep the thing together when resizing. While I haven't tested it extensively, so far the svg behaves like the Flash stage. I didn't use GS to manipulate the objects, but I will testing that out in the near future. Thanks again for the replies.

Thanks a lot Rodrigo! I appreciate your examples - they induced me to get moving on studying up on html5. I'm still a total newb on this stuff (though a long-time AS3 coder), but having done some R&D on this issue, it appears to me that if the images are used as the background for a div, they won't scale when used in a responsive design. The div will scale, but the bg image of the div will get cropped. I've only tested this w/the 'Foundation' framework so far. I think the best approach will be to put the whole thing into a canvas and use one the techniques in your sample for swapping images. In this case, I'm re-creating some old software UI's for my portfolio, so I happen to have all the buttons as sprites (bmp's no less - they are almost 15 years old!). Thanks again.