Jump to content

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


  • Posts

  • Joined

  • Last visited

About limbo

Recent Profile Visitors

499 profile views

limbo's Achievements

  1. 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
  2. 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
  3. Agreed! Updated with video controls/timing etc https://codepen.io/liamcrean/pen/NWaYOqg
  4. 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
  5. 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
  6. 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
  7. 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.
  8. 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
  9. replace TweenLite.set / TweenLite.to with gsap.set / gsap.to More here:
  10. 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).
  11. 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
  12. Doh! Thanks I've updated my pen. Also needed to set it to pause it in the HTML, and then play() in JS - all nicely synced up
  13. Thanks Cassie I've taken a look through and it definitely looks like the way to go - but I'm having problems translating it to GSAP3... I'm sure I'm missing something very basic... any ideas? https://codepen.io/liamcrean/pen/eYWqJgw
  14. Hello. Anyone know if it's possible to control a video within a GSAP timeline, so that other non video elements (in this case text) can be queued up alongside the right point in the video clip. I've had a good look about for examples similar bits but can't find a concrete anwser. Thanks
  15. When working with GSAP and Barba I've found the best approach is to wrap your gsap timelines in functions and call them on barba transitions/views. You tried that? Something like: function pageTransition() { // your splittext / other onload stuff } Then: barba.init({ // barba configurations here transitions: [{ // or 'views' depending on your use case async enter(data) { pageTransition() console.log('Transitions: Enter'); }, }] }); // barba.init