Jump to content


  • Posts

  • Joined

  • Last visited

About DeltaFrog

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

DeltaFrog's Achievements


Newbie (1/14)



  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: