Jump to content
Search Community

Fabian W

Premium

  • Posts

    15

  • Joined

  • Last visited

 Content Type 

Posts posted by Fabian W

    Jump to a certain point within a fromTo() loop

    in GSAP

    Posted

    Hi,

     

    I have a probably simple questions, but my brain is just blocked at the moment, and cannot find anything in the forum / docs?

     

    A simple fromTo() loop

     

    gsap.fromTo(el, { x: '-25%' }, { x: '-75%', ease: 'linear', repeat: -1, duration: 12 })

     

    And at a click I want to quickly animate to -35.25% seemlessly (and continue scrolling afterwards)

    How would I do that?

    SmoothScroller ignoreMobileResize for non-touch devices

    in GSAP

    Posted

    On 1/30/2023 at 9:29 PM, GreenSock said:

    It is intentionally undocumented right now. Please just try it and let me know if it resolves anything for you. :)

     

    I watched your video and I cannot reproduce that behavior at all. :( I wonder if there's some secret I'm missing. 

     

    I also tried in on different Browsers and it seems to work on Firefox.

    Chrome and Safari are having the behavior.

    Which browser are you using?

    Also, do you have the debug console open and cache deactivated?

    autoResize: false seems to work.

    BUT now I have to build a resize -> refresh system for the whole website (e.g. we have accordions)

     

    an option to have a threshold for when the refresh happens would be great.

    is that possible?

    SmoothScroller ignoreMobileResize for non-touch devices

    in GSAP

    Posted

    6 hours ago, GSAP Helper said:

    I'm a little fuzzy on what you're asking here...

    Some tips that will increase your chance of getting a solid answer:

     

    • A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
    • A clear description of the issue -  "the purple div only spins 90deg"
    • A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
    • A very clear minimal demo that illustrates the issue

     

    By the way, it's generally a very bad idea to do lazy loading in ways that will cause layout shift. I'd recommend setting a width/height on the elements that are loading dynamically so that there's no layout shift.

    Sorry, yes it was not well written. I updated the original post with a new demo and a more precise formulation. Let me know if it's still hard to understand.

    SmoothScroller ignoreMobileResize for non-touch devices

    in GSAP

    Posted

    Hi,

     

    We would need an option to ignoreMobileResize also for non-touch devices.

    Is this possible?

     

    Reproduction:

    The demo simulates a the combination of SmoothScroller, ScrollTrigger and lazy loaded images. The only purpose of the onLeave method is to load the image while a scrub is taking place, it's not part of the actual problem. When scrolling down one can see the blue box animating -200px on y-Axis with a ScrollTrigger and scrub. This blue box is jumping to the beginning of the animation the moment the image is loaded.

     

    A lazy loading image may be a layout shift if the height and width of the image tag is not matching the actual size. This can happen if some odd formats like 16:9 get rounded. The difference is mostly between 1 and 2 px. 

    But these 1-2px still are a layout shift and force the SmoothScroller to do a refresh().

    A refresh() then forces the scrub animation of a ScrollTrigger to reset.

    This causes the element to jump.

     

    On mobile we have the ignoreMobileResize config. We would need something like this for desktop.

    So if these little layout shifts happen the SmoothScroller does not refresh().

     

    Best,
    F

     

     

    See the Pen GRBBdmq by anothercodepen (@anothercodepen) on CodePen

    No ScrollSmoother for another fixed scrollable element

    in GSAP

    Posted

    Hi again,

     

    we are dynamically loading the content now.

    NestedScroll is not working anymore,

    is it only for content present on the initiation of SmoothScroller?

    How to let it recalculate the allowNestedScroll?

     

    Edit: on my reproduction with CodePen it works.
    Are there any caveats with AllowNestedScroll? 

    I cannot find it in the docs.

     

    See the Pen dyjemxY by anothercodepen (@anothercodepen) on CodePen

     

    Best,

    F

    Position Sticky with ScrollSmoother

    in GSAP

    Posted

    Hi guys,

     

    super simpel questions, the other Forum Threads are a bit too complex for my use case.

    How to make an element sticky with ScrollSmoother?

     

    I do want to have /mimic the same effect:

    The element pins to a top value as long as it is within it's parent element.

     

    Would be great if you could help me out what to do.

     

    Thanks,
    F

    See the Pen zYLPpzP by anothercodepen (@anothercodepen) on CodePen

    No ScrollSmoother for another fixed scrollable element

    in GSAP

    Posted

    16 minutes ago, GSAP Helper said:

    It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

     

    Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

     

    Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

     

     

    If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

     

    Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

    I updated the topic with a reporduction.

    Here is the pen again.


     

    It's not possible to scroll the right <aside>.

     

     

    No ScrollSmoother for another fixed scrollable element

    in GSAP

    Posted

    Hi guys,

    We have a regular ScrollSmoother on the website.

    Now we open up a scrollable fixed element ontop.

    How to prevent the main page from scrolling while the fixed element is open?

    It seems that the scrollable elements scroll is not honored because ScrollSmoother takes over.

    How to achieve a second regular scroll element while ScrollSmoother is on?

     

    Thanks!

    See the Pen poZPxvm by anothercodepen (@anothercodepen) on CodePen

    Update y value with ScrollTrigger after content changes

    in GSAP

    Posted

    Hi guys,

    We have two divs with a different height which lay next to each other.

    If the user scrolls gsap scrolltrigger scrolls the divs in a way that on the bottom of the page (scroll end) they are aligned at their bottom line.

    This works easy if we calculate the leftover space to scroll with body height - div height.

     

    If one of the divs holds an expandable element the height of the div changes dynamically.

     

    Is it possible to refresh not only the start and end scrolltrigger values, but also the y value of the to tween?

     

    All the best,

    F

    See the Pen wvXYEGE by anothercodepen (@anothercodepen) on CodePen

×
×
  • Create New...