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?

Thanks for the super quick response Will do. I'll make another pen. Bit more complexity — I think it'll be a useful case for folk once it's cracked.

Hi @Cassie Thanks again for your help. Think I need to change tack a little as this route is limiting the fine control of splittext. Do you know if it's easy to run splittext as a function onEnter? So I could do something like: single timeline for elements within the page - staggering the load Scrolltrigger runs to animate any element in view - calls splittext as a function onEnter Rather than batching - which appears to be peformant for lots of elements of the same type but not ideal for a range of different elements added to the timeline. Do you (or anyone else reading this) know of an example that might cover this approach - to get me on the right track. Thanks again.

That looks to be achieving a lot of what I need. Thank you. I'll work up a flex example and post back if I get to where I need it. Thanks Cassie ?

Thanks, yes exactly. It's the trouble I'm having. (We need to do same! So hot here it'll be a short wander with the pup later I think) Feels like solving this will create a really nice reusable bit of code that answers a lot of UI questions when wanting to combine the timeline, scrolltrigger, batch and splittext. Which I think is a common use case — for me at least. Ta.

Yeah - that's a relic from tinkering. Removed.

Thanks for the super quick reply Cassie. That toggle is just to make the animation simpler once splitText has run (should have removed before posting) + I knew I'd not explained my issue with enough clarity - or indeed made a clear example... On a larger screen - the images and splittext animations (within viewport) occur simultaneously. I'm looking to run them in sequence (any below the viewport will naturally follow this pattern). I'm sure it'll be simple enough - where I need one timeline with batch, and splittext runs when in view...

Hello. I'm looking for some general advice / code best practice when setting up a page that uses Scrolltrigger + Splittext. The ideal would be to have a mix of splittext and other gsap targets that animate when scrolled into view - but also animated all items/text within viewport on first load 1. If in viewport, animate SplitText and/or objects after page load 2. Animate in as they become available - again, not too hard - using Scrolltrigger 3. Do it sequentially so first object/splittext, second object, third splittext etc etc - could be any order of items (which is where I'm stuck) This pen outlines my issue (best viewed a bit larger than inline here) - the visible images/text all animate at the same time. I've crudely set up two timelines. Combining them with batch or stagger is where I'm hung up... So in short, what's the best way to combine Splittext and ScrollTriggger into the timeline of other Scroll-based animations?

AHA! ok, the lightbulb’s on now

Taking the example included from the GSAP Collection (with a very small edit) - or any from the collection for that matter. There is always a large space after the scroll smoother container/wrapper elements... Is there a way to clip/overflow this? So that content can follow after? Only change I made to the demo CSS isposition:relative on #wrapper so it can sit in page flow + some added paragraphs outside this. You can see the added paragraphs appear only after a full viewport scroll height below last image.

Resovled. I use a "parachute" load.js file to get some UI stuff in there early dom ready (don't judge me). It included GSAP core which causing a load conflict somwhere — but also not really needed. So have moved into main app.js and it's loading fine alongside barba Turns out I was loading an older version of ScrollTrigger. Obvious now.