Cameron Knight

Paul you did it again! You're always solving my issues for me 🙏 Thanks for spending the time on this and explaining refreshPriority. I was just spending hours tweaking the wrong things but it's such of a silly mistake now that i know the solution. Really appreciate it Paul! 👏

Hi again 😀 I have come across an issue that I can't seem to find a solution for. When I scroll to the pinned horizontal section, it's like the next sections ignore the pinned section and keep changing colours. I'm finding it hard to explain but you'll see what I mean from the example. Each section should be a different colour but the pinned section is making the dynamic colours change before the next sections. Anyone know what I'm doing wrong?

I ended up adding the following line based off this GSAP example: Locomotive Scroll x ScrollTrigger and it seemed to fix it for me for both mobile & desktop 🥳Thanks for the pro tips Paul. pinType: document.querySelector(".container").style.transform ? "transform" : "fixed"

Paul, you son of a gun! 👏 Thanks so much for explaining this to me and showing me a solution. You're the bomb! I'll play around with this solution and tweak the desktop version and maybe move the scroller to the body for safekeeping Thanks again!

Hey legends. Forgive me if this is a Locomotive issue but I've been trying to pull off a horizontal scroll section but have come across an issue on mobile where as soon as it pins to the section, it becomes REALLY jittery and trying to overflow the section. Sometimes it will forget to pin after a second and readjust. I'm sure it's something i've done with my configuration with Scroll trigger & Locomotive but I can't figure it out. If anyone knows how i can improve this or have come across something similar, i'd appreciate any advice ✌️

This is absolutely incredible! Thanks Greensock team for all your hard work! 👏👏👏

You guys rock @GreenSock. Thanks for your help. After playing around with the animation and digging through some forums, I found the solution! I had to add the following CSS to the element that was flickering and it stopped the flickering in Safari 🥳 -webkit-transform-style: preserve-3d

Hi @ZachSaucier, Thanks so much for the quick reply. I'll do what you suggested and start stripping back a few elements to see what the issue is. Appreciate the feedback.

Hi ladies and gents. Hoping someone can help me out with the performance of this animation in Safari. I built a site for a friend and it works fine on Chrome, Firefox and Edge but on Safari it flashes towards the end of one of the animations in the timeline. I have no idea why. If anyone could give me some advice on how to fix this and any other tips to improve the performance, i'd really appreciate it 😘 https://theswirlytrain.com Here is a video example of what is happening. // start animation at top of page function scrollTop() { if ('scrollRestoration' in history) { history.scrollRestoration = 'manual'; } window.scrollTo(0,0); } const tl = gsap.timeline({ defaults: { ease: 'power3.out' }, onStart: scrollTop }); tl.set('article', {autoAlpha: 1}); tl.from('.home .artwork .elementor-widget-container', 3, { scale: 8, autoAlpha: 0, delay: 0.3}); tl.from('.home .elementor-button, .signup-form, .release-details', 1, {autoAlpha: 0, y: 40, stagger: 0.4, delay: -1}); tl.from('header', 1, {autoAlpha: 0, delay:-0.5}); tl.from('.moving-text', 3, {autoAlpha: 0, scale:1.2, x: 100, delay:-0.5});

I finally got a simple transition working with gsap 3 & barba V2! 🎉 The transition function that worked for me looks like this: function leaveAnimation(container) { return new Promise(async resolve => { await gsap .to(container, { duration: 1, opacity: 0, }) .then(); resolve(); }); } One really simple thing that took me a while to figure out was making the enter animation work. This was fixed by just adding css to make the barba container positioned absolute: .container { position: absolute; left: 0; top: 0; width: 100%; } I'm going to leave this working example here incase anyone else needs it to reference from.

Hey @ZachSaucier, really appreciate the quick response. The GSAP community is the bee's knees. Love it. I did make a post at Barba a few days ago so I'll wait to hear back from them. If I have any luck I'll post a working example here.

Hey gang. I've been trying to get a simple page transition working using GSAP 3 and Barba.js V2 for some time now but not having any luck. All the docs and examples out there haven't seemed to help me with the latest versions. I'm not a great developer but it's become my life long goal to one day solve this I've tried 2 methods below (onComplete and .then) but no dice. I'd appreciate any help I can get! Thank you! See the full code on codesandbox.io function leaveAnimation(e) { var done = this.async(); gsap.to(e, 1, { opacity: 0, onComplete: done }); } function enterAnimation(e) { return new Promise(resolve => { gsap.to(e, 2, { opacity: 1 }).then(resolve()); }); } barba.use(barbaPrefetch); barba.init({ debug: true, transitions: [ { name: "one-pager-transition", to: { namespace: ["one-pager"] }, sync: true, leave: data => leaveAnimation(data.current.container), enter: ({ next }) => enterAnimation(next.container) } ] });