Jump to content

OSUblake last won the day on November 19 2022

OSUblake had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Posts posted by OSUblake

  1. 27 minutes ago, DK7 said:

    The animations are supposed to be triggered by scrolling.


    I know, but that's not important right now. Just focus on making the timeline. That's where a lot of new people mess up. They are approaching everything as if it's a scrolling problem, when in reality it's an animation problem. A timeline will work the same regardless of it's hooked up to ScrollTrigger on not.


    ScrollTrigger will scrub through a timeline just like everything else. Just think of ScrollTrigger as being like GSDevTools that you control with the scroll position.


    But again, don't focus on the scrolling part right now. If you make a timeline that does what I described below, I guarantee you it will work once you hook it up to ScrollTrigger.


    55 minutes ago, OSUblake said:
    • Animate to the 3rd section
    • Animate stuff in inside the 3rd section vertically
    • Animate to the 4th section


    • Like 3
  2. Hi Mantrone, 


    Just from a quick glance at it, I think you might need to make some adjustments to the number 36 I see several times in the code. There are 10 images, so that's where the 36 comes. There are 30 degrees between each image. You'll probably have to figure out a new angle based on the number of images you are using, and adjust the code.

    • Like 2
  3. Hi DK7,


    It's best to think in terms of animations instead of scrolling. ScrollTrigger is just an animation controller, so you need to solve the animation problem before worrying about scrolling or anything else that ScrollTrigger does.


    You basically described everything you need to do for your timeline.

    1. Animate to the 3rd section
    2. Animate stuff in inside the 3rd section vertically
    3. Animate to the 4th section




    • Like 1
  4. Just ignore the scrolling for now. 


    Please just focus on the animation right now. So do not include scroll listeners, ScrollTrigger, gsap.utils.wrap or anything like that. Just make a timeline that animates the columns. As soon the demo starts, the animation should just run. 


    So add your animations to the timeline here. Just fill in the blanks...


    let tl = gsap.timeline();
    tl.to([rev_left], {
      // fill this in
    }, 0);
    tl.to(center, {
      // fill this in
    }, 0)


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


    Once you do that, we can add in ScrollTrigger.


    • Like 2
  5. 2 hours ago, corysimmons said:

    It seems like refreshing fixes this warning more than half the time, but it still pops up every now and then.


    If you have a CodePen pro account, there is a debug view which will open up the page without the iframe.




    Another option is to use CodeSandbox, which is more like a real dev environment. And all our trial plugins will work on that site too.


    • Like 1
  6. Hi chailandau,


    It works, but you have multiple triggers nested inside an element you are pinning. Perhaps you are looking for pinnedContainer?



    Element | String - If your ScrollTrigger's trigger/endTrigger element is INSIDE an element that gets pinned by another ScrollTrigger (pretty uncommon), that would cause the start/end positions to be thrown off by however long that pin lasts, so you can set the pinnedContainer to that parent/container element to have ScrollTrigger calculate those offsets accordingly. Again, this is very rarely needed. (added in 3.7.0)


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


    • Like 3
  7. 8 hours ago, paro said:

    I am not exactly sure how can i implement ScrollTrigger for this kind stuff.


    Look at the code in the first demo you posted. Creating the same thing with ScrollTrigger and GSAP will be pretty much the same thing. Create a timeline that animates all the columns at the same, and then hook it up to ScrollTrigger.


    Give it shot with ScrollTrigger and a Timeline, and if you get stuck, we'll nudge you in the direction.


    • Like 1
  8. 59 minutes ago, WilliamBay said:

    I'm wondering if it's just too many paths (about 75 paths make up each SVG) to be animating, or if there's something that can be done to improve the performance.


    If animating that many paths is slow, you'll probably have to switch to faster rendering technique, like using HTML5 Canvas or WebGL.


  9. Welcome to the forums @corysimmons


    Is there any reason you are trying to combine ScrollTrigger and GSDevTools? Those are two competing animation controllers, so I would expect some strange behavior. If I wanted to scrub through a ScrollTrigger animation, I would just set scrub: true on the animation instead of trying to go through GSDevTools.


    • Like 1
  10. Hi Renny,


    I would suggest ignoring ScrollTrigger for the time being and just focus on the animation. ScrollTrigger is just an animation controller. So animate the images and text in a normal timeline as if there were no scrolling. Once have that looking like you want, all you have to do is hook it up to ScrollTrigger. 😉

    • Like 2
  11. Why don't you start doing something simpler, like forking the horizontal moving demo I made and adding more to it? As I said earlier, using the Observer is going to require custom logic that you are going to have implement yourself. All it does is normalize and group together some common events. How you react to those events is up to you.


  12. 4 minutes ago, kaba92 said:

    in my codepen its wonking  so not smooth and the ball trajectoire is not a arc.


    You can use the MotionPathPlugin.



    3 minutes ago, kaba92 said:

    and its not responsive can i use x: value to percentage in keyframe?


    Percentage based transforms are based on the width/height of the element. It does not work the same as say left: "50%". However, you can use other relative units, like vw.


    • Like 2
  13. I'm not seeing any issues, but if performance is a problem, you may want to consider to do a crossfade between a light and dark version of that section instead of animating colors. Animating opacity is known to be more performant than animating colors.



    • Like 2