Jump to content

OSUblake last won the day on September 16

OSUblake had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Posts posted by OSUblake

  1. 7 minutes ago, vivek1234 said:

    I dont know how gsap workins differs with and without strict mode


    GSAP works the same regardless. It's React that is changing its behavior with strict mode. In strict mode, it calls everything twice to help surface bugs;  but unfortunately, that also unintentionally creates bugs.






    As Dan brought up with his thought experiment with clicking a button really fast, that will create from logic issues. 



    Check out how the opacity breaks if you click restart really fast. That's exactly what React is doing in strict mode.


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


  2. Hi Charlyta,


    I'm not sure what you're asking here, but your #content has display: none and visibility: hidden on it, so you would need to resolve both of those. And you don't visibility: hidden if display is set none.


  3. Hi Sam,


    I would recommend going through this thread and reading what I have to say about approaching everything from a purely animation point of view, meaning don't think about scrolling. So instead of thinking about how can I do x when y scrolls into view, think about the animation in an isolated context. That cuberto animation should be pretty straightforward if you just think about what's happening as a normal animation. All you need to do is create a timeline that animates the text container and images up.




    • Like 1
  4. 2 hours ago, DK7 said:

    but why does this code set the 3rd section pinned? If I replace the * 2 with a * 3, the 4th section is pinned. I just don't get the point no matter how hard I try to understand. Doesn't the code actually mean that each section gets an xPercent value of -100 * 2, i.e. -200?


    I don't how familiar you are with arrays, but knowing that arrays are zero-based is key to understanding all that. Zero-based means the first item has an index of 0. So the second item would have an index of 1, the third item would have an index of 2, and so on.


    And think about it in terms of math. How many screen widths is the first panel away from the viewport? It's already in view, so that would be 0. The second panel is 1 screen width away, the third panel is 2 screen widths away and so on.


    And that's why you'll commonly see this calculation to do horizontal effects.

    xPercent: -100 * (sections.length - 1),


    We subtract 1 from the length because length is not zero-based. So if there are 5 sections, i.e. the array length, then the last section will have an index of 4. Yes, it can be confusing, but that's just how it is.


    2 hours ago, DK7 said:

    but why does a .to step have to come before tl.to(sections...) so that section 3 is pinned?


    First off, that section is not being pinned. What is being pinned is the trigger you set here.


    let tl = gsap.timeline({
      scrollTrigger: {
          trigger: ".main-container", // this is what gets pinned
          pin: true,
          scrub: 0.1,
          end: "+=2000"


    Throughout this thread, I've been trying to make it a point that you need to approach it as an animation problem and not a scrolling problem. 


    So here's essentially what a horizontal animation would look like if you could scale it down. The red box is meant to represent the viewport of your screen.


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


    And ScrollTrigger is very similar to GSDDevTools in that it can scrub animations. If scrubbing that animation looks fine in GSDevTools, it will look the same if we hook it up to ScrollTrigger.


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


    So I would suggest trying to make a timeline just like I did. If it works without ScrollTrigger, it will work with it. That's a hint that you should not have any nested ScrollTriggers inside your timeline, like I see here.


    tl.to('.list-left ul', {
      scrollTrigger: { // !!! you should never have a nested ScrollTrigger
          trigger: '.list-left ul',
          start: "83% center",
          scrub: true,
          markers: true,


    See the most Common ScrollTrigger Mistakes for more information.



    And for the images, I would not change the src as you can't animate that. To do a crossfade you need to have all the images inside the DOM, and then absolutely positioned on top of each other.


    • Like 5
  5. Hi Spycatcher,


    I don't use Animate so I can't give specifics, but you can use the MotionPathPlugin to animate EaselJS objects in Animate. 


    @Carl do you have any courses on how to use Animate + GSAP?



    • Like 1
  6. Welcome to the forums @Lighton


    Your conversion seems fine, but I think you might have stumbled upon a bug. When it messes up, the press init x value is different than the press value, causing it to jump. Please standby while we investigate.


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


    8 hours ago, Lighton said:

    I've read the migration docs and I thought that I was already there.


    Also check out the part about Getting an object's properties. You'll need to do that for all the _gsTransform stuff in that applySnap function.


  7. Nothing stands out as being off, and you can certainly animate PNGs, but I'm not sure you would see that animate if the rotation is going from -1 to 1. That's a tiny amount of movement.


    Can you make a minimal demo of the issue?