Jump to content
Search Community

Help a newby with a scrolling area, GSAP + Scroll Trigger

JV10 test
Moderator Tag

Go to solution Solved by JV10,

Recommended Posts

I am trying to achieve a full-height section that gets pinned when the user reaches it.

 

As an example the area would start like this (full width)
image.png.2d764ca1dbe9308f9c232bb38783d037.png

then if the user scroll the image would change and the bottom part would scroll up making the 8x the crop yield opacity 1 and show the next:


image.png.4c3390101bb3696e662ea20f34b93bb8.png

 

 

 

I am not 100% if my codepen reflects exactly what I am trying to do, I believe the images are ok it is working, problem is the scrollable content. first do I need to put it position absolute? How can I scroll between elements? is there a way to set a class like active to the current element and prev next to the corresponding ones?



Thank you in advance

See the Pen ZEMXRQY by JV10 (@JV10) on CodePen

Link to comment
Share on other sites

Hi @JV10 welcome to the forum!

 

The thing with ScrollTrigger is that it is just animating something on scroll, so 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. So in my example I've just commented out ScrollTrigger to focus on the animation.

 

What I've done is after the item is done animating from opacity: 0.25, animate it to opacity:0 and at the same time move the element .stats-list up by -50 pixels (this is just some random value, you should probably calculate how high the item is and use that value), but do that for each .stat-item element and with that do some fancy calculations for the position parameter to have that work in time with your staggers.

 

The idea for using this logic came from an awesome tutorial our own @Carl did. All his videos are great even if you think you're never going to use it there is a lot of general knowledge to gain from them that you can use in your own projects!

 

 

Sidenote: if you're using the same values over and over again for most of your tweens, you can set them up in your timeline as defaults (see comments in the pen). Also I don't know what the yoyo: true and repeat was doing in your staggers, so I've removed them. 

 

See the Pen PodJBpw?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 5
Link to comment
Share on other sites

On 3/8/2023 at 7:39 AM, mvaneijgen said:

All his videos are great even if you think you're never going to use it there is a lot of general knowledge to gain from them that you can use in your own projects!

 

Hi @mvaneijgen I wish everyone understood the "what and why" of what I do as well as you do! Thx for all the support in sharing my lessons.

  • Like 2
Link to comment
Share on other sites

  • Solution

First of all thank you @mvaneijgen for your help.

 

It is a great idea to get everything working before adding scrollTrigger.

 

I was able to get exactly what I wanted now. With only two showing 😃 

 

Now to add the scrollTrigger what the best approach is?

 

 

Edited:

 

What I mean by my question, is like did the code above is good in terms of standards to add the scrollTrigger? and also, how can I ensure that the first image and text has opacity 1 from the start?

 

  • Like 2
Link to comment
Share on other sites

That is correct. You've an ease of "power3.inOut" which influences every tween, take a look at https://greensock.com/docs/v3/Eases there you can see every type of ease you could use.

 

When working on a ScrollTrigger with scrub: true I usually choose to set all eases to "none", this will make it linear and then everything has a consistent feel when scrolling.

Link to comment
Share on other sites

On 3/8/2023 at 1:39 PM, mvaneijgen said:

The thing with ScrollTrigger is that it is just animating something on scroll, so 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. So in my example I've just commented out ScrollTrigger to focus on the animation.

Just remove ScrollTrigger again and look at your animation, try and fix your timings, so that you don't have any stops. 

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