Jump to content

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


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

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

DeltaFrog's Achievements



  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: