RaoulUnger

Sorry to bother you again... I got everything on the website working as it does in the codepen. But - I hadn't noticed yet that the ScrollTrigger behaviour in the codepen is not responsive. The variable '--fading-element-height' has vh for a unit. The beige elements therefor changes size when the viewport is dragged to a less wide or less high size. The trigger location should also relocate because it uses the same variable. Instead I takes a fixed position, regardless of the viewport being resized after loading (in either dimension). Only when the page is renewed does the trigger location take its correct position again. This also means the media query (where the variable gets a different value) has no effect. Any thoughts? Thanks!

Sorry, the moment I hit enter on my earlier reply I realised that order might be the issue, and it was and everything worked fine (Murphy's Law). Thanks anyway! And thanks also for the information about the backticks and template literals (first time I hear that word, and I'm a typographer ;-). Learned so much today!

Thank you very much! I got it working on my site. Not in first instance, because I had the JS-script running before declaring the css variable.... Once I changed the order of things, everything works fine. Coding is so logical Thanks also a lot for the bonus tip on animating css variables! There is one very weird thing going on the codepen: in the line of code you altered you used ` ` where I used ' ' (so slanted vs straight quotation marks): start: `top ${property}`, When I replace those ` ` with ' ' in the pen, scrolltrigger still works, but the variable is no longer recognised (so the trigger-location is back at the top) This seems strange to me, as the ` ` are not the standard quotation marks you get when typing (at least not a mac). Also, why would the property code no longer work when using the straight quotations marks, where they work fine everywhere else? I tested this in safari, chrome and firefox: everytime the same result.

Ok, fair enough, sorry about that! I made the codepen: https://codepen.io/RaoulUnger/pen/dymxoJO The basic idea is that the lower element scrolls under the fixed top (beige) element. While doing so, the beige element should fade out. The issue: the height of the top element is set through a css-variable '--fading-element-height', and varies with screen width (as shown in the codepen). Therefor the trigger point for the fading-out action should also relocate. The question: can this be done by using a css-variable in the Greensock markup? In the present codepen it does not work (Greensock doesn't recognize it, and assumes I meant 'top top'). If I use 'top center' instead of 'top var(--fading-element-height)' it works fine, but fixes the trigger point to the center on all screens. Hope I made things more clear now! Sorry if I ask the obvious, I looked everywhere but it's so easy to overlook the right answer... Thank!

Hi, I have a fixed image fading out on the scrolling of another element. The location at which the fading-out starts ideally should depend on the height of the image itself. This is set by a css variable "var(--image-height)", whose value changes depending on different screen sizes (for example it is 50vh on large screens, and 75vh on mobile screens). I was wondering if it possible to use that variable directly in the scroll trigger-markup, like in the example below (assuming the distance is relative to the top of the screen)? Thanks! gsap.to('.fadeout', { autoAlpha: 0, scrollTrigger: { trigger: '.scrollTriggerFadeOut', start: 'top var(--image-height)', scrub: true, end: 'top top', markers: true } });

Thank you all for the prompt replies and solutions! I'm glad it wasn't me for a change I tried the .to variant on the website i'm applying this effect to, and that works fine, so i'll stick to that. Thanks again! Raoul

Hi, I'm trying to convince a fixed background to change color when a wrapper passes the scroller-start point. I've set scrub to 'true', so that the whole thing happens with scroll speed, and reverses when scrolling back. See pen below. The issue: it works fine as long as I scroll really slowly: the background goes from white to blue, and back. But when scrolling back a bit faster the background does not return completely to white (or sometimes not at all). This could off course help to take a slower pace in life, but here that's not the effect I intend to accomplish. Does anyone have any idea how to improve this? Sorry if i've missed the obvious! I've based this pen on another pen I found. There are several more pens around dealing with changing backgrounds with ScrollTrigger but they all differ in their approach, and often combine multiple effects making it harder to understand what's going on. Cheers!

Hi, Paul, thanks a lot for the help and the pen (and for clearifying the class names too...). I got it working - next time I will consult that Most Common Mistakes document (thanks for that consoling title ) first! Cheers, Raoul

Hi, I'm trying to fade out (at scroll) multiple elements on a page. I'm very new to ScrollTrigger (loving it!), and managed get the fading working based on tutorials and some code-pens. I would like the fading of each section to start at the same position in the window. However, at this moment, all sections fade when the first one does. The markers only show beginning and end markers for the first element, so the problem probably is related to the other elements not getting their own starting en ending point. I've set up a simple codepen with four elements now. I could off course just repeat everything with varying trigger-classes - but I'm testing this for a website where much more elements (coming from meta-fields) need to show this behaviour, hence this setup. I'm probably missing something very obvious here, but I can't figure it out. Could someone point me in the right direction? Thank you!!

Wow, works perfectly - that was so much easier than I feared it would be! I've updated the codepen - thanks a lot! Cheers, Raoul

Hi all, I would like to be able to give a class to elements (images in my case) that makes them invisible at first, and then fade-in from the left once they reach a certain point in the viewport, using Greensock. The animation effect i'm looking for is shown in example 1 (a given start position, speed and ease). However, this is not tied to a viewport position so all elements animate at the same time. In example 2 (loosely based on a codepen i found, including Scrollmagic) all elements do fade in from the left only when it's their turn, but I don't like the fact that the animation speed itself is determined by the scrolling speed. So basically i'm looking for a way to trigger the start of the animation of example 1, tied to a given position in the viewport as shown in example 2. I'm not sure if the use of Scrollmagic is implied at all. Could anyone perhaps point me in the right direction? I'm pretty new at Greensock, and i've tried to figure out the answer by searching through a lot of codepens and trying out all kinds of solutions, but I don't seem to find the right way! Thanks! Raoul Here are the two examples: https://codepen.io/RaoulUnger/pen/orgjMb

Ok, thanks! The webpage version works now too, that was due to the page not having been saved (my mistake). Cheers!

Thanks for the answer! I updated my code with yours. You were right about the attribute-definition. I can see that the trick of the rectangle works in de codepen viewed in Safari. Weirdly enough, the same trick doesn't seem to work on the webpage where i'm testing the exact same code (again viewed in Safari): http://decamerone.info/test-greensock-werkt/ It get's weirder: that same page works fine in Chrome and Firefox (both on a mac and in windows), but your codepen doesn't animate in Firefox... Cheers!

Hi, I'm trying to animate a SVG clip-path masking an image in such a way that it will work in all browers, including IE. I'm using Greensock because 'normal' css-animation on clip-paths doesn't work at all in IE. I've defined two paths within one clipPath, and animated them separately (different speeds). The included method seems to work in all browers, but there is one problem: Safari shows erratic behaviour: the bottom part of the circle often isn't drawn. Weirdly enough, it does draw when I 'inspect' the element to look at the code. In the pen you see the animated image on the left, and the entire image for reference on the right. The image is png with the parts outside the circle being transparent. Any thoughts would be appreciated!! I'm very new at Greensock, so please forgive me for not seeing the obvious... Thanks!