ijwebbdesign

Hi again, I still have some questions about where and how to place Greensock-material on a Wordpress-site. Backgroundinformation: My svg-animation use one js-file called "animation.js" and one css-file called "animation.css". I use the SVG-support-plugin in Wordpress so I can store svg-images in my media library and style svg-elements using css. The svg-image for the animation is embedded on a Wordpress-page (not in a blog post) and I use the "style-svg"-class in SVG-support-plugin so the svg-image will be rendered as an inline svg, rather than an IMG-tag. The "animation.js"-file consists of tweenMaxLite, Morph SVG-plugin, Draw SVG-plugin and some specific code for the animation. My questions are: 1) Where in Wordpress do I place the "animation.js" and "animation.css" files? 2) Do I have to write some extra code on the Wordpress-page where the svg-image/animation is placed? 3) Since Wordpress use and automatically loads jQuery. Do I still need to add some jQuery-script so Greensock will work properly? Ingemar Jönsson Sweden

Hi Carl, For now my Purpose is to let the animation run in a blog post. But maybe in the future I want to integrate GSAP in a theme, because I like the animation-platform and there is a lots of potential to create great stuff with GSAP. Have a nice day

Hi Greensock, My question is how and where do I insert Greensock-material on a Wordpress-Page? I have created a SVG-animation that works perfect and placed it in a html-file and now I want to transfer the animation-material to a Wordpress-page. The animation use following scripts: jquery-2.1.3.min.js TweenMax.min.js MorphSVGPlugin.min.js DrawSVGPlugin.min.js demo5.js (this is where I have placed the animation-code) CSS-material demo5.css jquery-ui.css Where in Wordpress do I put all this files? Best regards Ingemar Jönsson Sweden

Hi Carl, Thanks for great support. I must say that Greensock's customer support really has impressed me . What I ment with the "complete" animation was that the two element from my codepen example was just two of the many others elements from my "complete" animation on my website. I just choose those two elements to illustrate the Safari issues and skipped the others just for simplify the codepen example. Have a nice day.

The code example I got from you works good in Safari. no FOUC at all. It's a little different story with the "complete" animation on my webpage, there still is some FOUC in Safari. But maybe this is because there's a lot more code for Safari to read, and it becomes a bit overwhelming for the browser the read that amount of code a once? I would appreciate if you could give me some general advice about filestructure when there is a lot of Greensock material on a webpage. For example, which is the best way/order to load the scripts (jQuery, Tweenmax, SplitText etc, etc) to the webpage? Shall I have separates files for the animation? For example one animation.css and one animation.js? Is there some documentation I can read about how to optimize the animationcode and filestructure for different browsers? I know this is a pretty unspecified question. But some general tips and advice would be very appreciated.

Ok, I see. FOUC seams to be be the problem. I tried your solution (both in the container and in body) and maybe there is a slightly improvement. But the elements still flashes up and then they disappears in Safari.

Here is a CodePen demo. I have tried to simplify the code as much possible. When I press the refresh-button in Safari both div #iBody and div #jBody is visible in the upper left corner of div #demo7 for a short while, then they disappear (this happens to all the other elements in the animation as well). http://codepen.io/anon/pen/jEjrdX

Unfortunately, the css visibility: hidden didn't solved the problem with Safari. The animation still works perfect in Google Chrome and Firefox. So my conclusion is that this phenomenon must have something to do with how Safari load the animation-files...

Hi, Yes, thats must be the case. I will go for the css "visibility: hidden" - concept. Have a nice day!

Hi Carl, Thanks for your advice. I skipped the Math:random-concept and went for a looped animation with an animation for each element. In the end it gave the same result I was aiming for. I have a question about web-browsers, in particular Safari. When I press the refresh-button in Google Chrome and in Firefox. The elements acts the same way (they way I want them to act). Some of them are invisible and others are placed outside the main div. This is not the case when it comes to Safari. When i press the refresh-button in Safari the elements are visible and placed in the upper left corner of the main div for a short while (a little longer on my iPad compared to my Macbook though). Then the elements turns invisible and are placed at their given X & Y coordinates. Is this a common phenomenon for Safari? If so, is there a way around it? Does Safari read the scrips in a different order compared to Google Chrome and Firefox? Best regards Ingemar

Hi Greensock! I have some problem with creating a timelineMax-animation that got some random elements. The animation consists of three types of air-bubbles (smallBubble, mediumBubble and largeBubble). The idea is that the bubbles shall go from the bottom to the top (y:500 to y:-30) the whole time. But the x-value shall be a randomized value between 1 and 730. I have tried with Math:random, but it does not work correct for some reason. The other part of my question is how to create randomized order of the bubbletype (smallBubble, mediumBubble and largeBubble). So it not will be the same order that repeats in the animation, like: smallBubble, mediumBubble, largeBubble, smallBubble, mediumBubble, largeBubble, smallBubble, mediumBubble, largeBubble, etc etc. I guess I shall use Math:random in some in this case as well. So, how do I create a randomized x-value and a randomized order of the bubbletype? Thanks in advance. Ingemar Sweden

Thanks Blake! Now my animation works perfect.

Hi Carl, Ok, I understand. If you take a look at Blake's Codepen, you will easily that when you move the sliders playhead to to beginning of the animation when the animation is running. Then the play/pause-button will automatically go from "pause" to "play". So the animation will be running and at the same time the play/pause-button will be saying "play", instead of "pause". So the button is mysteriously changing in the Codepen-example as well. So maybe the answer to the buttonmystery can be found in Blake's Codepen? Have a nice day guys!

http://codepen.io/anon/pen/zxEmJz Hi OSUblake, I took all your code from your Codepen and then put them in three separate files ("greensocksupport.html", "greensocksupport.css" and "greensocksupprt.js") and then tested them without adding any code from my project, except from a jQuery file for my slider (more of that later on). This was how I found out about the new button-issue. What I found a bit interesting is the difference between how your code in the Codepen works compared to the same code in the three separate files ("greensocksupport.html", "greensocksupport.css" and "greensocksupprt.js"). Here is the difference: If I move the playhead in the animation that consist of the three separate files. Then the button immediately goes from "pause" to "play". I't doesn't matter how long the animation has played, or where i drag the slider. This isn't the case with your code on the Codepen-site. Here I have to drag the slider to the beginning of the animation. Then the button goes from "pause" to "play", even if the animation is running. As I mention earlier I'm using a jquery-ui.css file for the slider. Maybe this file create some trouble? I have passed in that code in the css-part in the new Codepen under the comment "jquery-ui.css. I'm testing the animations in Google Chrome. I'm not so sure how to add the logic in the slider-function that you mentioned. Can you help me with that? Thanks in advance.

Hi again! My animation works a lot better now (I have used exactly the same code that I got from OUSblake), but I found a new issue between the slider and the play/pause-button. If I move the sliders playhead when the animation is running. Then the play/pause-button for some reason change from "pause" to "play". So the problem is that the play/pause-button say "play", even if the animation is running. I would be perfect if the interaction between the play/pause-button and the slider works the same way as the Youtube- and Spotify-slider.

Hi again! My animation works a lot better now, but I found a new issue between the slider and the play/pause-button. If I move the sliders playhead when the animation is running. Then the play/pause-button for some reason change from "pause" to "play". So the problem is that the play/pause-button say "play", even if the animation is running. I would be perfect if the interaction between the play/pause-button and the slider works the same way as the Youtube- and Spotify-slider.

Thanks! I´m new to the Greensock community. But I will say that i'm very impressed with your customer support so far! Best regards! Ingemar

Hi Greensock! I have created an animation that include a slider that control the timeline. The animation also include a play/pause button for the timeline. The animation almost works perfect, except a minor detail. The problem is that if I pause the animation with the button and then move the sliders playhead the animation will automatically start. I want that the animation stays paused, even if the sliders playhead is moved. I wan´t that my timeline-slider works the same way as the Youtube-slider. (I have used the same slider as the one in the Greensock homepage animation.) How do I solved the conflict between the slider and the play/paus button? Thanks in advance. Ingemar

Thanks Jamie! Now the code works perfect.

Hi Greensock! I wan't to use a master timeline where I can put in nested timelines. The same way it works in "Greensock homepage Animation". I have chosen TimelineMax for the mastertimeline (called "master") and Timelinelite for the nested timelines. The nested timelines have I placed in functions. So it will be easier to adjust things when complexity of the animation increase. The problem is that the chaining doesn't work in the mastertimeline. All the functions starts at the same time, or doesn't start at all. There also seams to be some problem how to add the functions to the mastertimeline called "master". If I write: master.add(logo()) .add(logo2()) .add(logo3()); Only the logo-function is executed. If I write: master.add(logo) .add(logo2) .add(logo3); All the functions are executed at the same time. *I use jQuery $(document).ready(function(){}); Can someone please help me? Best regards Ingemar Sweden