Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Mariano1ero

Vertical Scroll with react + CSS snap scroll and scrollTrigger

Recommended Posts

Good morning greenSock.

I'm having trouble applying ScrollTrigger on a landing page where I need to recreate the codepen example

(https://codepen.io/GreenSock/pen/YzyaKrq)

 

And incorporate animations of the elements, when scrolling through the web with the scrub attribute so that the animation is performed for both directions of the scroll

From already thank you very much

Captura de pantalla 2022-01-06 a las 14.59.29.png

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

Link to comment
Share on other sites

Welcome to the forums, @Mariano1ero. I read your post a few times and I don't understand your question. You'll significantly increase your chances of getting a relevant answer if you provide a minimal demo (like in CodeSandbox.io - here's a react template) and be very specific about your GSAP-related question. 

  • Like 1
Link to comment
Share on other sites

hello, So sorry, I will try to express it better.

I want
animate the texts, images, etc., within each section using scrollTrigger.

I want to combine the animations of this example
(https://codesandbox.io/s/sweet-snow-9uvfs?file=/src/styles.css

with the scroll snap of this other example
(https://codesandbox.io/s/agitated-stonebraker-ovhuj?file=/src/App.js)

 

and I'm following this example (

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

)

Link to comment
Share on other sites

I'm not sure what you're asking either, but you probably need to create a ScrollTrigger for each panel or whatever you are doing. 

 

https://codesandbox.io/s/scroll-forked-2nt5j?file=/src/App.js

 

Also, you should never create a timeline outside of a hook. Closures DO NOT work in React. 

 

const el = useRef(null);
const child = gsap.utils.selector(el);
  
// Bad 
const tl = gsap.timeline();
gsap.registerPlugin(ScrollTrigger);

 

And don't put child in the dependency array. If you don't like the es-lint warning, then disable it or create child inside your effect.

useLayoutEffect(() => {
  const child = gsap.utils.selector(el);
}, []);

 

  • Like 1
Link to comment
Share on other sites

Thanks so much I will check this and take your recommendations.

by the way the example what I want to replay is this 
https://gcm.ionstudiosoft.com/ )
I want to do exactly that animations if you see, the animations start with the scroll, and disappear when the section left the viewport
it takes a few seconds after the section be active in the viewport to start the animations 

I think y can play with the method like gsap.fromTo.... to do this action so I think I have this solved but if not i going to ask again lol

 🙃

Link to comment
Share on other sites

  • 2 weeks later...

I got it, although I still can't make a good transition.
but I'm getting closer.
The question now is.
If I have each section in a separate component, how can I activate the animations within each component? Currently, I am using the intersection observer to detect the element within the viewport and thus communicate that data to the components through context and trigger the animation. The situation is that it takes a long time. in making the animation or directly does not recognize it

I can share with you guys my gitHub repository so you can see more in detail what I'm trying to do (browser tools)
but if it's a lot these days I'll create an example in codepen

this is my github https://github.com/HeepNite/Caroline
 Thansk so much 

Link to comment
Share on other sites

Hi Mariano, 

 

It's a bit much to go through an entire project repo, so a minimal demo on CodePen or CodeSandbox would be really helpful.

 

And I'm not sure why you are trying to use an intersection observer as that's what ScrollTrigger does for you.

 

It sounds like you might be overthinking a lot of what's involved here. Especially if you're just trying to do something like this site.

https://gcm.ionstudiosoft.com/

 

Just make a Timeline + ScrollTrigger for every panel/section with the animation you want.

 

gsap.timeline({
  scrollTrigger: {
    trigger: ...,
    scrub: true
  }
})
.to(...)
.to(...)

 

Link to comment
Share on other sites

Hello OSUblake

 

I use the intersection watcher because I need the animations to start once the sections are inside the viewport.
as in this demo that they have on their page

 

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

 

I mean fade and fade, I can't get it to work. I don't want to load the page and have all the elements ready there. I want them to have an animation and for each element to fade in or out whenever a section enters the viewport and not just be there and just scroll.

 

like this https://gcm.ionstudiosoft.com/


when it loads for the first time it has an animation a fadein



 

Link to comment
Share on other sites

Again, you don't need to use the Intersection Observer. ScrollTrigger can do everything in can do and more. Detection is completely configurable with the start and end values, and if you need more control, there's a bunch of callbacks.

 

This is a very basic example of what that site looks like to me without the snapping.

 

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

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×