Jump to content
Search Community

Julia Shikanova

Members

  • Posts

    21

  • Joined

  • Last visited

 Content Type 

Posts posted by Julia Shikanova

    v3.10 ScrollTrigger.normalizeScroll breaks disabling scroll libs

    in GSAP

    Posted

    Hello!

    New v3.10 realise brought quite a few interesting new features and it's very exiting. But i'm experiencing slight issue with ScrollTrigger.normalizeScroll(true), body-scroll-lock, scroll-lock and possible other packages or solutions to disable page scrolling is breaking if it used with normalizeScroll (visible scroll bar disappears as expected, but page underneath is still scrollable).

    See the Pen zYpyxJL by jshikanova (@jshikanova) on CodePen

    ScrollTrigger - how to remove gaps between scrollTrigger timelines?

    in GSAP

    Posted

    Hello @akapowl, thank you for your time.

     

    I spend some time implementing it for much complex animations and it worked fine, but in the process of doing it I found much better solution: 

    gsap.timeline({
  scrollTrigger: {
    ...otherProps,
    pinSpacing: false
  }
})

    It does exactly the same, but it so much easier, especially because there is not need to hardcode start and end points.

    It's a shame it took me so long tho

     

    Solution: 

    See the Pen eYeLNWQ by jshikanova (@jshikanova) on CodePen

    • Like 2

    How to sync two complex timeline animations inside one scrollTrigger

    in GSAP

    Posted

    Hello!  

    const globalTimeline = gsap.timeline({
  scrollTrigger: {
    trigger: wrapper,
    start: "top top",
    // end: "bottom top",
    end: "400%",
    pin: true,
    scrub: true,
    invalidateOnRefresh: true,
    markers: true
  }
});

globalTimeline.add(animateScrolling()).add(animateBox(), "<");

    I have globalTimeline with scrollTrigger and I'm trying to figure out is there are any way to sync animateScrolling() (one step animation) with animateBox() (3 steps animation). Currently animateScrolling() is finishes way before animateBox(). It's because two animations have different duration. 

    The main problem, my actual timelines is more complex than this CodePen, so specifying duration for each timeline is not really an option. Is there any other way to make two animations execute at the same time?

    Thanks in advance!

    See the Pen VwMermZ by jshikanova (@jshikanova) on CodePen

    ScrollTrigger.matchMedia() resize bug

    in GSAP

    Posted

    2 hours ago, OSUblake said:

     

    Not sure why that wouldn't be possible. I would think that would make it super easy. 

    ScrollTrigger.matchMedia({
  "(max-width: 767px)": mobile,
  "(min-width: 768px)": desktop
});

function desktop() {
  // create desktop animations and scroll triggers
}

function mobile() {
  // create mobile animations and scroll triggers
}

     

    It's not very suitable for the particular project and calling every other functions with scrollTrigger animation inside every matchMedia() doesn't seem like very nice solution, I think

     

    2 hours ago, OSUblake said:

     

    Another option to try might be something like this. 

    ScrollTrigger.addEventListener("refresh", () => ScrollTrigger.sort());

     

    It works, but it takes quite a few moments to recalculate so it flickers (video) even with small demo

    See the Pen VwWYbaK by jshikanova (@jshikanova) on CodePen

    ScrollTrigger.matchMedia() resize bug

    in GSAP

    Posted

    21 hours ago, OSUblake said:

    You have a straggler here. 

    const timeline2 = gsap.timeline({
  scrollTrigger: {
    trigger: "#section-2",
    start: "center center",
    end: `+=200%`,
    scrub: 0.5,
    pin: true,
    invalidateOnRefresh: true,
    id: "section-2",
    markers: true
  }
});

     

     

    I really appreciate the solution, but...

    In my project I have a bunch of sections (let's say 10, for example), each of the sections animating with different functions, and in some of those functions I need to have a different animations on desktop and mobile (= using matchMedia). And calling every other functions inside every matchMedia is not possible. Is there are any other way to trigger recalculating scrollTrigger's values (start and end positions, sizes, etc)?  Isn't it weird it's not doing it and breaking layout, overlaying sections that supposed to go one after another?

     

     

     

    ScrollTrigger.matchMedia() resize bug

    in GSAP

    Posted

    13 minutes ago, OSUblake said:

    Did you inspect the element? It's animating it correctly, but you don't see it complete because of the overlap.

    Sections is not supposed to overlap, but animate one after another and matchMedia is breaking it on resize when breakpoint is changing

    How to recreate draggable slider with snap and smooth slides transform?

    in GSAP

    Posted

    On 8/4/2021 at 3:49 PM, OSUblake said:

    You're probably going to have to figure out what the x value should be on resize in that setBounds function.

      

    
const setBounds = () => {
  sliderWidth = slides[0].offsetWidth * slides.length;

  gsap.to([slider, proxy], { 
    width: sliderWidth, 
    x: 0 // ??? hard reset
  });
};

     

     

    Yes, I figured it might be the case, but hoped there're a better solution.

     

    I recalculated new x position on resize, but it's far away from perfect: 

    const setBounds = () => {
  prevSliderWidth = sliderWidth;

  sliderWidth = slides[0].offsetWidth * slides.length;

  const newX =
    (sliderWidth / 100) *
    (gsap.getProperty(proxy, "x") / (prevSliderWidth / 100));

  gsap.to([slider, proxy], { width: sliderWidth, x: newX });
};

setBounds();
window.addEventListener("resize", throttle(300, false, setBounds));


    I had to use 300ms throttle, any less then that breaks recalculation for some reason. And 300ms throttle makes layout on resize look jumpy unfortunately


    See the Pen PomdNGV?editors=0011 by jshikanova (@jshikanova) on CodePen

     

    Thanks to everyone who helped me to figure it out!

    • Like 1

    How to recreate draggable slider with snap and smooth slides transform?

    in GSAP

    Posted

    I wasn't trying to make someone else to redo entire thing for me, it wasn't my intention at all. I'm sorry if it sounded this way.

     

    Original v2 demo: 

    See the Pen JawEyN by GreenSock (@GreenSock) on CodePen

     

    Rewritten v3 demo: 

    See the Pen vYmjxGj by jshikanova (@jshikanova) on CodePen

     

    I managed to convert almost everything, excerpt one line in onRelease callback:  

    throwProps: { x: { end: this.endX } }

    And I have a few issues with rewritten demo [video]:

    1) slides get stuck with skew

    2) dragging towards an edge makes slider content jumpy

     

    Can it be the missing line with throwProps? Is there similar thing in v3? Or is it something else?

    How to recreate draggable slider with snap and smooth slides transform?

    in GSAP

    Posted

    1 hour ago, Cassie said:

    There's a *lot* going on in that slider, I'm afraid it's a little beyond the abilities of the forums to put together in a demo.

     

     

    Yes, it makes sense, sorry I didn't specify it from the beginning.

     

    1 hour ago, Cassie said:

    Is there a particular bit you're trying to mimic?

     

    Mostly I need to replicate slides transformation (scale and skew) onDrag, easing (very fast at the beginning and slower near the end) and snapping.

     

    If anyone can help me with one part or another I would be extremely grateful 

×
×
  • Create New...