Visual-Q

You can make the image the size of img-box instead of relative to the wrapper size like this if the img-box has a fixed size. https://codepen.io/Visual-Q/pen/MMwJeO

Yup, now people will ask you how to mod the mods. You've been royally forked ?

Depends on whether you have any reason for using an overlay other than hiding the image, by animating the image's wrapper size instead it's parent still holds it's place in the DOM but there is no need to match the background as it's transparent until the img wrapper 'fills it up'.

Here's a push in the right direction also based on a slider project from our good friend @PointC I make no promises that this is the most efficient way to do it, it's just what I thought of. Observe that the white box will animate out, then scroll occurs, then animation for next box on new slide occurs. To roughly match the performance of your example I've added some logic to the the slider that 1. creates an array of animations matched to length of slides and runs first animation for first slide, I've just used the loop to make one common animation for all slides you would want to make your own custom animations for each one matched to the index of the slide 2. then on events (mousescroll, arrows) reverses the animation on current slide (referencing oldSlide index pos) and an onReverseComplete then calls the function to progress to next slide 3. then runs the animation for new slide (referencing activeSlide index pos) Hopefully that makes sense? https://codepen.io/Visual-Q/pen/NZqgKr

Overflow hidden works on container if position is relative. https://codepen.io/Visual-Q/pen/JQdNEr

Sorry I misread I thought you were talking only about the white edge on the left I updated to take care of both issues. body{margin:0; overflow-x: hidden}

Works at my end. I'm not seeing any white edge on the pen. https://codepen.io/Visual-Q/pen/xoGdGd

Remove the margin on the body in css add body{margin:0}

I don't know if it suits your needs but you could animate the wrapper size with a few tweaks to your css instead of using an overlay. https://codepen.io/Visual-Q/pen/MMwJeO

var tl = TweenMax; $('.move').click(function(){ tl.to('.nav-content,.menu-mark-container', 0.5, {x: "500%", ease: Expo.easeInOut}); }); Or give them a common class and animate that <div class="animate nav-content"></div> <div class="animate menu-mark-container"></div> <button class="move">move</button> var tl = TweenMax; $('.move').click(function(){ tl.to('.animate', 0.5, {x: "500%", ease: Expo.easeInOut}); });

You don't need jQuery for gsap and your script isn't using it as presented. jQuery is required for some bootstrap elements however - see link, if you're using it with gsap it would have to be loaded before gsap. https://www.w3schools.com/bootstrap/bootstrap_get_started.asp To wait for assets to load before starting animation you can wrap them in a load event. https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload Some info on jQuery document ready and jquery load: https://coderwall.com/p/_jothq/jquery-when-to-use-document-ready-and-when-window-load I don't use bootstrap studio but it look like the interface allows you to import and set the order of your js scripts: https://bootstrapstudio.io/tutorials/changing-file-include-order-js

This just a wild guess but I think it's because you're not directly passing a function you're passing a conditional statement. Maybe try wrapping it in a function and returning the value. Something like this: function () { return (ternary operator); }

I just had to make something similar for a wordpress site. This script will scroll to an item if it is on the same page otherwise href links to another page as normal. // JavaScript Document // This script will scroll to an anchor link on a page from any wordpress menu item with an added class of scrolltolink // the link for the menu item should contain the full file path with url and anchor i.e. http://myURL/#myAnchor // for a non wordpress site it should work the same in any normal list based menu strucure as below // <li class="scrolltolink"> // <a href="http://myURL/#myAnchor">myAnchor</a> // </li> // if the script finds a matching #anchor-link on the page it overides default behaviour and scrolls to it // otherwise the link will behave normally and goto the href link on desired page var stl; // find links with scrolltolink class var scrollToLink = document.querySelectorAll(".scrolltolink a"); // loop through links for(stl = 0;stl<scrollToLink.length;stl++){ // add event listner scrollToLink[stl].addEventListener('click', function (e) { //get #anchor link from href var hrf = this.href, anchr = hrf.substring(hrf.indexOf("#")) // if anchor link matches id on page scroll to it //otherwise link behaves normally and goes to desired page/anchor if(document.querySelectorAll(anchr).length > 0) { e.preventDefault(); TweenMax.to(window, 0.75, {scrollTo:{y:anchr,autoKill:false},ease:Power2.easeInOut}); } }); }

Attempting to force formatting by precisely sizing a container is bound to be problematic, any change or inconsistency between browser rendering could cause reflow. If your goal is to maintain exact line breaks it might be better to force line breaks with a <br> in the text and make the box a little larger than needed to prevent reflow.

Gsap does not require jQuery to find most DOM elements so you can just use: TweenMax.staggerFromTo('#mask-sig path', 1.2, {drawSVG: "0%"}, {drawSVG: "100%"}, 1.2); and jQuery can be accessed more reliably using jQuery instead of $ though the STOV post shows other solutions TweenMax.staggerFromTo(jQuery('#mask-sig path'), 1.2, {drawSVG: "0%"}, {drawSVG: "100%"}, 1.2);

Yeah there's any number of things that could be behind an issue especially in Wordpress, not to mention we don't even know what the issue is. Please clarify. Are you getting any errors. I notice you're using jQuery. If the scripts are loading properly but it's not finding the element it could be related to wordpress running jquery in no conflict mode. In this case use jQuery not $ or better yet don't use it and let gsap find the element. More info about this in STOV link. https://stackoverflow.com/questions/21948053/custom-jquery-function-not-working-on-wordpress-even-though-other-loaded-jquery

Great! Might be worth noting to the writer/editor to avoid hyphenation unless absolutely necessary, a lot of the time it's optional or at least a soft grammatical error that can be acceptable in problematic typesetting.

Maybe wrap it in a span if the instances are limited? https://codepen.io/Visual-Q/pen/NVVbmJ

Yeah you're right, could never be that easy....?

If I'm understanding your request adding "words' to your split text type seems to make hyphens break correctly. const split = new SplitText(text, { type: 'lines','words' });

I would agree, maybe consider using the plane effect only once and make it a bit quicker. https://codepen.io/Visual-Q/pen/oROYow

You'd have to add some logic to your function to test whether you're on the home page, if you are it can scroll to it if you aren't you would tell it to link to home.php#contactus instead. If someone wants to jump in and help you code this they are welcome to but as Jack has said it's not a gsap question and therefore not what we are focused on here. If you have any gsap related questions we'd be happy to help.

This would be expected because you are telling it to link to the id #contactus on the current page so if you're on aboutus.php it will look for aboutus.php#contactus.

If you're doing it in vanilla I would expect you'd want to target a child node: https://www.w3schools.com/jsref/prop_node_childnodes.asp https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes https://stackoverflow.com/questions/16302045/finding-child-element-of-parent-pure-javascript

Since you appear to be using a helper within a theme interface to insert code which I'm not familiar with I can't help with that though you would want to load the scripts in the footer typically, you should probably go to the support thread for the theme itself, and seek advice there. If you wish to learn how to properly add scripts yourself you would generally enqueu() them. Here is recent post discussing that. As far as what to target wordpress creates unordered list formatted menus so you'd be targetting something like: "ul.top-menu li a" i.e. find the menu ul "ul.top-menu" and target the interior list"li" and link "a"or use greater specificity if required such as "li.menu-item a"