DeltaFrog

Hmm, changing to "body" works but seems to break my word press Elementor editor. :S Is there a better way or is this the correct way?

I figure it out. I just changed the trigger from pin: true to pin: "body" let tl = gsap.timeline({ scrollTrigger: { trigger: ".centerMeHorz", start: "60% 50%", end: "2400px top", markers: "true", scrub: 1, snap: { snapTo: .33, duration: 0.01, ease: "none" }, pin: "body" } });

Hi GSAP Fam, Is there a way to stop the page scrolling while ScrollTrigger scrubs through the animation timeline? Currently when the charts reach the middle of the page the animation scrubs through the crossfade timeline but the page keeps scrolling up behind it. I'd like the page to stop and wait for the timeline to finish and then everything scrolls up together. How do I get the page to pin also and wait for the animation to finish before it continues to scroll? Thanks yall!

Thank you! Looks like its working as desired now! Yay!

Thanks so much, you are amazing, let me see if I can explain better. When the user stops scrolling I want the animation to snap to spots where only 1 of the 4 charts are displaying 100% opacity. Currently if I stop scrolling the mouse the timeline will stop and display 2 charts at a % of transparency which is not desired. The animation should only snap to spots on the timeline where only 1 chart has full opacity. For example this screenshot shows chart 1 and 2 and they are at about 50% opacity, the mouse is not being interacted with at the time of screenshot. The next screenshot shows the 4 charts at full opacity for reference.

Thanks so much for the quick reply Cassie!, I added the "snap: 0.33," but it doesn't seem to be working. What am I doing wrong here? let tl = gsap.timeline({ scrollTrigger: { trigger: ".outter", start: "center 50%", end: "bottom top", markers: "true", scrub: 1, snap: 0.33, pin: true } }); Should I be following this pen closer https://codepen.io/mvaneijgen/pen/BaJjyKR and creating an array or can I do without?

Hello everyone! How do I add a snap on my pen? Currently when the user scrolls the mouse the sections animate opacity in and out but don't snap to the right moment in the timeline. Id like the mouse to snap into place when each charts is fully visible at 100% opacity. This code pen here pen looks like it has everything I need to get it working right but I'm having a hard time applying a it to my current setup. Can anyone help? Thanks!

AMAZING!!! Thanks everybody. Amazing support.

Amazing! I'll dive in and let you guys know if I have more questions. Greatly appreciated!

Yay, I got it working using the code pen yall already provide. How can I display multiple dots moving together in a row like the video? Current working Pen: https://codepen.io/chriscalabrese/pen/JjMKXxR

Hi everybody, I'm have a project coming up that requires a few moving dotted lines. The example mp4 below was created in After Effects. How can I recreate this in GSAP? I see the Motion Path Plugin is the way to do this so I have started this pen but I'm getting an error "gsap is not defined" and not sure what to do next. Can anyone help me get this dot moving along the line? Thank you! Dot Animation.m4v

Howdy everybody! Aiming to mimic a cool website feature. The website below has a bubble animation that follows the mouse and inverts the color of everything under it. Example here: https://silviasguotti.design/ Can anyone point me towards how to do this in GSAP? How do I invert color? Some sort of blending mode?

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. Here we go.. So everything in my code seems to be correct, no errors, very very simple. I get can the animation to tween correctly in CodePen. 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. When the user transitions to the page the user sees the object for a second before the GSAP code kicks in to make the object disappear and fade in which destroys the presentation and the whole point of fading something in. I can not recreate this bug in code pen because its a in WordPress environment specific issue. How do I ensure the object I am targeting does not display before GSAP gets going? Is this done with additional CSS? <script> ;(function(){ //...loop function code - runs over and over again til it is ended let chck_if_gsap_loaded = setInterval (function(){ //...checking to see if GSAP load into window if( window.gsap ) // ...fires my function my_stuff(); //...clear interval loop checking for GSAP clearInterval( chck_if_gsap_loaded ); //...loop check speed }, 500 ); //...my function function my_stuff() { //...Create VAR and point it at custom CSS ID or class name in Elementor so that it can be seen in Javascript let clientTitle_id = document.querySelector( '.clientTitle'); //...Animate custom class or ID gsap.from(clientTitle_id, {duration: 1, x: 60, delay:.5, opacity: 0}); }; })(); </script>

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; } }

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!

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!

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.

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

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!!

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!

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.

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!

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.

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(); }