pauljohnknight

Oh OK. Yes I completely understand it'd thus be a pain to change. I'll have a play around with it and see what other possible options I have. The client does want to keep the original design so i'll probably go down the body overflow route because (I think) when I used a container div I was still getting the same issue. If I come up with another solution I'll post it on here for the record in case anyone else searches the forum. Thanks for you help and for coming back to me.

Hi Jack, In the demo a horizontal scroll bar appears at the bottom of the window (screenshot attached) and lots of extra space is created (this is being caused by the pin-spacer which is sitting to right of the element). This only happens on smaller screens (roughly 1300px wide or less). Paul.

As a hack/fix I've added a .pin-spacer {width: 0 !important} CSS line to my stylesheet , but there does seem to be a miscalculation taking place in the javascript/GSAP library.

It seems to be the `inset` value generated by the GSAP pin spacer that is causing the problem. Could this be a bug?

Hi, I have a layout where I have a search form wrapper element that when the user scrolls to the top it pins to the top of the viewport and a fixed div/bar appears behind it (in the CodePen this div is coloured grey so that you can see it). This give the appearance of a pinned header after the actual header has left the screen. This all works OK, but when I reduce the window size the layout breaks - this break is being cause by the GSAP `.pin-spacer` div. I'm not sure if this is supposed to align directly with the pinned element or not, but it's offset to the right of the element being pinned and I'm not sure how to fix it? Normally I would just add an `overflow:hidden` property on what is in this instance is `.home-section-2`, but because the search box and its wrapper are vertically aligned outside of this section it just cuts half of this element off. Any help would be fabulous. var fixedTopBar = document.getElementById('fixed-top-bar'), searchWrapper = document.getElementById('js-home-search-wrapper') var pinSearchBox = gsap.timeline({ scrollTrigger: { trigger: searchWrapper, start: "top 0", pin: true, pinSpacing: false, end: () => "+=" + document.querySelector('.home-section-2').offsetHeight, toggleActions: "restart pause reverse reverse", markers: true } }) pinSearchBox.to(fixedTopBar, {duration: .1, opacity: 1, zIndex: 2})

@mikel Wonderful. Thank you.

Hi, I have a word made of spans where I would like them to stagger in when triggered by the scroll trigger - I can seem to get it play ball? The letters are having the animation applied to them, but the stagger isn't working? If someone could point out what I'm doing wrong that would be great. // 'MOVING' WORD var moving = document.querySelectorAll('span') if (moving) { gsap.utils.toArray(moving).forEach(function(letter) { gsap.to(letter, { duration: 1, y: 0, opacity: 1, stagger: .1, scrollTrigger: { trigger: letter, toggleActions: 'play pause none reset', start: '0 100%', } }) }) } Many thanks, Paul

Thank you. I thought it was because you'd written the end value is a slightly different manner and it might have been an inbuilt method that was acting accordingly. Thanks for clarifying and for the original answer.

Thanks Zach that works a treat. Can I ask how that manages to pin the section as well? That looks super useful, but I can't quite get my head around it

Hi, I have a scrollTrigger animation when a section (.pin-section) hits the middle of the view port. This section is pinned for the same amount of pixels as the section height using end: () => "+=" + document.querySelector('.pin-section').offsetHeight During this pinning I have a star that basically keeps scrolling so the user knows to still scroll. This is done by using the .pin-section element as the trigger again and using the end: () => "+=" + document.querySelector('.pin-section').offsetHeight as the end value once again. As well as the simplified CodePen demo, I've also uploaded the page to a subdomain here: https://ia.inset.agency/production/ The issue I have is if I re-size or refresh the window after the animation has been triggered it breaks the animation. Note: The problem on the simplified CodePen version seems to happen if you resize the window when the animation is in-between the 'start' and 'end' markers, on the actual site link it seems to happen after the 'end' marker, but it's essentially the same thing happening each time. Also on the CodePen example it only happens on resize because when you refresh CodePen it seems to reset all of the positioning. Any help would be really awesome. // pin section in middle of screen var pinMiddle = gsap.timeline({scrollTrigger: { trigger: ".pin-section", start: "50% 50%", toggleActions: "restart pause reverse pause", end: () => "+=" + document.querySelector('.pin-section').offsetHeight, pin: true, markers: true }}) // parallax star var prodStar = gsap.timeline({ scrollTrigger: { trigger: '.pin-section', toggleActions: "restart pause reverse pause", start: '50% 50%', end: () => "+=" + document.querySelector('.pin-section').offsetHeight, scrub: true, markers: true } }) prodStar.to('.parallax-star', {y: -250})

Hi Jonathan, I'll try and set up a simplified example to show the jank. Also, I'm not using canvas, it's all SVG - I think you're referring to the original poster at the top of the thread who was someone else. I was chipping in because I did a search on GSAP jank in Firefox. Many thanks, Paul.

Hi @Jonathan, @PointC, @Carl I have found a work around to this Firefox jank problem, but I'm not sure if it's a potentially terrible idea? On a localhost dev site I noticed the animations were very janky in Firefox for the reasons stated above in the thread, because of the nature of the animations, adding the rotation property, although improving things slightly in FireFox, didn't fix things completely (I also have a static rotation on an element being animated so this created other side effects). I noticed however that my Contact Page animations were all silky smooth compared to other pages, and the animations were virtually the same amount of code and with similar transforms / scale values etc? The reason it was animating OK on the Contact Page is because this page is a 100vh single section so everything apart from the footer is above the fold. On my other pages I wrapped the page content below the fold in a wrapper div, and in the JS file I set it to `display: none` for Firefox browser versions, and then used a setTimeOut function that switches it to 'display: block' after the duration of the animation, and hey presto everything animated buttery smooth. Below is the code I used: My main reservations are that: a) when reloading the page it will effectively always return to the top of the page, b) I'm worried there may be an SEO hit for initially hiding so much content, c) it just seems like a really terrible idea even though it works really well. Feel free to chip with any thoughts, I'm not particularly advanced with JS or GSAP, so would appreciate any comments var mainContent = document.getElementById("main-content"); var ff = navigator.userAgent.toLowerCase().indexOf('firefox') > -1; if ( ff ) { mainContent.style.display = "none"; // SET TIMEOUT ON EVERYTHING BELOW SECTION ONE ON LOAD window.setTimeout(function() { mainContent.style.display = "block"; },2000) }

Thanks Craig. I really like what you did with the image morph, so I'm going to see if I can't get to grips with that and look at tweaking the design accordingly.

Hi Craig, Thanks for this, that's great. I need to up my SVG knowledge. Also before I start playing around with this, I've just realised because the shape I'm morphing has preserveAspectRation="none" on it to make it responsive, I'm think you probably can't have an <image> in an SVG with this attribute because it will distort the image when you reduce the window size? I've done a quick screen cast and the image was going to go inside the main dark blue polygon that morphs in this video, but I'm thinking I may have to re-think by approach to this.

Hi With the morphSVG plugin, is it possible when morphing between two path shapes to have it so that the final path shape can display a background image (say, with the SVG <image> that has been clipped so it fits the shape). What would happen is you'd have one path shape with a background that is just a fill colour, and this will then morph into the new path shape showing a background image. I'm thinking this probably isn't possible? I've set up a pen here of two shapes morphing in case it is possible and someone can illustrate how.

No I'm not using a build system on this project and it was happening in chrome. I tried it again this morning with the same issue. When I'm back home on Monday i'll try and replicate it on Codepen, I suspect it might be a problem this end if Craig's pen works, which I'll have to have look into. Apologies in advance if it wasted anyone's time. Paul

Hi, I've updated a dev site today to the latest version of GSAP, and the ScrollMagic triggered tweens/animations stopped working. When i reverted back to the older version of GSAP, everything behaved as expected. Are there any known issues with this? Paul

That's amazing - thank you !

Hi Craig, Yes i did end up doing that actually when I was playing around with the easings. In relation to this, I've used a Sine ease with an easeIn and easeOut to try and get the morph as smooth as possible on each of the two morph tweens. I guess there will always be a slight jerk effect because the morph has to stop and restart? Even if I was to use the custom ease plugin? Updated pen for quick reference.

Thanks for both answers The problem was being caused by my second tween - I didn't realise when returning to the original svg shape with MorphSVG that you need to reference it in both parts of the tween. Shaun's tip of having the rotation outside of the morphing was very useful as well. Thanks again Paul.

Hi, I'm doing a simple morph that repeats between two shapes (with a rotation on as well). When the animation runs, it morphs, then seems to pause for 3 seconds, then seems to do a fluid repeat morph between the two states (which is what I want), and then starts again? How do I get a morph to fluidly go from one shape to another on repeat with out the pause. I'm using yoyo: true as well and thought this would solve it? I'm flummoxed. var tl = new TimelineMax({repeat: -1, yoyo: true}); tl .to("#shape-1", 3, {morphSVG:"#shape-2", rotation: 180, ease: Power1.easeIn}) .to("#shape-2", 3, {morphSVG:"#shape-1", rotation: 180,ease: Power1.easeOut}) Many thanks,

God, that didn't ever occur to me to use the ternary operator. That was also useful to use on the duration value as well on a different timeline. Thanks ever so much. Paul

Hi I have an animation that is all tickety-boo, but on smaller screens (less than 736px) I have a marginally different layout and I need to tweak one animation value. In the code below, in the part I've highlighted as // **** THIS IS THE BIT I MEAN, I need to weak the value of "-=.85" which causes the appropriate overlap of the timeline, and change this to "-=.5". My question is, can you only do this by copying and renaming the entire timeline function and putting it inside an if(window.innerWidth < 737){} if statement, and thus change the single value, or is there a more efficient way of doing it? I'm conscious of duplicating a big chunk of code for such a small tweak. function initialIntro1() { var tl = new TimelineMax(); tl // set elements for animations .set(topBlockStagger, {scaleY: 0}) .set(row1, {transformOrigin: "left", scaleX: 0}) .set(logoContainer, {visibility: "hidden"}) .set(menuButton, {scaleX: 0, visibility: "hidden"}) .set([leftBlock], {opacity: 0}) // animations .add("vertical-drop") .staggerTo(topBlockStagger, .75, {transformOrigin: "0 0", scaleY:1, ease: Power2.easeIn}, -.15) .to([menuButton, logoContainer], 0, {visibility: "visible"}) // **** THIS IS THE BIT I MEAN .add("horizontal") .to([row1,logoContainer, menuButton], .75, {transformOrigin: "left", scaleX: 1, ease: Power2.easeIn}, "-=.85") // covers #menu-button and #row-1 .to(contract, 1, {transformOrigin: "right", scaleX: 0, ease: Power3.easeOut}) .to([leftBlock], 3.5, {opacity: 1, ease: Power3.easeOut}, "horizontal") return tl } // call animation on pages 1 and 3 of the site var masterTL = new TimelineMax(); if (p1 || p3) { masterTL .add(initialIntro1()) }

Hi I saw this website today (link below), where there is text being animated along a 3d path by the look of it. Is it possible to do something similar in Greensock. I've got a pretty good grasp of the basics of GSAP, but was wondering where to start with something like this. https://www.arche68.com/front/en Many thanks for any ideas Paul.

Oh boy, that's a total brain freeze . Thanks for the example @PointC, I think I'm going to have to do some proper background reading there. I've not used SVG clip-paths or masks before. Paul