Search the Community

Showing results for tags 'wordpress'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 30 results

  1. Gianluca Giurlando

    WordPress 5 integration

    Hi everyone, I`m completely new to GreenSock and I`d like to learn how to integrate it in WordPress 5. I'm working on a WP website and I'm developing my own child theme. I found an old forum post, dating back from 2016 and I`d like to know whether the instructions are still valid. According to that old post, the steps are: Add a functions.php file within my child theme to enqueue the JS script (my preference is to import it via the CDN link). Create a "custom scripts" directory within my child theme and save there my custom script (in the old post this file was called my custom-gsap-scripts.js Use the custom script file to run my tweens. Is this solution still valid and could someone post the actual code here? Many thanks in advance for your help, Gianluca
  2. pixeldroid

    Tutorial on Using GSAP in WordPress

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

    GSAP sitewide in WordPress?

    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!
  4. justjonny

    Looking for a remote Junior developer!

    I hope it's ok to post a remote job position here! We are a UK agency looking to employ a remote developer to add to our team to build websites that require Greensock animation. Also Wordpress on the backend. Initially we are looking at a 3 month engagement with a view to permanent. Drop me an email if you might be interested - jonny@kotacreative.co.uk
  5. I have this pen working and have added the code to WordPress. The SVG is appearing but not drawing. Sorry, I don't have a live example worked up yet. I've added all the code where it needs to go. There is an existing GSAP animation so I plugged in the JS in the same file, the CSS in the stylesheet, and the drawSVG plugin link where the Tweenmax link is. I've also added the CSSPlugin link, and am not sure if that is needed. I'm using the <path> element only. The SVG image code is placed in a WordPress text widget running the newest version of WP. Funny that the image will show on the front-end but when I navigate back to the text widget the SVG code does not remain in the text widget. When I inspect for the SVG, it's code is in the html, yet there is not JS error in the console. What could I be missing? Are there any known issues with WordPress and drawSVG?
  6. dilshan@jgsw.global

    DrawSVG not working on Wordpress

    Hi there, I just started using Greensock and I wanted to directly add them into my wordpress site. But I'm facing with a rather confusing issue. I have a simple DrawSVG code that needs to be rendered in a page which works perfectly with a plain HTML file and javascript HTML: <svg id="Rays" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="1080" viewBox="0 0 1920 1080"> <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?> <x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c138 79.159824, 2016/09/14-01:09:01 "> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <rdf:Description rdf:about=""/> </rdf:RDF> </x:xmpmeta> <?xpacket end="w"?></metadata> <defs> <style> .cls-1 { fill: none; stroke: #fff; stroke-width: 3.79px; fill-rule: evenodd; filter: url(#filter); } </style> <filter id="filter" x="493" y="-6" width="964" height="683" filterUnits="userSpaceOnUse"> <feGaussianBlur result="blur" stdDeviation="3" in="SourceAlpha"/> <feComposite result="composite"/> <feComposite result="composite-2"/> <feComposite result="composite-3"/> <feFlood result="flood" flood-color="#ffb64d" flood-opacity="0.35"/> <feComposite result="composite-4" operator="in" in2="composite-3"/> <feBlend result="blend" mode="screen" in2="SourceGraphic"/> <feBlend result="blend-2" in="SourceGraphic"/> <feFlood result="flood-2" flood-color="#ffba60"/> <feComposite result="composite-5" operator="in" in2="SourceGraphic"/> <feBlend result="blend-3" in2="blend-2"/> </filter> </defs> <g style="fill: none; filter: url(#filter)"> <path id="path1" class="cls-1" d="M506,4l691,656,246-221" style="stroke: #fff; filter: none; fill: inherit"/> </g> </svg> Javascript: jQuery(document).ready(function(){ var t1 = new TimelineMax({repeat:-1}); t1 .from("#path1",2 ,{drawSVG:0}); }); I included the necessary greensock files using "wp_register_script" and "wp_enqueue_script". I utilized visual composers Raw HTML and JS elements to define the above code. But the animation isnt happening and there is no error on the console either. Following are my enqueue scripts: wp_register_script( 'TweenMax', get_template_directory_uri() . '/greensock/TweenMax.min.js' ); wp_register_script( 'TimeLineMax', get_template_directory_uri() . '/greensock/TimelineMax.min.js' ); wp_register_script( 'DrawSVG', get_template_directory_uri() . '/greensock/plugins/DrawSVGPlugin.min.js' ); wp_enqueue_script( 'TweenMax' ); wp_enqueue_script( 'TimeLineMax' ); wp_enqueue_script( 'DrawSVG' ); Simple Tweens such as changing filter to inherit is working fine with the SVG but animations like MorphSVG and DrawSVG seems to do nothing. Am I doing anything wrong or am I missing something. Any help would be great! Thank you in advance!
  7. itforyourneeds

    AnimateWP - Wordpress animations based on GSAP

    Hello fellow animators, if you were previously looking on how to integrate Greensock into a WordPress Website, you have come to the right place. Today we launched AnimateWP, a WordPress animation plugin which is completely based on Greensock. You get the whole power of Greensock animations (browser compatibility, performance, advanced sequencing and all the other great features) without writing a single line of code. The plugin takes care of everything while you implement your timelines and animations on the graphical interface in the WordPress backend. Currently we have implemented almost every property you can animate with GSAP and are already working on implementing the powerful Club Greensock Plugins (like ScrambleText, SplitText and others) in the near future. DrawSVG is already available in AnimateWP. Moreover AnimateWP allows you to trigger and control your animations by scrolling. Therefore you don't have to worry about including ScrollMagic anymore. Check it out on animatewp.yourneeds.at or explore the docs.
  8. Hello, I am having a couple of issues, the first being a slight flicker on load of the homepage, before the animation kicks in, it flickers a preview of the page: http://2017.hypemarketing.uk. My second issue is more serious, on my mobile, Android - Chrome V. 56.0.2924.87 the animation seems to lag incredibly, and almost stops my mobile browser working, could someone help me figure out how to make this smooth. Any and all assistance would be greatly appreciated, my code is below. jQuery(document).ready(function($) { // Scroll Magic Controller var frontPageAnim_Controller = new ScrollMagic.Controller(); //Scroll Magic Controller // Animation vars var htmlContainer = $('html'), body = $('body'), viewPort = $(window).height(), // Height of viewport heroSection = $('.hero-section'), panelClickthroughs = $('.panel-clickthroughs'), portfolioPanels = $('.portfolio-panel'), portfolioSection = $('.portfolio-section'), socialSection = $('.social-section'), scrollDown = $('.scroll-down'), scrollDownArrow = $('.scroll-down i') header = $('header'), heroContent = $('.hero-content'), logoContainer = $('.logo-container'), logo = $('#hype-logo'), letter = $('.letter'), letterFill = $('.letter_fill'), logoBorderBottom = CSSRulePlugin.getRule(".logo-container:after"), overlayMenu = $("#overlay-menu"), listItemsOverlay = $("#overlay-menu #primaryMenu ul li"), heroBackground = CSSRulePlugin.getRule(".hero-panel:before"); var fadeSlogan = function () { TweenMax.to(header, 1, { y: 0, autoAlpha: 1 }); TweenMax.to(heroContent, 1, { y: 0, autoAlpha: 1 }); TweenMax.to(scrollDown, 1, { y: 0, autoAlpha: 1 }); }; function urlChecker() { if( window.location.href =="http://2017.hypemarketing.uk/" ) { var otherAnimations = new TimelineMax({ immediateRender: true }); // Start New timeline for all other animations otherAnimations .set(heroBackground, { opacity: 1 }) //has been set in css to remove skip .set(logo, {visibility:"visible"}) .set(letterFill, {visibility:"hidden"}) .set(header, {y: -80, force3D:"auto", autoAlpha: 0, ease: Power2.easeIn }) .set(heroContent, {y: -15, force3D:"auto", autoAlpha: 0, ease: Power2.easeIn }) .set(scrollDown, {y: 30, force3D:"auto", autoAlpha: 0, ease: Power2.easeIn }); } else { //Do nothing } } urlChecker(); // TweenMax Timelines var timelineHero = new TimelineMax({ immediateRender: true }); // Start New timeline for Hero Section & Portfolio var entranceAnim = new TimelineMax({ immediateRender: true }); // Start New timeline for Entrance Anim timelineHero .set(heroSection, { top: 0, position: 'absolute', force3D:"auto" }) .to(heroSection, 0.4, { top: -viewPort, opacity: 0, ease: Power2.easeInOut }); // Animation for timelineHero entranceAnim .set(logoBorderBottom, { ease: Power2.easeOut, force3D:"auto" }) .set(letter, {fill:"none", force3D:"auto", stroke: "00ffbc", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round"}) .fromTo(letter, 3, {drawSVG:0}, {drawSVG:"102%"}, 0) //now animate the logo strokes (note we use "102% as FireFox 34 miscalculates the length of a few strokes) .fromTo(logoBorderBottom, 3, { width: 0 }, { width: 100 + "%" }, 0) //draw out the load under hype .to(letterFill, 1, {autoAlpha:1, ease:Linear.easeNone}) //fade in the real logo and the rest of the text .to(letter, 1, { stroke: "ffffff;", ease:Linear.easeNone }) //fade the stroke to white .to(heroBackground, 3, { opacity: 0.9, ease: Power1.easeIn, onComplete: fadeSlogan }, 0.3); //fade the background // Scroll Magic Scenes var heroAnimation = new ScrollMagic.Scene({ triggerElement: heroSection, triggerHook: 0, duration: 1 }).setPin(heroSection).setTween(timelineHero).addTo(frontPageAnim_Controller); // ScrollMagic Scene for Hero Section var portfolioSectionAnimation = new ScrollMagic.Scene({ duration: viewPort/2 }).setPin('.portfolio-section', { pushFollowers: true }).addTo(frontPageAnim_Controller); // ScrollMagic Scene for Portfolio Section // Scroll Down Button Begin TweenMax.set(scrollDownArrow, { transform: 'translateY(0)' }); TweenMax.to(scrollDownArrow, 1, { autoAlpha: 0, repeat: -1, transform: 'translateY(10px)' }); scrollDown.click(function(){ TweenLite.to(window, 0, {scrollTo:1}); // Scrolls 1px on scroll to initiate the Hero Section sliding out }); // Scroll Down Button End });
  9. 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>
  10. adbites

    GSAP in Wordpress

    After 4 hours of trying to get GSAP running on a Wordpress site I have to ask for help. Whenever I used GSAP in the past I called the needed js files in the footer. The new project by a friend of mine has all the js files enqueued in the functions php. I just added TweenMax and my customs.js. Both of them are self hosted and not called via cdn. I see no error messages and GSAP and my custom script seem to get loaded well. However, the animations are not played in the frontend and I guess I made something wrong. This is how the scripts are enqueued via functions.php: /** * Load site scripts. */ function bootstrap_theme_enqueue_scripts() { $template_url = get_template_directory_uri(); // jQuery. // if (!is_admin()) //{ // wp_deregister_script('jquery'); // Load a copy of jQuery from the Google API CDN // The last parameter set to TRUE states that it should be loaded // in the footer. //wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js', FALSE, '1.12.4', TRUE); // wp_enqueue_script('jquery'); // } // Bootstrap wp_enqueue_script( 'bootstrap-script', $template_url . '/js/bootstrap.min.js', array( 'jquery' ), null, true ); wp_enqueue_script( 'font-awesome', 'https://use.fontawesome.com/5d03a56eda.js', array(), null, true ); wp_enqueue_script( 'wow', $template_url . '/js/wow.min.js', array( 'jquery' ), null, true ); //wp_enqueue_script( 'js-cookie', $template_url . '/js/js.cookie.min.js', array(), null, true ); wp_enqueue_script( 'js-functions', $template_url . '/js/functions.js', array( 'jquery' ), null, true ); wp_enqueue_script( 'gsap-js', $template_url . '/js/TweenMax.min.js', array(), false, true ); wp_enqueue_script( 'css-plugin', $template_url . '/js/CSSPlugin.min.js', array(), false, true ); wp_enqueue_script( 'split-text', $template_url . '/js/SplitText.min.js', array(), false, true ); wp_enqueue_script( 'draw-svg', $template_url . '/js/DrawSVGPlugin.min.js', array(), false, true ); wp_enqueue_script( 'custom-gs', $template_url . '/js/customgs.js', array(), false, true ); if ( is_single() ) { // Carousel wp_enqueue_script( 'jcarousel-script', $template_url . '/js/jquery.jcarousel.js', array( 'jquery' ), null, true ); wp_enqueue_script( 'jcarousel-responsive', $template_url . '/js/jcarousel.responsive.js', array( 'jquery' ), null, true ); } wp_enqueue_style( 'bootstrap-style', $template_url . '/css/bootstrap.min.css' ); wp_enqueue_style( 'animate-style', $template_url . '/css/animate.css' ); //wp_enqueue_style( 'ihover-style', $template_url . '/css/ihover.min.css' ); //Main Style wp_enqueue_style( 'main-style', get_stylesheet_uri() ); // Load Thread comments WordPress script. //if ( is_singular() && get_option( 'thread_comments' ) ) { // wp_enqueue_script( 'comment-reply' ); //} } add_action( 'wp_enqueue_scripts', 'bootstrap_theme_enqueue_scripts', 1 ); And this is my timeline in my customgs.js jQuery(document).ready(function($) { var $slidehead = $('.socialicons'), tl = new TimelineLite(); tl.set(".socialicons", {visibility:"visible"}) .from($slidehead, 2.5, {scale:0.2, autoAlpha: 0, ease:Back.easeIn}); }); Any help is welcome. Thank's in advance and greetings from a german GSAP noob
  11. ericshew

    Illustrator SVG Wordpress workflows

    Hi there, I've spent an hour or two looking at the documentation and the forum and I'm excited by what I'm seeing. I'm a designer who would like to develop an efficient workflow for working with Wordpress and Illustrator. in time, I would like to use to use CC Animate. In my ideal world, my workflow would be something like: Develop my SVGs in Illustrator in separate artboards, using a combination of symbols and non symbols Export them using the new export screens feature Import the SVGs onto a server via FTP (not using Wordpress media import feature) Be able to manipulate SVGs using Jquery, GSAP, and CSS I'm pretty good about learning technical processes, but I'm more of a designer than a developer. The SVG gotchas post was helpful but I'm hoping for a less high maintenance revision process. I understand that this workflow is probably not realisitic at this point, but I'm hoping people can give me some ideas on resources I can use to develop something that works. Thanks in advance for your help,
  12. shailendra.khandewale

    Wordpress Integration

    Hi Guys , This is my first time using Tween. I need help with integration of Tween inside my WordPress Theme. I have already necessary js files using wp_enqueue_script inside function.php. But I am confused how and where to use and wrrite scrips such as <script> TweenMax.from( $('#title-line3 .char1'), .25+Math.random(), {css:{top: '-200px', right:'1000px'}, ease:Elastic.easeOut}), or any tweens. </script>
  13. Dr Fingerless

    Greensock works on one page but not the other!

    Here's a curious thing. I am fairly new to Greensock but loving it as much as most others seem to. I have created an animated cartoon sequence which works well when tested offline. I embedded all the HTML, JS and CSS into one of my Wordpress sites on a test page and it works beautifully. You can see it in action here - Test page. But once that page tested well, I put it into its proper location on the homepage (about half way down the page at www.schoolkit.org.au) and low and behold it fails! Well sort of... You will see that it seems to load well and you can click on the Start button, but then you notice other layers of content appearing and the animation controls become dysfunctional. When I check the console I see the following errors in TweenMax.min.js of 'TypeError: g is undefined' repeating themselves. Also '11TweenMax.min.js:14 Uncaught TypeError: Cannot read property 'length' of undefined'. I am a little unsure of myself with Javascript to be able to troubleshoot this. Does anyone have any suggestions for why this animation works on one page and not on another? For the benefit of Wordpress users I have deactivated all my plugins to check for compatibility issues but no improvement. Any genius's out there with some ideas? If anyone would like to see the code in codepen I will set it up but not sure if that is necessary. The code seems to be good. It's something else...
  14. mockingbird

    Help

    Hi Guys totally new here, just signed up. I am looking for a starting point (document) link to get me started in using this in WordPress.
  15. DeeDubs

    GSAP, ScrollMagic & WordPress

    Hi There, Im not sure if this is strictly a GSAP issue as I don't quite where the problem lies. I am trying to make use of a little GSAP/ScrollMagic on a Wordpress site but it keeps throwing an error. It is a custom theme I am making so shouldn't be other script conflicts as it is very minimal build so far. I am enqueue the scripts in my functions file like: function my_theme_scripts_function() { wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js',array(), false, true ); wp_enqueue_script( 'scrollmagic-js', 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js', array(), false, true ); wp_enqueue_script( 'myscript', get_template_directory_uri() . '/js/scripts.js', array(), false, true); } add_action('wp_enqueue_scripts','my_theme_scripts_function'); then just for testing have tried using the below in my scripts file: var controller = new ScrollMagic.Controller(); var myTest = new ScrollMagic.Scene({duration: 200}) .triggerElement('#hero1') .setTween(testTween) .addIndicators() .addTo(controller); but I keep getting the same error: scripts.js?ver=4.5.3:33 Uncaught TypeError: (intermediate value).triggerElement(...).setTween... is not a function any ideas ?I have checked in console log and GSAP is loaded, I have tried adusting the code adding jquery or gsap-js dependencies, I have tried the links with and without https and http, and nothing seems to make any difference. Am I missing something obvious?(I realise I could just try linking to them in the head of the document but I would rather try and load them in the "correct" way if possible) Cheers D
  16. I am trying to use Morph and split text on a wordpress site that uses a picky theme. How would I get GSAP working on my wordpress site? Thank you! -John
  17. Hi to all in this forum, Sorry for writing so much text, but being a newbee with GSAP, I decided to describe all my steps in order other users could find at which step I was wrong. Thanks. I. Prehistory: Recently I happily grabbed some nice code from Crysto's website and Petr's blog for my text animation purposes (wow, wrapping each element into <span> with jQuery and passing it to TweenMax is just magic !!!) After diving into code dependencies, I understood (hopefully) that <div> with animated text should have css markup (id) like #gsap-anim-text-1 with position:relative and #gsap-anim-text-1 <span> with position:relative and display:inline-block, for this jQuery script to work properly: var $demoText = $("#gsap-anim-text-1"); $demoText.html( $demoText.html().replace(/./g, "<span>$&</span>").replace(/\s/g, " ")); And for TweenMax to be able to process jQuery's job with staggerFromTo method (everything like Crysto's manual says). II. WordPress integration It worked for me at Codepen test environment, also it worked at the next step - when I tried to integrate TweenMax text animation into WordPress theme: in header.php, when DOM is loaded, TweenMax.min.js (v1.18.2) and executing JQuery script placed and sequentialy initiated after wp_head() right before </header>. note: I updated WP 4.3.3 jquery core to v1.12.2, in order not to load jquery twice, neither through functions.php nor header.php, that's why I placed TweenMax.min.js and and executing jQuery script right after wp_head(), and yes jQuery v1.12.2 for older browser support. It worked when primary text and it's markup were created using standard WP post editor. It even worked when I added #gsap-anim-text-1, #gsap-anim-text-1 <span> and button properties to existing theme css (including # at the begining of a row in css, where required) and cept it the same in jQuery variables: var $demoText = $("#gsap-anim-text-1"); But, it all worked only as long as primary text and it's markup were manualy typed into text fields and saved (e.g. were static) III. Issues: To save time, and avoid typing css properties each time I write a post or create a wordpress page (but still get required output animation at pageload, and when in viewport or hovered)... I decided to add new variables into jQuery script, and css attributes (id's) of #post-title-text to post title, #gsap-anim-text-1 to post content and #gsap-anim-text-2 to post excerpt, with corresponding <span> attributes and different TweenMax effects. 3.1 On the one way, I decided manualy add attributes to certain page elements (php function generated text) by editing theme stylesheet, and adding coresponding variable #id's after existing classes in index.php, page.php, footer.php and content.php (the same way as I used to manipulate classes when using animate.css and hover.css). In that case, I got unexpected results: some page element animations just didn't work, others did, but with <span>'s being visible during TweenMax text animation. I tried to fix that by creating overspecified id's in stylesheet, like h1#gsap-anim-text-1 and h1#gsap-anim-text-1 <span> with required position and display attributes, but it didn't help... animation just stoped working. 3.2 On the other hand, I've been wondering if there is a way to omit theme stylesheet and get the job done jQuery way ? [because some WP themes do not add css markup to php_function_text generated by entire WP core, thus I can't manipulate it with theme stylesheet] Lets say: detect and predefine php function which generates text (or predefine a list of php functions we want to animate with a variable) e.g. : var $demoText = $(" <?php printf( __( 'Published by <a href="%2$s">%1$s</a> on <time>%3$s</time>', 'theme' ), get_the_author(), get_author_posts_url(get_the_author_meta( 'ID' )), get_the_time( get_option( 'date_format' ) ) ); ?>) "); wrap it into additional <div> with jQuery generated class and id (with attributes required for TweenMax animation to work), and then pull it to jQuery script from Crysto's manual for final TweenMax text animation to work with no <span>'s being visible, and with no calls to theme stylesheet. Well, on the way to this, I've found some code : var e = $('<div style="display:inline-block; position:relative"></div>'); $('#gsap-anim-text-1').append(e); e.attr('id', 'myid'); and some additional code: $(document).ready(function(){ $("div").each( function(i){ $(this).attr({ id: $(this).attr("id") + " num_" + ++i }); }) }); but... I have no idea how to put this all to work. P.S. - here is my WordPress playground with issue being visible: class="post-meta" somewhy animated with markup being visible (unwanted issue).
  18. rico

    Greensock JS with Wordpress

    Hi everyone, Could someone please give me a quick idiots guide to using greensock JS in wordpress. Many thanks in advance, I look forward to some replies.
  19. Hi there, I just started to work with GSAP and I made my first animated SVG. I developed everything local and now I wanted to integrate it in my WordPress site. The inline SVG has round about 1000 lines and wordpess some how struggles with this much lines. The result is that the svg looks broken and parts of it are missing. So I integrated the svg with <object></object> now it looks proper. I also enqueued all scripts but the animation is just not starting. In the console I can't see any errors related to this. Any of you more experienced guys may have a look at my work? I hope you can see what I did wrong on a glance! Here is the link Some background information: I use a caching plugin and a CDN but allready tried it without caching and CDN... no result. Thanks in advance!
  20. josealvin

    Wordpress Deep Linking Sliding page

    What tool I can use to create something like this http://www.buildinamsterdam.com? I checked the website and its made in Green Sock. The slide is easy to create but the deep linking is hard, it also using Wordpress.
  21. kathryn.crawford

    Greensock in wordpress

    Hey guys, I built a few webpages and was using tweenmax to animate some stuff. I recently bought a license so I could use morphsvg and I am loading those in to that local site and it's working great. Here's what I am loading. <!-- Modernizr (feature detection) --> <script src="js/modernizr.js"></script> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <!--TweenMax--> <script src="js/tweenmax.js"></script> <!--MorphSVG plugin--> <script src="js/plugins/morphsvgplugin.js"></script> <!-- Latest compiled and minified Bootstrap JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <!-- My scripts --> <script src="js/scripts.js"></script> Now we are moving the site to wordpress and so I am having to enqueue the files into wordpress. We were enqueue-ing greensock through the cdn originally and it worked great. Now that I have switched it to local js files it is broken, saying Tweenmax is undefined. I suspect something is wrong with what I am loading, or the order I am loading it in, but I can't seem to figure it out. Is there anything special I should do for wordpress? Here's my enqueue loading order. wp_enqueue_script( 'blueleaf-bootstrap-js', THEME_DIRECTORY . '/js/bootstrap.min.js', array('jquery'), '3.3.5',true ); wp_enqueue_script( 'blueleaf-navigation', THEME_DIRECTORY . '/js/navigation.js', array(), '20120206', true ); wp_enqueue_script( 'blueleaf-jquery-js', THEME_DIRECTORY . '/js/greensock/jquery.gsap.js', '0.1.12'); wp_enqueue_script( 'blueleaf-greensock-js', THEME_DIRECTORY . '/js/greensock/timelinemax.js', '1.8.1'); wp_enqueue_script( 'blueleaf-easing-js', THEME_DIRECTORY . '/js/greensock/easing/easepack.js', '0.8.0'); wp_enqueue_script( 'blueleaf-morphsvg-js', THEME_DIRECTORY . '/js/greensock/plugins/morphsvgplugin.js', '0.8.0'); wp_enqueue_script( 'blueleaf-scripts', THEME_DIRECTORY . '/js/scripts.js' ); wp_enqueue_script( 'blueleaf-modernizr', THEME_DIRECTORY . '/js/modernizr.js', '3.2.0' );
  22. Hello All, I successfully created a self contained SVG ad banner with Tween Max as per Chris Gannon's fantastic tutorial https://www.youtube.com/watch?v=S6P_N2JWSrc (Thanks Chris!) My test works in the browser but not in WordPress. Has anyone found a way to get WordPress to play nice with self contained SVGs? This would be an ideal way to deliver ads to WordPress clients without needing to supply all dependencies. Thanks. Janet
  23. I'm used to using flash to create an array, but I cant get my head around this. so far I have this working ( I finaly have tweenmax working in wordpress, but thats conversation for another day ) any help would be greatly appreciated ! thanks <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script><script> jQuery(document).ready(function() { var whorolls = ["#movmystuff1", "#movmystuff2", "#movmystuff3", "#movmystuff4"]; document.getElementById("whorolls").addEventListener('mouseover', btnHandler, false); var rotation = 0; function btnHandler(e) { TweenMax.to("whorolls", 2, { scale: 1.2, ease: Power4.easeOut}); } }); </script>
  24. Lauran999

    ReferenceError: TweenMax is not defined

    Dear All, I am using the Avada theme + ScrollMagic, but I get this following error in the console in Firefox: ReferenceError: TweenMax is not defined In the theme's functions.php I am trying to enqueue the scripts and add/delete dependencies, but I still can't get it to work: wp_enqueue_script( 'jquery', false, array(), $theme_info->get( 'Version' ), true ); //LAURAN BEGIN//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// //wp_deregister_script( 'TweenMaxMin' ); wp_register_script( 'TweenMaxMin', $template_directory . '/assets/js/1lauran/TweenMax.min.js', array(), $theme_info->get( 'Version' ), true ); wp_enqueue_script( 'TweenMaxMin' ); //wp_deregister_script( 'ScrollMagic' ); wp_register_script( 'ScrollMagic', $template_directory . '/assets/js/1lauran/ScrollMagic.js', array(), $theme_info->get( 'Version' ), true ); wp_enqueue_script( 'ScrollMagic' ); //wp_deregister_script( 'animationGsap' ); wp_register_script( 'animationGsap', $template_directory . '/assets/js/1lauran/plugins/animation.gsap.js', array(), $theme_info->get( 'Version' ), true ); wp_enqueue_script( 'animationGsap' ); //wp_deregister_script( 'debugAddIndicators' ); wp_register_script( 'debugAddIndicators', $template_directory . '/assets/js/1lauran/plugins/debug.addIndicators.js', array(), $theme_info->get( 'Version' ), true ); wp_enqueue_script( 'debugAddIndicators' ); //wp_deregister_script( 'lauranScrollMagic' ); wp_register_script( 'lauranScrollMagic', $template_directory . '/assets/js/1lauran/lauranScrollMagic1.js', array(), $theme_info->get( 'Version' ), true ); wp_enqueue_script( 'lauranScrollMagic' ); //LAURAN EINDE///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// And this is my script: //jQuery(document).ready(function($){ 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"); var images = [ "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_01.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_02.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_03.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_04.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_05.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_06.png", "http://blabla.com/wp-content/themes/Avada/img/example_imagesequence_07.png" ]; // TweenMax can tween any property of any object. We use this object to cycle through the array var obj = {curImg: 0}; // init controller // create tween var tween = TweenMax.to(obj, 0.5, { curImg: images.length - 1, // animate propery curImg to number of images roundProps: "curImg", // only integers so it can be used as an array index repeat: 3, // repeat 3 times immediateRender: true, // load first image automatically ease: Linear.easeNone, // show every image the same ammount of time onUpdate: function () { $("#myimg").attr("src", images[obj.curImg]); // set the image source } } ); var controller = new ScrollMagic.Controller({loglevel: 3}); // build scene var scene1 = new ScrollMagic.Scene({triggerElement: "#imagesequence", duration: 220}) .setTween(tween) .addIndicators() // add indicators (requires plugin) .addTo(controller); var scene2 = new ScrollMagic.Scene({triggerElement: ".box2"}) .setTween("#animate1", 0.5, {backgroundColor: "green", scale: 2.0}) // trigger a TweenMax.to tween .addIndicators({name: "1 (duration: 0)"}) // add indicators (requires plugin) .addTo(controller); var scene3 = new ScrollMagic.Scene({triggerElement: '#containerLauran',duration: 300}) .setPin('#blockLauran') .addIndicators() .addTo(controller); var scene4 = new ScrollMagic.Scene({triggerElement: '#containerLauran2',duration: 200}) .setPin('#blockLauran2') .addIndicators() .addTo(controller); }); }); All scripts seem to have been added/enqueued correctly if I check the html structure with the Firefox inspector. All scripts are added in the right order as enqueued in the functions.php file of the WP-theme. Can someone help me out? It looks like if I am almost there... Thanks! Lauran
  25. add_action( 'wp_enqueue_scripts', 'centric_enqueue_home_scripts' ); /** * Enqueue Scripts */ function centric_enqueue_home_scripts() { wp_enqueue_script( 'homeintro', get_stylesheet_directory_uri() . '/js/homeintro.js', array( 'jquery' ), '1.0.0', true ); } Here's what I have for enqueueing the the javascript. I am using a Genesis theme and have installed the following in the theme setting's wp footer: <!--CDN link for the latest TweenMax--> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>