Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

About limbo

Recent Profile Visitors

635 profile views

limbo's Achievements

  1. AHA! ok, the lightbulb’s on now
  2. 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.
  3. limbo

    Barba.js + Smoother

    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.
  4. limbo

    Barba.js + Smoother

    Anyone else found that adding SmoothScroller via GSAP registerPlugin kills barba? (page transition killed and current URL reloaded) I know this is a very loose question - but just thought I'd check before setting up a pen / test somewhere.
  5. Thanks for the reply. That's put me on the right track — Ended up doing this // create array const sections = gsap.utils.toArray("section.service"); // then loop through 'sections' sections.forEach( section => { // get data attribute var theService = section.getAttribute('data-theservice'); // run GSAP on all sections gsap.from(section.querySelectorAll("section.service"), { duration: 1.5, stagger: 0.5, scrollTrigger: { trigger: section, start: "top 100%-=20px", // account for a little extra end: "bottom 100%-=20px", // account for a little extra markers: true, onEnter: checkData, onLeave: checkData, onEnterBack: checkData, onLeaveBack: checkData, } }); // check data attr against service position with scrolltrigger function hooks: function checkData() { console.clear(); console.log(">>>>" + theService); root.classList.toggle(theService); } // checkData }); // for each
  6. Hello I wondered if anyone had a good example I can start with — when using scrollTo (and I assume ScrollTrigger) with a list of links (like this example pen attached) where each link would update with a class when it corresponds with the current 'slide' (either by scrolling or clicking). Maybe using hashes? (my slides will all correspond with an anchor point so they can be linked from external sources... I expect this has been asked before a few times, but a few searches didn't turn anything up... https://codepen.io/GreenSock/pen/bGVjLwG
  7. Agreed! Updated with video controls/timing etc https://codepen.io/liamcrean/pen/NWaYOqg
  8. Obvious that it needs to be in a forEach array - I did try it but my dodgy attempt fell over completely. I probably should have tried making it work without the other moving parts - helps to focus. Cheers for the direction
  9. And similar one in HTML5 (instead of Vimeo - which can be a real pain when loading assets in via AJAX t then controlling timing/playhead etc) https://codepen.io/liamcrean/pen/yLzXQvR
  10. I've been working with a timeline and video for a while now - have built a few options and I need to do some titles overlaid with split text timed to the video... I've managed to split the text on the first line (words appear correctly - as seen when hitting reset) but I'm looking to do it for each of the lines... but I've been chasing my tail. New year blindness no doubt... Can anyone help me here? Edit: updated codepen
  11. Yeah. if you have fixed height, or say 50vh you can halve the values and it should work. The other trick I've learned here is to create VH/VW variables like this: const vh = (coef) => window.innerHeight * (coef/100); const vw = (coef) => window.innerWidth * (coef/100); Then you can specify VH/VW units in your options like: y:vh(-400) (if your footer is 800px tall for example). Handy.
  12. You need to make sure your scrolltrigger end is reached and use the gsap.from not gsap.to IMO — it'll be is easier if you set your footer to a fixed height (which you can halve) or say 100vh, and I'd use flex to align the items center (justify-content + align-items on the flex container). Then a small change to your gsap options. Something more like this perhaps? https://codepen.io/liamcrean/pen/mdwdKBp
  13. replace TweenLite.set / TweenLite.to with gsap.set / gsap.to More here:
  14. Last one. As there were some holes I needed to fill - namely adding full timeline with some basic text effects + play/pause/mute/reset/skip + background video Prototype: https://codepen.io/liamcrean/pen/oNWKdyB (a fair bit of repetition in the controls JS – need it to be super clear for ref).
  15. Thanks Mikel, that's useful. Also - for anyone that might find this useful too — got the same functions working with Vimeo API https://codepen.io/liamcrean/pen/Exmqyye