limbo

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.

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

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

Agreed! Updated with video controls/timing etc https://codepen.io/liamcrean/pen/NWaYOqg

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

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

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

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.

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

replace TweenLite.set / TweenLite.to with gsap.set / gsap.to More here:

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).

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

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

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

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

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

Nice. That worked a treat. As you added that I also found another post here that demo'd a great way to calc vh/vw to then use as variables: const vh = (coef) => window.innerHeight * (coef/100); const vw = (coef) => window.innerWidth * (coef/100); Which can be used like: ScrollTrigger.create({ trigger: '.my_elem', start: vw(10) + ' top', end: vw(10) + ' top', onEnter: enterFunc, onLeaveBack: leaveFunc }); Thanks for the pointer

Hello I'm working on a build and want to use GSAPs features to run a enter/leave functions. Got it working well so I can handle some class changes to the body but I'd love it if the trigger points could be vw as the grid is all based on vw units and everything scales from there. Simplified code: ScrollTrigger.create({ trigger: '.my_elem', start: 'top 10vw', end: 'top 10vw', onEnter: enterFunc, onLeaveBack: leaveFunc }); Those two vh units don't work in this usecase (as far as I got with it in any case)... any assistance or pointers would be grand. Thanks

Still working on this and found a nice way to cope with the problems I was having with custom font... only run revert on resize. Seems obvious now. function debounce(func){ // to throttle var timer; return function(event){ if(timer) clearTimeout(timer); timer = setTimeout(func,150,event); // 150ms seems like a good sweetspot }; } window.addEventListener("resize",debounce(function(e){ mySplitText.revert(); })); Needs testing on device - works well on desktop inc. Safari OSX.

@Carl - thanks for the explaination video/examples. It's very helpful to see it broken down like that. Nice. @OSUblake - thanks too. Great to see the different approaches. Both approaches really help to highlight scenario/state based transitions/timelines and the logic needed to corral mouse events. Good stuff.

FWIW pointermove has pretty good support: https://caniuse.com/mdn-api_document_pointermove_event Safari 12 is the closest to support timewise (2019) - FF/Chrome/IE11/Edge all pretty good. I'll probably just add the standard CSS cursor back for older versions with a media query.

Thanks @akapowl (and by proxy @GreenSock for resolving in that case). Good to know there's a resolution for 'most' browsers. I can target those without support and do something a bit simpler. Cheers Edit: Updated codepen, works well in OSX Safari/Chrome/FF ?

Thanks. It's kind of a both question IMO. Defo related to Swiper but also how the GSAP code I'm using handles it — I've made a big assumption it'd happen on any draggable element...

Hello I'm 90% there with some custom cursor work - and wondered if anyone could spare a few mins to help me resolve a bug with the dragging of the slides with the custom cursor in place. When you click & drag (swiperJS in this instance) the cursor doesn't follow the motion and snaps back on click release. I'm sure I've seen an example somewhere (codrops possibly) where it didn't do this - but I'm stretching my GSAP knowledge here. Any ideas? Thanks. (p.s - the content/effects below the slides are basic function tests - can ignore those). (p.p.s - I butchered the code for the follow cursor from a post here - still getting my head round GSAP). EDITED: Codepen

Thanks for the excellent replies @Carl & @mikel — one or either should help shore up this job. It's for a very specific control of an index page including image mask and splittext animation — so having a nice back-up method to help predict / and or / trigger slicker results will be ideal. Can use my original method for text links where the outcome isn't as important (underline moving in from left and out right onleave). ta