SteveS

I believe this is what you are looking for:


See the Pen XWoeGXE by StevenStavrakis (@StevenStavrakis) on CodePen


It's not the prettiest solution, but it definitely works.
You can read more from this thread:
To roughly describe:
We create our image section We create a spacer element We make our scrolltrigger such that it scrubs for twice as many pixels as our viewport is tall We make our animation so that half of it is the image scaling and the other half does nothing We set pinSpacing to false  
When we start scrolling:
The image section pins at the top and loses all its height because we didn't put a pin spacer We scroll 100vh, during which our image grows, and our spacer gets moved up the page After the spacer has completely scrolled, we will be halfway through our scrub, and therefore halfway through our animation The second half of the animation is empty, so the section remains pinned as our text comes into view Once the text section is completely within view, we reach 200% of our image section and the pin releases  
I think this should be the solution you are looking for. @Rodrigo and @Cassie came up with solutions for the original thread, so either might be able to provide more input. I think it would be interesting if instead of making a spacer element we could customize the pin-spacer, but that's not currently possible as I understand.

Yeah, I rectified the issue by adding the mouse movement effect to a wrapping element and then moving the orb in and out of it. Problem solved. I'm still not completely sure what the issue was but it's a fine enough solution.

I'm not sure I understand the question or the desired effect. From what I think I understand, it looks like you are animating from the default text-shadow to your custom value. To be more precise, when you tween to rgba(255, 158, 158), it starts from some default that happens to be black.

A solution to this is to set its starting value to the color and opacity that you want. Here is an example using fromTo instead of to.


See the Pen WNYjvKr by StevenStavrakis (@StevenStavrakis) on CodePen

Looks pretty clean to me. Animating SVGs over DOM elements can sometimes be less performant, but that generally doesn't matter with animations this small.

There's tons of variables at play as to why this could be happening. It's overwhelmingly likely something in your webpack is misconfigured, but there isn't really a way for us to tell. Can you explain what you are doing in more detail?

@cotton You will want to do it similar to this:
 

See the Pen KKoJMpZ by StevenStavrakis (@StevenStavrakis) on CodePen
 
However, you probably need to adjust the start and end values to get deeper colors / colors at the right time.

@RIOTCODE

Here is a demo I wrote up. Importantly, you need to define the "scroller" in the scrollTrigger config object:
 
https://codesandbox.io/s/admiring-pike-wgqzv7?file=/src/App.js

I believe this can be fixed in your HTML. Put your image in a container with a static height to be used for the parallax speed and then scale inside of that container.

Think about it this way, with parallax you take the height of an element, find the difference between that and the height of its container, and then you translate the inner element up by that much over the duration of the scroll. If you introduce scale into the equation it becomes significantly more complex since scaling can happen non-uniformly. e.g. image scaling can happen between 50% and 100% of page height, or any other values. It's not impossible to calculate, probably not even that difficult, but it doesn't make sense as a feature because of how niche the use case is vs the amount of code required to make it reliable.

Any beginner JS tutorial will go over arrays. I used fairly new ES6+ syntax for the example, but it shouldn't be too complicated.

const border = gsap.utils.toArray(".border") takes all elements with ".border" class and puts them into an array.

 
for (const border in borders) { gsap.to(border, { scrollTrigger: { start: "top bottom", end: "bottom center", toggleActions: "restart pause restart pause", scrub: true, }, duration: 2, left: '0', right: '0' }); }  This should do pretty much exactly what you need. Though I modified the start behavior. Otherwise I would google "introduction to javascript arrays" and work from there.

Ok. You download the files and put them in your root directory then import them into your html the same way you are importing your main.js file.
 
<script type="text/javascript" src="./gsap-shockingly-green/minified/gsap.min.js"></script> And then just use it in your JS.

That being said I would highly recommend Vite when developing so that you get all the benefits of a bundler.

Does it work if you remove the orbit controls functionality? It's more than likely you have a conflict between your controls and your animation. Probably best to disable controls while animating and then when the animation completes set the controls to the final position.

Also, you are updating the projection matrix in areas that I wouldn't expect you need to. In modelPositionTop you shouldn't need to update the projectionMatrix as you are only animating the camera position.

There's a lot going on here and there are several other threads on the matter but they are mildly dated.

General process:
When the pin completes, kill the scrollTrigger. This will: Reset everything the scrollTrigger did remove the pin spacer Since removing the pin spacer changes the page height, we need to manually set our scrollPos to where we want it, in this case where the pin section takes the full page. Locomotive scroll has its own utility for this. Since we killed the scrollTrigger, we have to set the end state of its animation  
Here is a codepen:

See the Pen QWQRPJE by SteveSDaBest (@SteveSDaBest) on CodePen
 
I recommend using GSAP's ScrollSmoother instead of locomotive scroll, as it uses native browser scroll which can make things easier, plus it has seamless integrations with ScrollTrigger.

@wp-helping-hand
 
I don't think this is a browser issue. Opening the webpage in chrome shows the same issue you are describing, elements animating on screen much later that I would expect.

In my experience, and if I'm wrong hopefully someone will correct me, this can be caused by creating the scrolltrigger before everything on the page has loaded. Actually, I went to check the page again, and it works sometimes so it's almost definitely along those lines. Sometimes weird margins on elements can also have an effect.

It's impossible for me to debug it without seeing your code, and even then anything WP related always runs the risk of some weird page builder artifact getting in the way. But here are some steps you can take to try and pin down the issue:
Start a brand new page and slowly bring in one section at a time, making sure each works before bringing in the next. Refresh your scrolltriggers using a timeout that fires several seconds after the page loads / set all GSAP to execute several seconds after page load to see if it really is an issue with the DOM changing Make sure you aren't making one of the common scrolltrigger mistakes  
If you post your GSAP code we can check for simple mistakes or optimizations, but these kinds of issues are awfully hard to figure out over a forum.

Animate scale, not padding. Set the transform origin to center. You are also using TweenMax. It's recommended that you upgrade to a more recent version of GSAP and use current conventions for writing tweens.

Here's a codepen:

See the Pen ExQrWRz by SteveSDaBest (@SteveSDaBest) on CodePen

Again, relying on state for this, at least in the way you have constructed it, is not straightforward. Instead, control the timeline. Also, I'm pretty sure you are never supposed to declare components inside each other, such as you have with <FlowerCircles />.

Here is a CSB that works using the method I outlined:
https://codesandbox.io/s/dank-tree-9mq340?file=/src/App.tsx
 
Note: I'm not properly cleaning up the tweens or the timeline. To do so add them to an array and loop through the array in the cleanup to kill them.

Please refrain from making non-gsap related posts in the future:
 

See the Pen dydqYLv?editors=1111 by SteveSDaBest (@SteveSDaBest) on CodePen

ScrollSmoother has been really great so far, and I have had no real issues in react until I implemented page navigation. I use a small library called wouter to navigate pages which works effectively the same as react-router but in a smaller package. Upon making my first page navigation, I was crashing with the error 'NotFoundErrror: Failed to Execute 'removeChild' on 'Node': The node to be removed is not a child of this node.'
 
Digging around on the forum, I found several posts on the same issue, specifically regarding ScrollTrigger and pinning elements. Basically, when something gets pinned, GSAP creates a container, and when it comes time to unmount the component, if you don't clean up correctly it freaks out. Don't really know why.

Anyway, I'm definitely cleaning up all my scroll triggers, so that shouldn't be the issue. On top of that my error was pointing me towards my home page index file. The only thing I am doing in that file is creating and cleaning up my ScrollSmoother. Sure enough, disabling the scroller resolves the issue. I figured somehow I wasn't cleaning up correctly, or trying to kill tweens/scrollTriggers that didn't exist, but playing around with those didn't help.
 
It finally occurred to me that, much like pinning, ScrollSmoother creates a 'smooth-wrapper' div around your 'smooth-content' element if you don't do it yourself. After setting a wrapper in my SmoothScroller and writing it into react, my problem is solved. Hopefully this post can save others some time in the future.