limbo

Yeah - totally the same deal. It's a pain having **** eyes eh!?. When I look at white text on a dark background for too long I get the same sensation as you might when staring at a bright object for too long. It 'burns' into my vision. Weird one. Totally know I'm (we're) in the minority - but light versions of the docs would be a godsend, in the long term.

Thanks @GreenSock @Cassie Not a problem. It was only a thought. Folk do request dark mode - from sites on a lighter BG (which makes sense - devs are often nightowls) — probably don't get much of a request in the other direction... Totally understandable. Would be a great addition for the docs. I realise not everyone has the same blobby eyesight as me

Question. Is there a road map for a light version of the docs/forums? I am (old and) short sighted which makes it harder to digest longer form text without getting the same blobbyness you get from staring at a light for a while... the option in the docs, especially would be immense.

Just wanted to pop in and say WOW. Love the new look/style. Very fresh. Class work. The intro really showcases the toolset nicely. Also think the move away from the greensock super dude / domain was due. Good work 👏

Thought it'd be good to see this as the final product: https://www.weareseventeen.com

Thanks Cassie. I thought that might be the case. I'll have a go and post back if I get to point where I need assistance tieing in GSAP.

So far I've only dipped toe in. I used to use a jQuery plugin for this but want more control and to do it in vanilla JS with GSAP handling animation. It's a well trodden UI component but I'm drawing blanks looking for examples I can get some ideas from. User clicks on read more button which loads in more contnet from an URL via AJAX, with shiny GSAP UX... Then next read more, more content, then next read more - until there's no more content to load. Anyone got any pointers or examples they could help me with? Ideally how to handle the AJAX request and twin with GSAP.

Thanks all for the replies. An update on this one, as somebody might find it useful. https://codepen.io/liamcrean/pen/mdKbwJo I decided to try and make as much of this native to CSS's Sticky and Scroll-Snap as they've excellent support and can degrade easily to normal scroll behaviour in IE. Also found that the approaches detailed above REALLY struggled with the resize issues you get with ScrollTrigger on iOS (nav bars hiding/showing) + the 1px JS hacks for content failed in places too. This approach still makes good use of scrollTrigger / scrollTo to enhance UI and give hooks for controls, but with less js overhead and a sprinkle of CSS layout tricks on content.

Thank you both for taking the time to look at this. Much appreciated (Especially on a saturday!) This explains a LOT of headscratching. Makes total sense. Thanks :)

I'm close here but can't get this over the line.. probably something very stupid (been a long day) The js doesn't fire correctly clicking the up arrow. Down works reasonably well... perhaps something in my approach with ScrollTo+Scrolltrigger hooks (using/updating data attr.). Also scrolltrigger doesn't update first slide data id when reaching the top (scrolling)... Anyone got any ideas? Any help would be hugely appreciated.

Thanks Jack. Not getting a lot of love with Chrome/Edge for any animation TBH - GSAP or not. MixBlendMode answers so many good design questions too — particularly fixed nav items on a transparent BG. Appears that this machine's CPU might also be a factor as the client see's no problems on their macs (so it's still a concern, but usually the other way round!).

Thanks Jack I tried that sadly no joy. Looks like Chrome/Edge just really hate any relatively complex animation (scrolltrigger with splittext is especially bad) with any kind of mix blend mode element overlaid. In this case we wanted the logo/menu to use mix-blend-mode:difference; Also tried these which can have worked on other animation issues - usually in Safari though: will-change: transform, opacity; perspective:1000px; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translate3d(0, 0, 0);

Hi, hoping someone might have run into this before... If you disable mixBlendMode on the cursor effect in Chrome, in the codepen example (full screen ideally, to put a little pressure on the CPU) the transitions are seamless. Adding it back in you'll see a massive drop in performance (scrolling up and down the page at a decent, but not excessive rate) This happens with any element that's set above any animated element with mixBlendMode set (in CSS or via GSAP) — a menu link, or logo for example. CSS3 transitions/animations aren't affected anywhere near as badly... It's only apparent in Chrome/Edge — anyone know fix or good guess at one? Perhaps a lesser used "justGetWithIt: 'letsGo'" parameter or CSS webkit hack?

Wow. Thanks Cassie. Didn't see this reply till now. That's really helpful thanks. Let me try it and see if I can get everthing to stagger (Which is still an issue but seeing it done like this with conditionals definitely seems a good route).

Just about got there (so close) then realised that of course some UI patterns wouldn't fit into the ideal... https://codepen.io/liamcrean/pen/ZExpgNp Note the first 3 columns of text under the first row of images - they animate before they're in-view. I used a parent wrapper to trigger events which seemed like a good approach. Any bright ideas how to solve it... maybe a class for each object I want to animate + one extra for scrolltrigger?