Jump to content
Search Community

AnimatiCSS

Premium

  • Posts

    23

  • Joined

  • Last visited

 Content Type 

Posts posted by AnimatiCSS

    Infinite Carousel with Draggable

    in GSAP

    Posted

    2 hours ago, krause said:

    Can anyone help me achieve this for my html setup please?

     

    I do not want it to pause on hover, and when Throw i don't want it to stop. So basically the last example that @AnimatiCSS proviced, but for my HTML structure, and without the pausing on hover.

    <div class="marquee">
      <div class="track">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
      </div>
    </div>

    Look, how about this:

    See the Pen JjeGgyV by animaticss (@animaticss) on CodePen

    Infinite Carousel with Draggable

    in GSAP

    Posted

    22 hours ago, Harry J said:

    Hello , 

    I was just wondering if I can do exactly this but with reverse direction, like if someone is dragging to the left then the slider should autoplay from right to left and if dragging from left to right, then the slider should autoplays in that direction.

    thanks in advance

     

    Hello!

    I've tried to play with simply changing the timeScale of the animation, but it doesn't quite work well:

    See the Pen ZEqdMmr?editors=1010 by animaticss (@animaticss) on CodePen


    I suppose that from my code of the previous version, what would have to be done is to kill the registered animation and register a new one with the new direction of movement, although I don't know if that would work either, that's what I can think of to try .

    • Like 1

    Infinite Carousel with Draggable

    in GSAP

    Posted

    On 8/14/2020 at 1:01 AM, ZachSaucier said:

    I converted Blake's pen to GSAP 3:

     

     


    Hello!

     

    This tween has been very good for me.
    They asked me for a "slider", with continuous autoplay and loop, which you can drag.
    Also, to stop when hovering over the slider and play when leaving.

    Also, they asked me to go from right to left, so I added the possibility to reverse it with the "direction" variable.

    I've created this codepen and I'm leaving it here in case anyone else needs something similar or just to get some new ideas. All the best!

     

    See the Pen zYLjYQV by animaticss (@animaticss) on CodePen

     

    • Like 3

    GSAP 3.10.4 issue scrollsmoother (on phone drag X and normalizeScroll)

    in GSAP

    Posted

    1 hour ago, Cassie said:

    Hey there - lockAxis is a draggable plugin property and you're not using draggable, so no.


    Is this link still causing issues for you on mobile though?

     

    https://cdpn.io/pen/debug/rNJGzGa

     

     

     

    Hello,

     

    LockAxis is a property added to Observer.


    Scrolltrigger can set an Observer with the ScrollTrigger.observe() method.

    https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.observe()


    ScrollSmoother, it is still a ScrollTrigger.
    So can our ScrollSmoother set the .observe() to lockAxis true to solve the problem in this thread?

     

    Thank you

    GSAP 3.10.4 issue scrollsmoother (on phone drag X and normalizeScroll)

    in GSAP

    Posted

    Hello,

    first of all thank you for this fantastic library!

     

    I have created a codepen with the following problem:

    If you access from phone, when dragging on the X axis, scrolling on the Y axis is also applied!

    Since there is a slider, users will make that touch movement on the X axis to display more slides, but doing so breaks the user experience due to the issue I mentioned.

     

    Before, in version 3.10.3 this did not happen (with the same configuration that you see in that codepen).

    If you want to check the correct operation, you should use all the libraries in version 3.10.3 of GSAP (I don't know how to do it, right now there is V 3.10.4 in the codepen)

     

    See the Pen rNJGzGa by animaticss (@animaticss) on CodePen

    Scrolltrigger.observe return bouncing values on scroll

    in GSAP

    Posted

    Hello,

     

    I come back to leave here the codepen with the solution!

     

    See the Pen ExoedQg by animaticss (@animaticss) on CodePen

     

    I relied on this code to finally give me the correct address.


    https://showcased.webflow.io/projects/gsap-infinite-scroll-onmousewheel-grab

     

    Actually, I ended up using ticker to make the .set of the Y position, it was necessary. But in this case applying a lerp animation.

     

    Anything to improve the code will be well received.

     

    The animation isn't exactly the same right now as it is in heycusp, aside from the rotations being exaggerated right now (not my concern),

    in heycusp's it seems that the nodes move a bit more in their Y if the node is in view, right?

     

    Any idea how to deal with this?

     

    Thank you!

    Scrolltrigger.observe return bouncing values on scroll

    in GSAP

    Posted

    47 minutes ago, Cassie said:

    Sorry for the last post! Replied without looking properly.

     

    Here's a little tweak. It's far from perfect, there's a little logic error somewhere because there's a gap after number 10. But hopefully it gives you a starting point.

    At the moment your demo is tweening constantly, you need to increment bit by bit and pause any further animations while the previous is still occurring.
     

     

     

    Hello, thanks for answering!

    Your example moves further away from this, which is the goal:
    https://heycusp.com/

    Thanks anyway, you give me more perspective with your code

     

    Scrolltrigger.observe return bouncing values on scroll

    in GSAP

    Posted

    Hello, first of all congratulations for GSAP, it's amazing!

     

    I want to make an infinite scroll menu like on this website: https://heycusp.com/

     

    I want to make it smooth. So I thought maybe Scrolltrigger.observe would be the way to go.

     

    The first step I wanted to do was to apply a transformY based on the scroll performed.

     

    In the codepen that I created, for some reason, self.deltaY returns a value that later returns to the initial point (doing a bounce and returning to the initial value)

     

    I don't understand what I'm doing wrong.

     

    Thank you very much!

    See the Pen zYpLZOb by animaticss (@animaticss) on CodePen

    Scrolltrigger horizontal with containerAnimation control start

    in GSAP

    Posted

    5 minutes ago, Cassie said:

    Then you need to move the start trigger even further to the left.

      

     start: "left 100px",

     

    this does not work, what it does is that you practically do not see the animation.

    The idea would be, in some way, first to launch the animations while you enter the Y axis, then go on to listen to the X axis?

    How to do that?

    Here I leave the codepen of what you say, and as you can see, it doesn't work, the animation is almost off the screen

     

    See the Pen QWabKwB by animaticss (@animaticss) on CodePen

     

    Scrolltrigger horizontal with containerAnimation control start

    in GSAP

    Posted

    39 minutes ago, Cassie said:

    Puede mover los disparadores de inicio y fin de la primera animación así...
     


     

     

    Sin embargo, este enfoque no tiene mucho sentido. Si su disparador de inicio está muy a la derecha, cuando ingrese a esa sección, la animación ya se habrá "disparado".

     

    Hello, thanks for answering.

    That does not solve my problem, because if you leave the box aligned to the left as in my codepen, it continues to launch as in my example.

    Yes, what I want to do makes sense, the problem is how I approach it.

    Scrolltrigger horizontal with containerAnimation control start

    in GSAP

    Posted

    Hi, I created a codepen where a horizontal scrolltrigger is used.

     

    If you look at box-1 in the red panel, although it is waiting to hear the X axis, it appears already animated, how can we make it wait until we are inside the ".pin" element first?

     

    I need to be able to tell box-1: hey, wait until we're in the red panel first and then start controlling the X axis.

     

    It's possible?

     

    Thank you very much!

     

    See the Pen bGadEwK by animaticss (@animaticss) on CodePen

    Scrolltrigger with pin + Locomotive Scroll with data-scroll-section

    in GSAP

    Posted

    Hello, first of all congratulations on the great work with this library.

     

    When using GSAP + Locomotive Scroll, if I assign the data-scroll-section attribute in the sections to improve performance (as locomotive suggests) then, if we have a Scrolltrigger animation using .pin, it breaks.

    I imagine because it modifies the DOM by adding a parent above said section.

    What can we do to solve this problem?

     

    Here I leave a codepen with a demonstration of what I say:

     

    Thank you!

    See the Pen wvqGBMM by animaticss (@animaticss) on CodePen

    How to reset ScrollTrigger trigger position?

    in GSAP

    Posted

    3 hours ago, AnimatiCSS said:

    In that case, the approach I mentioned will not work.
    Maybe in your case you should play with the DOM events.

    For example, when APP2 is updated, launch the X function that updates your APP3 (i.e., launch ScrollTrigger.refresh ());)

    Then I try to mount a codepen with this solution in case it works for you.

    All the best!

     

    I have gotten it to work through events, this solution should be able to implement it.

     

    I just modified in the CSS the selector .expandable> div {}

    I removed the transition and assigned it by default height: 100px;

     

    Then I created a custom event called "recalc" to recalculate the position of the ScrollTrigger when launched.

     

    In APP2 I modified the animation (now it is done with GSAP) so that when the animation finishes we can launch what we need (dispatch of the custom event created by us);

     

    See the Pen ExZrZmQ by animaticss (@animaticss) on CodePen

     

    All the best!

    • Like 2

    How to reset ScrollTrigger trigger position?

    in GSAP

    Posted

    3 hours ago, DouggieO said:

    Unfortunately we are a bit handcuffed there... we are on a multipage modular CMS which lets our marketing team build the pages with our modules. We tried to find a way to architect everything into 1 app, and we may still get there, but for now there were too many edge cases where modules could not be done in react so each module has its own root/app so they can be inserted into the dom interchangeably. Make sense?

     

    If you have any ideas on how to use the context api across multiple apps, please let me know. I think redux could work for this, but I was hoping to not have to introduce that for the minimal things we’d need it for. I’m also wondering if I can just create a global object in plain js that I can use as a simple global state, and write a hook that listens for changes to it. 

    In that case, the approach I mentioned will not work.
    Maybe in your case you should play with the DOM events.

    For example, when APP2 is updated, launch the X function that updates your APP3 (i.e., launch ScrollTrigger.refresh ());)

    Then I try to mount a codepen with this solution in case it works for you.

    All the best!

    How to reset ScrollTrigger trigger position?

    in GSAP

    Posted · Edited by AnimatiCSS
    error in text

    8 hours ago, DouggieO said:

    @AnimatiCSS When you say "global context" do you mean the React Context API? I didn't think it was possible to use that across multiple apps/roots?  How else could we do that?

    Hi!

    Yes, I mean exactly that, React Context API.

    Actually the focus of your code should be 1 app that contains components, and not a mix of different Apps.

    Is for some reason that focus in your code?

    Look here I have organized your code by components within a general APP.

    Now it is better focused to add the global context.

    If you give me more time, then I will add it in another codepen.

     

    See the Pen PoWVwKm by animaticss (@animaticss) on CodePen

     

    All the best!

    How to reset ScrollTrigger trigger position?

    in GSAP

    Posted

    Hello!

    From what I understand, you want your app2 to finish opening or closing, another component (app3) makes a scrolltrigger.refresh() to recalculate its start and end positions.

     

    To inform app3 that app2 has finished animating, you can do so in a number of ways.

     

    For example, you could add a global context that has a state inside that is:

     

    const [changedHeight, setChangedHeight] = useState(false);

     

    This state determines a value throughout your website to inform you if the height of the website has changed.

    In app2, you access that global state and once you click to open that component, once it finishes opening, you could launch something like this:

     

    setChangedHeight(!changedHeight);

     

    At that moment, that value will change informing that the height has been updated on your website. It does not matter if the value is true or false, what matters is that it has changed.

    In app3 you should have a useEffect in your code and add the dependency on whether your changedHeight changed.

    Something like that:

     

    useEffect (() => {
    Scrolltrigger.refresh();
    }, [changedHeight]);

     

    This useEffect will only be fired when the value of changedHeight changes.

    Another point, you have to correctly inform when your animation finishes in app2, maybe it would be a better approach with gsap, since when finished you can use a .call() to do:

     

    setChangedHeight (!changedHeight);

     

    Unfortunately I'm on mobile and I can't write code correctly, but I think this explanation can give you some ideas.

     

    All the best!

    • Like 2
×
×
  • Create New...