Jump to content
GreenSock

OSUblake last won the day on May 13

OSUblake had the most liked content!

OSUblake

Administrators
  • Posts

    9,196
  • Joined

  • Last visited

  • Days Won

    704

Posts posted by OSUblake

  1. Hi Ramzdam, 

     

    59 minutes ago, Ramzdam said:

    I saw one post saying I need to use Reactjs or start looking for React.

     

    Please don't do that. You do not need React.

     

    If you're using modules, then you should do the import thing, otherwise just a <script> tag.

     

    https://greensock.com/docs/v3/Installation?checked=core,observer

     

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/Observer.min.js"></script>

     

    • Like 2
  2. He Vivo,

     

    You probably need to get the root of your problem and make sure your expandModal and contractModal don't get called at the same. That's what happening right now, so as soon as you click to close, it also expanding it. For now, you could just exit the function.

     

     

    function expandModal() {
        console.log("expanding modal");
    
        if (isExpandedRef.current) {
          return;
        }
    
        isExpandedRef.current = true;
        t2.current = gsap.timeline();
        t2.current
          .to(modalRef.current, {
            scaleY: 2.6,
            scaleX: 2.6,
            top: "30px",
            left: "50%",
            xPercent: -50
          })
          .to(btnRef.current, { autoAlpha: 1 }, "<");
      }

     

    • Like 2
  3. 19 hours ago, Robert Wildling said:

    UPDATE

    You mention that I create a tween every time there is a movement. Is there a better way? 

     

    That's why he was mentioning the quickTo. 😉

     

    19 hours ago, Robert Wildling said:

    I might have been unclear in my question: I am looking for an "onMoveEnd" option, one, that detects that the mouse is not moving (but it is still clicked).

     

    Are you talking about for Draggable? There isn't anything like that, so that's what you'd have to set up yourself. Like how do you determine if something isn't moving? You'd have to choose what that time that should be and maybe do like a custom debounce function.

     

    • Like 1
  4. I definitely know about the shortcut. The thing I like is to be able to comment out more than 1 line at time, but then later uncomment an individual line.

     

    To uncomment display: flex would require uncommenting everything. You don't have this issue with SCSS.

     

    section.spacer {
    /*   height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center; */
    }

     

    • Like 1
  5. 31 minutes ago, akapowl said:

    SCSS syntax and my forks of that one only really use SCSS for commenting things out like //this instead of /* this */ - Sorry for any confusion, it's just a habit of mine!

     

    Ha, that's basically the only reason I have my pens set to use SCSS. 

    • Haha 1
  6. 19 minutes ago, superpositif said:

    div.image-bg must scale onscroll but is scaled onload. I don't understand why... Could you help me please ?

     

    You're scrolling to the end of the page, so it's going to trigger that animation. If you're trying to do everything in reverse, then you will probably have to manually control your animations in callbacks like onEnter, onEnterBack, onLeave, onLeaveBack to  with animation methods like play, pause, reverse, restart, etc.

     

    You're question sounds pretty similar to this one, except it uses scrub, so it needs to use onUpdate instead of those other callbacks.

     

     

    • Like 2
  7. There's lot of demo on the ScrollTrigger docs if you scroll down the demos sections. There are way too many links to post here.

     

    https://greensock.com/docs/v3/Plugins/ScrollTrigger#demos

     

    https://greensock.com/st-demos/

     

    ScrollTrigger Showcase - a Collection by GreenSock on CodePen

     

    I would recommend to start out small. Don't worry the buttons yet. Get your ScrollTrigger animations working first, then add in more features like the buttons.

     

  8. Hi merkif,

     

    As we state in the forum guidelines we don't have capacity to investigate, recreate or explain how to create custom effects.

     

    We are more than happy to answer GSAP-specific questions though. So if you give this effect a go yourself and get stuck in the process, feel free to post a minimal demo here and we'll give you some advice on how to get closer to your goal.

     

    And you're welcome to post in the Jobs & Freelance forums if you'd like to hire someone to help. 

     

     

    • Like 1
  9. Hi Steinbach,

     

    There's nothing wrong your code and canvas is super fast. My guess is that you might have some really large images that are putting too much strain on your iPad to render. And by large, I don't mean file size but the actual width and height, i.e. how many pixels are in that image. 

  10. 6 hours ago, b-link said:

    using the code from the first code pen you propose, is it possible to add a condition to detect if a certain section is in view then pin it and have the horizontal scroll ? 

     

    You should really go through the code in those pens to make sense of what's going on as you will have to customize it to do what you want. For example, notice how there is a currentIndex being tracked. That would be correspond to the section it is on. And there is no pinning. It's just animating containers in and out view.

     

    A horizontal scroll effect is the same thing. You animate a container horizontally. So you could listen for events, and animate the progress of the animation. 

     

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

     

     

×