However while in WordPress the text box I am targeting to fade in always displays for a quick moment before the GSAP kicks in and tells it to go invisible and then fade in. I get can the animation to tween correctly in CodePen. So everything in my code seems to be correct, no errors, very very simple. However, as a good rule of thumb, it never hurts to learn how to do something manually before switching to the automated process.This is the same problem I ran into the last time I tried to do intro animation on a WordPress site, I would love to get over this hurdle quickly as it seems like it should be a simple thing but nobody mentioned it. Sure, there are more steps required to this than just clicking a plugin, uploading an animation deployment package, and then sticking in some shortcode. Open up your browser, fire up your site, and if everything was done properly, you’ll have your animation seamlessly nestled within your web page. Save this file and upload it to the server.Īt this point, you’ve taken all of the necessary steps to add your designer-friendly Edge Animate production to your WordPress site. Near the very bottom of this file, you’ll see a reference to “images/yourfallbackimage.jpg”. (note: if you have a fallback image set for your project for users who are unable to view your animations, you’ll need to change that image reference within this file as well. Open up your functions.php file and insert the following code: We’ll look to provide a tutorial for that in the near future. ![]() ![]() Adobe Edge 2014.1, which at the time of updating this article is the most recent version, exports its deployment files differently than Adobe Edge 2014. Updates are particularly common with Edge and each iteration seems to carry significant changes in terms of how files are outputted. Even though Edge has been around for a few years, it’s still considered new in that it’s a constant work in progress. The following code has been updated to work with WordPress version 4.0 and Adobe Edge Animate 2014. Whenever adding scripts to a WordPress site, it’s best to do so using the “enqueue” function so as to avoid any potential coding conflicts on the site. The files can technically go wherever you’d like them to, but for the sake of organization, I recommend keeping them in a separate folder. You’ll basically be picking out the various elements from this file and integrating them into the relevant WordPress files)Ĭreate a folder called “edge” in the root directory of your theme and upload all of your files to it. banner.html (This is a standard html file that brings together the code needed to make the animation work.Folder called images ( surprisingly, this is where you’ll find your images).Folder called edge_includes (Within this folder, you’ll find all the required Jquery core files.When you publish your animate file which in this case will be called “banner”, the program will pop out the following items: With that said, onward to the good stuff. You can call me old fashion, but I favor the hands on approach at least once when integrating code. The plugin itself has great reviews but one thing they are upfront about is that it’s still in its developmental stages and that a full site backup is recommended. I’ve included the link here for those of you who’d rather skip this article and go that route. That’s probably because there’s an existing plugin that does this for you already. I was actually surprised by how little was out there on the net concerning this topic. Instead, in this post I’ll walking you through the process of manually integrating your custom Edge animation into the highly popular content management platform of WordPress. This particular article won’t be teaching you how to use the software although those tutorials may be forthcoming. Having spent extensive time with the software, I can say that it’s awesome (that’s an official review by the way.) ![]() If you have any previous experience with Flash, you’ll feel right at home with its familiar user interface. Animations that would normally take hours to construct with endless lines of code, can now be done visually and intuitively in a matter of minutes. Of course, it always helps to know underlying programming language but it’s not required in this case to make text move across the screen in impressive fashion. ![]() I’ll be the first to admit that I’m a proud member of the latter.Īdobe Edge Animate is a powerful tool that allows designers to crank out interactive web animations without needing any knowledge of the Jquery back-bone that drives them. The ones that prefer to animate using pure code and the ones that don’t.
0 Comments
Leave a Reply. |