Jump to content
Search Community

GSAP Scroll Trigger

b0nes test
Moderator Tag

Recommended Posts

Hello everyone! I am new to GSAP just started learning this month since the website that I am trying to create is needing some scroll animations I feel like this is probably the best product to use with Reactjs. But I am curious if the below video would even be possible to create using just ScrollTrigger or would I need another library?? 

Any and all responses or pointing to documentation that could help me out will be greatly appreciated. Thank you in advance! 
https://assets.awwwards.com/awards/sites_of_the_day/2022/08/outstanding-person-nav.mp4

This is a video of something I am trying to achieve. 

Link to comment
Share on other sites

Seems possible, I can't think of any reason you could not build this with GSAP/ScrollTrigger. 

 

I would however recommend taking it slow and starting with small little interactions when starting out. Creating this as your first animation project is a tall order, but if you keep it small and tackle one animation at a time you could slowly build it out. 

 

Keep in mind that ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in.

 

Be sure to look a the amazing GSAP YouTube channel  for some create tips and tricks! And take look https://greensock.com/st-demos/ for some great demos. Good luck and happy tweening!

  • Like 1
Link to comment
Share on other sites

Started working on it I am getting the initial div pinned but the animation is not working on scroll?
Im trying to achieve that the headings are scrubbed and go all the way outside the view port. Once they do then unpin the div?

I have also never done a codepen so hopefully this link works! Any help would be awesome!

See the Pen YzjrQvv by colemiller21 (@colemiller21) on CodePen

Link to comment
Share on other sites

With ScrollTrigger the best thing to do is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in.

 

Here is a fork of you pen. I've created a timeline of your set up and moved all the ScrollTrigger logic to that timeline. I've also disabled ScrollTrigger, because this makes it easier to focus on the animation. Then I've add your tweens to the timeline. When working with percentages, it is much more optimized to use the xPercent and yPercent versions of x and y. Now you can really tweak your timeline and when you're happy you can enable ScrollTrigger again to see how it works. 

 

Again be sure to look at the Greensock Youtube channel if you want to learn quickly. Hope it helps and happy tweening! 

 

See the Pen PoBJKgG?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

Alright quick question if anyone could help. I cant replicate in a codepen for some reason but I have a landing animation that I had working on scroll but now it just flashes once when the page loads and then goes away?? 

I am using i18next idk if that could possibly be an issue?

useEffect(() => {
 
const g = genuine.current;
const u = undead.current;
const pt = pinTarget.current;
const imgDiv1 = imageDiv1.current;
const imgDiv2 = imageDiv2.current;
 
var tl = gsap.timeline({
scrollTrigger: {
trigger: pt,
end: "+=400% bottom",
markers: true,
pin: true,
scrub: true,
},
});
tl.add("start");
tl.fromTo(g, { x: 0 }, { x: 1500, duration: 3 }, "start");
tl.fromTo(u, { x: 0 }, { x: -1500, duration: 3 }, "start");
 
var tl2 = gsap.timeline({
scrollTrigger: {
trigger: pt,
end: "+=200% bottom",
markers: true,
pin: true,
scrub: true,
},
});
 
tl2.add("startImage");
tl2.fromTo(imgDiv1, { y: 0 }, { y: -2000, duration: 3 }, "startImage");
tl2.fromTo(imgDiv2, { y: 0 }, { y: 2000, duration: 3 }, "startImage");
}, []);
Link to comment
Share on other sites

Thanks I read that article and implemented a context and a clean up with the div surrounding the animated items as the scope. But it still flashes and then disappears? If I comment it out it stays there but I am unsure what I am doing. It was working initially and I changed the end from +=400% to +=300% and then it started happening? Probably not because of that just weird occurrence. 

Link to comment
Share on other sites

We'd love to help, but it's pretty much impossible to troubleshoot blind. Can you please provide a minimal demo, like in CodeSandbox or Stackblitz? 

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
Share on other sites

It looks like you have 700+ lines of CSS and it isn't at all clear to me what exactly you expect to happen or what the problem might be. You'll greatly increase the chances of getting a good answer if you simplify things as much as possible and make it explicitly clear how to reproduce the problem, like:  Vague details like 'it's broken' or 'it doesn't work' are very difficult for people to help with. Here are some tips that will increase your chance of getting a solid answer:

  • A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
  • A clear description of the issue -  "the purple div only spins 90deg"
  • A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
  • A minimal demo that only shows the absolute essentials to illustrate the problem. 

 

Link to comment
Share on other sites

17 minutes ago, b0nes said:

Can I point you to a code repo?? I am having a problem getting it to work in the stack blitz 

It's not very practical to work on a repo, sorry. A Stackblitz or CodeSandbox is definitely best. 

 

The best advice I can give is to simplify, simplify, simplify. Slowly build it up until it breaks. 

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.
×
×
  • Create New...