Jump to content
Search Community

Cameron Knight

Members

  • Posts

    12

  • Joined

  • Last visited

 Content Type 

Posts posted by Cameron Knight

    Dynamic background colours not working after pinned horizontal scroll section with Scrolltrigger (and Locomotive Scroll)

    in GSAP

    Posted

    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?

    See the Pen oNzxXzr by cameronknight (@cameronknight) on CodePen

    Pinned horizontal scroll section is shaky using ScrollTrigger & Locomotive Scroll

    in GSAP

    Posted

    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 ✌️

    See the Pen qBNvrRQ by cameronknight (@cameronknight) on CodePen

    • Like 1

    GSAP animation flashing in safari

    in GSAP

    Posted

    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

     

    • Like 2

    GSAP animation flashing in safari

    in GSAP

    Posted

    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});

     

     

    Page transition with GSAP and Barba.js

    in GSAP

    Posted

    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.

    • Like 3

    Page transition with GSAP and Barba.js

    in GSAP

    Posted

    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)
    }
  ]
});

     

×
×
  • Create New...