Jump to content
Search Community

GSAP inside Wordpress LMS?

pixeldroid test
Moderator Tag

Go to solution Solved by Jonathan,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

 

Link to comment
Share on other sites

Hi,

 

Actually I'm not aware of someone using GSAP in a LMS plugin. For example I checked the namaste themes and in the live samples their using jQuery UI's effects and transitions  :roll:

 

You can integrate GSAP into WP with ease and use it as long as you don't interfere with the site's structure and that you don't create a conflict with another plugin loading a different version of GSAP. In this regard be sure to take a look at this post, because is very informative on the best practices to avoid such issues:

 

http://greensock.com/forums/topic/9881-avoid-multiple-loaded-tweenmax-and-tweenlite/

 

Beyond that, I don't know what else to tell you. I'm not a WP type of dev (is on my todo list but with other things ahead) and the only serious experience I have is building a template for my new blog, but I managed that project in the same way I'd manage any other HTML project (probably not the best way, but I didn't have time to learn a ton of WP resources at that time), so basically turned a single column layout HTML page into a WP theme and added GSAP, no other plugin whatsoever.

 

Hopefully a more advanced WP user could share more info with us in this one.

 

Best,

Rodrigo.

Link to comment
Share on other sites

I know GSAP is used on many WordPress blogs (including GreenSock.com) and I see absolutely no reason why it would cause any trouble whatsoever. The whole platform is built for maximum flexibility and it keeps its hands off of anything unless you specifically tell it otherwise. This is in contrast to some other frameworks like famo.us which have a very opinionated way of building things that could conflict with other parts of your site/app. Think of GSAP as seasoning you can sprinkle on top of your projects (or, of course, you can leverage it to a high degree to make some really fancy effects).

 

Let us know if you run into any trouble.

Link to comment
Share on other sites

if you simply want to drop a GSAP animation into some content AND not use it to do custom animation of the template itself (like animate the nav or sidebars) the easiest thing is probably just to embed a CodePen demo or content from an iframe. This way you can develop and test completely outside of any clunky WP admin tools / text editors and also not have to worry about loading assets from funky WP paths.

 

As long as you can add some custom HTML somewhere in your content, the following code should work

<p data-height="300" data-theme-id="5662" data-slug-hash="iKcrD" data-default-tab="result" class='codepen'>See the Pen <a href='

See the Pen '%26gt;GSAP by GreenSock (@GreenSock) on CodePen

JS Bezier: train effect</a> by GreenSock (<a href='http://codepen.io/GreenSock'>@GreenSock</a>) on <a href='http://codepen.io'>CodePen</a>.</p> <script async src="//codepen.io/assets/embed/ei.js"></script>

That code will render this animation: http://codepen.io/GreenSock/full/iKcrD

 

As a little caveat, I have no experience with any LMS tools, I'm simply guessing this might work.

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

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.

Link to comment
Share on other sites

Hello pixeldroid,

 

To add to all these kind gents' great advice. You can try using Carls advice from above and set media queries The codepen embed converts the <p> tag to an iframe..  and has an inlne style set to width:100%. So the iframe should fill the width of its parent.

 

So using Carls code from above you could add CSS that targets the codepen iframe with specific widths:

// also to target for specific widths you can use media queries
@media (max-width: 400px) {
   iframe[src*="codepen.io"] {
        width: 320px !important;
   }
}

:

Also if you want to just place the codepen URL directly in you WordPress content.. you can download this WordPress Plugin that adds oembed support for codepen in WordPress.

 

https://wordpress.org/plugins/codepen-oembed/

 

So you would just add the codepen URL in your WordPress content areas like this, and it will automatically embeds the codepen pen into your content:


See the Pen iKcrD by GreenSock (@GreenSock) on CodePen

:

Codepen embed reference:

http://blog.codepen.io/documentation/features/embedded-pens/

WordPress oembed plugin:

https://wordpress.org/plugins/codepen-oembed/screenshots/

http://codex.wordpress.org/Embeds

 

Hope that helps! :)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

If you are making your own theme or if you want to include it in a wordpress theme. Then you can add GSAP in your theme function.php.

 

Wordpress allows you to control and change the order of scripts with the WordPress wp_enqueue_script() method.

 

You can also change parameters of JS scripts by using or editing wp_enqueue_script() method, to tell WordPress to either insert the script in the head tag or in the footer. It also gives you an option to set the priority, so you can control the order of the scripts being loaded in WordPress. As well as adding a version number of the script. And wp_enqueue_script would be added to your functions.php

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

:

So to load GSAP from CDN in WordPress, in your theme functions.php .. could l look like this:

/* enqueue scripts in WordPress - add GSAP from CDN  */
function my_theme_scripts() {
    wp_enqueue_script( 'my-gsap-js', 'http://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.2/TweenMax.min.js', array(), '1.13.2', true );
}

add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

:

Then you can use GSAP in your WordPress theme. You can add your HTML markup inside the WordPress content. Or directly in your theme files.

 

WordPress reference:

http://codex.wordpress.org/Function_Reference/wp_enqueue_script

Wordpress API with great information on how to work with themes:

http://codex.wordpress.org/Theme_Development

 

Does this help?

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

Here is another image slider plugin that uses GreenSock GSAP for its transitions, layers and captions. It is called Slider Revolution.  And in my opinion, I prefer it over the Layer Slider. Take a look.. and it has alot of options by ThemePunch.. Slider Revolution:

http://themepunch.com/revolution/

It is available as a jQuery plugin or a wordpress plugin.

Or you can try to create one from scratch using GreenSock.  Here is basic GSAP image slider shell. You could use it as a base and build on top of it:

See the Pen qxsfc by jonathan (@jonathan) on CodePen

 

:)

  • Like 1
Link to comment
Share on other sites

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...

Link to comment
Share on other sites

  • 3 months later...

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.

Link to comment
Share on other sites

This might have to do the way your assets are being loaded on the page. If all your scripts are being loaded in the head then you can set the last parameter in WordPress wp_enqueue ($in_footer) to be set to false. So it loads GSAP in the head and not the footer.

 

Where are you placing your custom GSAP javascript code? .. that should go in the footer or at the very least you cold always wrap your JS functions in a jQuery ready() method, to make sure your JS functions run after the DOM is ready.

 

But i would first make sure that JQuery and GSAP are being loaded in the page before your custom JS code runs in WordPress frontend.

 

You can also adjust the priority file order of the WordPress JS enqueue, to control the order the scripts load on the frontend.

 

See this accepted Answer on StackOverflow:

 

http://stackoverflow.com/questions/19913960/enqueue-wordpress-plugin-scripts-below-all-other-js/19914138#19914138

 

I hope this helps! :)

Link to comment
Share on other sites

This might have to do the way your assets are being loaded on the page. If all your scripts are being loaded in the head then you can set the last parameter in WordPress wp_enqueue ($in_footer) to be set to false. So it loads GSAP in the head and not the footer.

 

Where are you placing your custom GSAP javascript code? .. that should go in the footer or at the very least you cold always wrap your JS functions in a jQuery ready() method, to make sure your JS functions run after the DOM is ready.

 

But i would first make sure that JQuery and GSAP are being loaded in the page before your custom JS code runs in WordPress frontend.

 

I hope this helps! :)

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.

post-11523-0-36349100-1424134891_thumb.png

Link to comment
Share on other sites

  • Solution

First thing I would do is look at the frontend of your WordPress theme website. Open the browser console / inspector and check if jQuery and GSAP is being loaded in the head or the footer. And then make sure your custom JS is below that code.

You can also wrap your custom JS code in a jQuery ready() event to make sure your code will run after the DOM is ready. This way even if your code is not in the right place it should still run after the DOM is already ready and loaded.
:

// the DOM is ready and loaded
jQuery(document).ready(function(){

        // place custom JS here
        console.log("DOM ready");

        // window, links, and other assets loaded
        jQuery(window).on("load", function(){

              // or place custom JS here to make sure DOM is ready and the window is loaded
              console.log("window, links, and other assets loaded");
        
        });

});

:

I would also recommend looking into using the Firebug in Firefox or using Dev Tools in Chrome to better debug what scripts are being loaded, and in what order.

Firebug:
http://getfirebug.com/faq/
http://getfirebug.com/network
https://getfirebug.com/wiki/index.php/Net_Panel

Chrome Dev tools:
https://developer.chrome.com/devtools
https://developer.chrome.com/devtools/docs/console

WordPress Codex:
http://codex.wordpress.org/
http://codex.wordpress.org/Developer_Documentation

I hope this info helps.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...