OSUblake

You can check for that condition and then disable the observer.

https://greensock.com/docs/v3/Plugins/Observer/disable()

But I would advise against trying combine normal scrolling with the Observer as it can get overly complicated. That is something you will need to figure out on your own.

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>

Just call this to update it.

ScrollTrigger.refresh();

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 }, "<");
  }

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.

Hi superbeng,

I'm not exactly sure what you're asking. You can use gsap.getProperty to get the height of something and gsap.set to set the height.

Just try one that looks good to you. They are all going to be pretty close except for back, bounce, and elastic.

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; */
}

Yeah, that's what I'm thinking. Kind of like how ScrollTrigger does pinning, but in reverse.

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. 

36 minutes ago, superpositif said:

The result is not bad, however the image does not remain fixed at the bottom of the screen.

Yeah, that's not possible because position: fixed will not work inside an element that is being transform, which is what happens with your scroll content. It's just a CSS thing.

https://stackoverflow.com/a/15256339/2760155

You can view the compiled HTML, CSS, or whatever by clicking here...

Welcome to the forums @Gary D.

I'm a little confused what do you mean by html/css/js? Everything in this thread is written in those.

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.

Thanks for the demo! We'll look into that.

Welcome to the forums @thisispegasus

Yarn can be a little difficult at times. Here's a thread that might offer some insights on the issue.

Hi GGQa,

You just need to loop through every item based on the column, kind of like a 2D array. And you can replace that .set() call with gsap.quickSetter.

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

Also, you can use our new Observer plugin to handle most of your events.

https://greensock.com/docs/v3/Plugins/Observer

Just like I said in your other post, you can use a containerAnimation to do that. 

I'm a little unsure about what you're asking. It seems to work fine with normalizeScroll enabled.

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

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.

The key to figuring issues is to isolate the problem. Have you tried using a fixed container instead of using ScrollTrigger to pin it just to compare?

And if you're seeing jumping, you might want to try using the normalizeScroll method.

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

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. 

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. 

Welcome to the forums @rexarvind

It's usually best to start a new topic, but you should look into the containerAnimation features.

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

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