RaoulUnger

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!