Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

Everything posted by DeltaFrog

  1. In an effort to illuminate the path for those who wish to pursue integrating GS with Wordpress I will place what I found about the issue I faced here. Firefox Specific CSS was needed to achieve the desired parallax results. http://hematogenix.flywheelsites.com/company/ This breaks in Firefox .background-inner { background-repeat: no-repeat; background-position: center top; background-attachment: fixed; background-size: cover; transform: matrix(1, 0, 0, 1, 2.875, 0); } This works in Firefox @-moz-document url-prefix() { .background-inner { background-repeat: no-repeat !important; background-position: center top !important; position: fixed !important; background-size: auto!important; } }
  2. Thanks Elegantseagulls, I removed a few unused .js files as well as the extra call for TimelineMax. I am no longer seeing the console errors in ether browser. I also moved the inline javascript and placed it below where I am loading TweenMax.js in the theme options. I also implemented a timer of 5 seconds on the Javascript. It still works on Chrome but no luck in Firefox. When using the timer - Chrome works after 5 seconds, Firefox breaks as soon as I rollover the image and the mousemove fires. Is this not how to "delay your inline JS until the page is loaded/ready"? This is the delay code I am using, is there a different way? <script> var delayInMilliseconds = 5000; //5 second setTimeout(function() { $("#post-1369").mousemove(function(e) { parallaxIt(e, ".background-inner", -30); }); function parallaxIt(e, target, movement) { var $this = $("#post-1369"); var relX = e.pageX - $this.offset().left; TweenMax.to(target, 1, { x: (relX - $this.width() / 2) / $this.width() * movement, }); } }, delayInMilliseconds); </script> Thank you!
  3. Hi all, I have a bit of greensock that is creating a parallax pan on the background image of my wordpress site. It works great in Chrome but Firefox stretches out the image and breaks the fixed position. http://hematogenix.flywheelsites.com/company/ The original codepen works in Firefox. https://greensock.com/forums/topic/17320-background-parallax-effect-on-mouse-move/ Can anyone illuminate why this is breaking in my setup? This is the code I am using in my site. <script> $("#post-1369").mousemove(function(e) { parallaxIt(e, ".background-inner", -30); }); function parallaxIt(e, target, movement) { var $this = $("#post-1369"); var relX = e.pageX - $this.offset().left; TweenMax.to(target, 1, { x: (relX - $this.width() / 2) / $this.width() * movement, }); } </script> Thank you!
  4. Hi Chris, I noticed ScrollMagic was using GS but wondering if there is a way to do it without breaking my gif into separate images.
  5. Howdy ya'll! Is there a good/better way to tie a gif animation to the scrollbar using a GS timeline and get the same result we see here on ScrollMagic? https://scrollmagic.io/examples/expert/image_sequence.html I would rather use a single gif instead of exporting an image sequence. Any thoughts on how do best do this are welcome. Thanks everybody! Here is my .gif loaded into a codepen for reference. https://codepen.io/chriscalabrese/pen/gJjVjb
  6. I want to thank everyone who responded to this thread. I was able to load GS and get the animations firing in Divi. For anyone who cares - the <head> location for pulling in the JS works. I was missing a ">" and was also calling on the wrong SplitText file in the "bonus-files-for-npm-users folder". Thanks y'all!!
  7. Not a problem! I assumed the same thing, WP is a mysterious beast. I'll create a live link so we can get on the same page. Thank you!
  8. I understand - I will create a public link. Unfortunately when I remove the <script> tags in those windows it turns to regular text and I get a bunch of error icons.
  9. Hi Jack, I appreciate your help, I really need to understand this so I can leverage Greensock on future Wordpress projects. Here is a screen shot of the code for the main navigation buttons. Can you tell me what div id I should be targeting to animate the main menu? I changed the location of the animation code to a spot labeled "Add code to the bottom of your posts, before the comments". Which I think is toward the bottom of the <body> but I still don't see any magic. I think if i can at least confirm the appropriate id that would be a good start. Thanks all!
  10. I renewed my shockingly Green membership and downloaded the SplitText.js and other support files. I need help implementing into my WP build (http://hematogenix.flywheelsites.com). I just want the main menu buttons to animate in like this pen https://codepen.io/chriscalabrese/pen/pmdVrz Questions: Where should I place "the animation code in a <script> tag" inside Wordpress? Inside the header? I'm using the theme Divi. (see attachment) Do I have to upload the SplitText file on my ftp or can it be on a different host? Am I calling it correctly? (see attachment) Lastly if I want all the navigation to animate in with SplitText, what Div or Divs should I be targeting? I can get anything to fire here.
  11. This got the exact result I was looking for! Codepen is updated. var tl = new TimelineLite, mySplitText = new SplitText("#quote", {type:"words,chars"}), chars = mySplitText.chars; //an array of all the divs that wrap each character TweenLite.set("#quote", {perspective:400}); tl.staggerFrom(chars, 0.8, {opacity:0, ease:Back.easeOut}, 0.1, "+=0"); document.getElementById("animate").onclick = function() { tl.restart(); }
  12. I created a code pen, I have the characters fading in but how do I get them to fade in staggered, randomly instead of from the beginning of the word? https://codepen.io/chriscalabrese/pen/pmdVrz
  13. Thanks so much for the quick reply guys! I'll give it a try and let you know if I get lost. Thank you!
  14. Hello all! My client wants his Wordpress site main menu buttons text characters to fade in with a stagger so some of the letters fade in before others until everything is 100% opacity. I think the best way to do this is with SplitText. I'm really rusty on Greensock and applying the animation in Wordpress is where I'm sure I'll get confused. If I can get a good game plan going I'll be happy to reup my membership. Can anyone help?!
  15. Is it possible to animate a curved line with GS? I want to draw a green line starting from point A to point B with a bezier curve? visual example:
  16. I just had to assign a data type to a var var CAOpacity:Number = WindData.CA.opac.text()[0] TweenMax.to(map_mc.CA, .2, {colorTransform:{tint:WindData.CA.hexColor.text()[0]}, alpha:CAOpacity});
  17. Hi Jack and everyone! I have some XML loading and I can pass a hex number to a colorTransform tween without a problem yay! ..but when I try it with a Alpha tween it doesn't not work. Can anyone help? Thanks in advance! This works: TweenMax.to(map_mc.CA, .2, {colorTransform:{tint:WindData.CA.hexColor.text()[0]}}); TweenMax.to(map_mc.NV, .2, {colorTransform:{tint:WindData.NV.hexColor.text()[0]}}); This works: TweenMax.to(map_mc.NV, 6, {alpha:.5}); This does not work: TweenMax.to(map_mc.NV, 6, {alpha:WindData.NV.opac.text()[0]}); This doesn't work even though WindData.NV.opac.text()[0] traces to the output window as .5 Here is my XML: <WindData> <CA> <PTCNetImpact><![CDATA[$(195,849,979.44)]]></PTCNetImpact> <peg><![CDATA[4.94%]]></peg> <hexColor><![CDATA[0xF26B27]]></hexColor> <opac><![CDATA[.5]]></opac> </CA> <NV> <PTCNetImpact><![CDATA[$(195,849,979.44)]]></PTCNetImpact> <peg><![CDATA[4.94%]]></peg> <hexColor><![CDATA[0xF26B27]]></hexColor> <opac><![CDATA[.5]]></opac> </NV> </WindData>
  18. Ok I got it. Thanks for listening! var scenarioA2=xmlDoc.getElementsByTagName("ThroughputGauge"); var condition2a = parseFloat((scenarioA2.getElementsByTagName("scenarioA2")[0].childNodes[0].nodeValue)); window.condition2a = condition2a;
  19. I need to convert the xml string to a literal number using parseInt():, that sound right Jack?
  20. Hi Jack and GS peeps, Help! I'm successfully using this tween below to animate a number gauge up and down depending on the value I pass into condition1a. The problem is when I pull the number in from XML it adds to the value already in the output field instead of sending the gauge to the proper number. I don't know why it acts differently when I pull in from XML. Do I have to tell java the number from XML is a string or somthing? Any ideas? TweenMax.to(obj, .5, {value:condition1a, roundProps:["value"], ease:Linear.easeNone, onUpdate:function() { output.innerHTML = obj.value; output2.innerHTML = obj.value; tl.tweenTo(condition1a); // < this timeline tweens to the correct place, only the output number adds incorrectly. }}); When I set my number gauge value variable like this is works fine: window.condition1a = 27.28; When I pull from XML like shown below its act differently. var scenarioA1=xmlDoc.getElementsByTagName("ThroughputGauge"); window.condition1a = (scenarioA1.getElementsByTagName("scenarioA1")[0].childNodes[0].nodeValue); When I trace the variable is comes up as 27.28 so I know the XML is getting the correct number into the function. alert(condition1a); XML structure sample: <ThroughputGauge> <scenarioA1>27.28</scenarioA1> </ThroughputGauge> How do I get the XML passed variable to act the same as the one I set in java? Thanks everyone!
  21. Is it possible to get the duration of tl.tweenTo(); tween? I'd like to pass it as a variable to another tween. Thanks!
  22. Thanks Rodrigo tl.tweenTo(); worked perfectly.
  23. It's fantastic. I'm a flash guy and I've recently switched to JS, it was nearly a seamless transition using GSAP v12.