Jump to content


  • Posts

  • Joined

  • Last visited

About limbo

Recent Profile Visitors

766 profile views

limbo's Achievements

  1. 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.
  2. 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 :)
  3. 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.
  4. 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!).
  5. 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);
  6. 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?
  7. 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).
  8. 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?
  9. 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.
  10. 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.
  11. 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 👌
  12. 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.
  13. Yeah - that's a relic from tinkering. Removed.
  14. 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...
  15. 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?